Creating a User Component control

User Component controls are specialized user control components designed to work as user interface (UI) controls in web clients only. These user controls can be added as components to the standard Design Mode Toolbox. They are capable of leveraging attributes and behaviors specified as component properties, which makes them look and act much like native form components.

To create a User Component control:

  1. Create a JavaScript to implement the User Component.
    The functionality for the User Component must be in the form of a JavaScript (which can then reference other resources and assets).
    For ease in importing them into CloudSuite Business later, it is a good idea to organize all the assets you want to import into a single folder/directory, if you can.
    Remarque: It is possible to reference scripts, style sheets, images, or just about any asset stored on another server. For example, to include an image file without importing it into CloudSuite Business, you could use a URL reference such as this in your user component JavaScript: https://code.jquery.com/images/title_graphic.png.
  2. In CloudSuite Business, import your JavaScript file and associated resources, using the Edit Web User Control Assets dialog box.
    See Importing Web User Control Assets.
  3. In CloudSuite Business, go into Design Mode.
  4. From the Edit menu, select Web User Control Assets.
  5. In the Edit Web User Control Assets dialog box, click New.
  6. In the Edit Browser File dialog box,
  7. From the Content Type drop-down list, select application/user-component.
  8. In the Name field, specify a name for your User Component control.
    This might be something like "RedProgressSlider" and must be unique within the forms database.
  9. From the Source drop-down list, select the JavaScript file that implements your User Component.
  10. To have the User Component control available from the WinStudio Toolbox, select the Show in Toolbox option.
  11. If you selected Show in Toolbox in the previous step:
    • Use the Toolbox Image drop-down list to specify an image file for the icon that is used to represent the User Component in the Toolbox.
    • Use the Toolbox Label field to specify how the User Component should be labeled in the Toolbox.
      This can be a translatable string selected from the drop-down list, or you can specify a new literal or translatable string by typing it into the field.
      Remarque: If you specify a translatable string that does not yet exist, make sure you create the translatable string before you try to implement the User Component. Otherwise, the system treats the string as a Literal value.
  12. If the User Component requires the use of any resources already imported into WinStudio, click OK.
    This closes the Edit Browser File dialog box and returns you to the Edit Web User Control Assets dialog box.

    In the Edit Web User Control Assets dialog box, locate and select the entry for your new User Component. Then click Edit.

  13. If the User Component requires the use of any external resources, for each resource, specify the URL to it in the External References field, and then click Add.
    This adds the external resource to the list of required resources in the left pane. Only resources displayed in the left pane are incorporated in the implementation of the User Component. You must indicate all resources referenced by your JavaScript.
  14. Click OK, and verify that your User Component is listed in the list of Web User Control Assets.
  15. In the Edit Web User Control Assets dialog box, click OK.
  16. Close and reopen CloudSuite Business.
    When prompted to save your changes to the Web User Control Assets, click Yes.
  17. Open the form where you want to implement your User Component, and go into Design Mode.
  18. In the Toolbox, verify that your User Component displays in the list of User Components.
  19. Select your User Component and draw it on your form where you want it to appear.
    Remarque: Remember, you cannot actually test the User Component in the Windows client. It will display only as a reserved space on the form. You must be in the web client to test its operation.