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.
    注: 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.
      注: 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.
    注: 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.