Create the client component of the settings control

In the client component of the settings field you get the values from the input fields and serialize them as a string. This string must then be returned as the value of the custom field control.

To create the client component, you must perform the following:

  1. Create a new .js file.
    In the folder of your custom payment processor, add a new JScript file.
  2. Mark the file as an embedded resource.
    Right-click on the file and select Properties. Set the Build Action property to Embedded Resource.
  3. Register the namespace of your custom control class.
  4. Define the client class.
    You must define a client class for your custom control. It must contain a component property for each of the input fields in the template. The values of these component properties will be the client IDs of the respective controls. Additionally you have to add a component property that will represent the delegate for the processing mode control. This will allow you to show/hide input fields when the  value of the processing mode field gets changed.
  5. Define the prototype for the client class.
  6. In the prototype definition create the needed functions.
    You will require the following functions:
    • initialize
      This function is called when the control is initialized. In it you create the delegates and assign them to the respective events. In this example, you have to create a delegate for the ValueChanged event of the processing mode control.
    • dispose
      In this function you have to call the base dispose method of the client class and to delete the delegate for the load event.
    • validate
      In this function you validate the values in the input fields. It must return true if the values are valid. You can specify the validation rules in the template. For more information, see For developers: Create the template of the settings control.
    • reset
      In this function you setup the default values for the fields.
    • get_value
      This function must return a serialized string containing the values of the input fields.
    • set_value
      In this function you set the deserialized sequence of values to the _state property. If the application is loaded, call the updateUI function.
    • isChanged
      Implement this function if you want to specify whether the value has changed.
    • _applicationLoaded
      This is an event handler for the load event of the application. In it, set the app_loaded flag to true and call the updateUI function.
    • _processingModeControlHandler
      This is an event handler for the ValueChanged event of the processing mode field. Hide or show the respective section in the UI depending on the value of the processing mode control.
    • updateUI
      Update the values of the fields and the visibility of the sections.
    • _getSettingsObject
      In this function, get the values of the input fields and return them to the calling function.
    • _isArray
      This is a helper function, that must determine whether a variable is an array or not. It is used in the _getSettingsObject.
  7. Create getter and setter functions.
    Create a get and set function for each of the component properties that represent an input field.
  8. Register the client class.
    To register the client class, call its registerClass function and the full name of its type, and its base type.

Use the following code sample:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?