Creating a User Component control

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

To create a User Component control, use this procedure:

  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. Optionally, organize all the assets to be imported into a single folder or directory.

    Note: You can reference scripts, style sheets, images, or any asset stored in another server. For example, to include an image file without importing it into Mongoose, you can use a URL reference such as this in your user component JavaScript: https://code.jquery.com/images/title_graphic.png.
  2. In Mongoose, import your JavaScript file and associated resources using the Edit Web User Control Assets dialog box.
    See Importing Web User Control Assets.
  3. In Mongoose, go into the designer (Web Designer in the web client, Design Mode in the Windows client).
  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, specify this information:
    Field
    Specify the path and filename of the resource.
    Content Type
    Select application/user-component.
    Name
    Specify the name of the User Component control, for example, MGSlider.

    The name must be unique within the forms database.

    Source
    Select the path to a JavaScript file that implements your user component.
    Show in Toolbox
    To have the User Component control available from the Toolbox, select this check box.
    Note: The User Component control must be saved. To display the new User Component control in the Toolbox, refresh the cached metadata or unload global objects.
    Toolbox Image
    If you selected Show in Toolbox, select the image file to use for the Toolbox icon.
    Toolbox Label
    If you selected Show in Toolbox, specify the translatable string name to use for the Toolbox icon tooltip.

    You can select an existing translatable string or specify a new literal or translatable string.

    Note: If you specify a translatable string that does not exist, ensure you create the translatable string before you implement the User Component. Otherwise, the system treats the string as a literal value.
    Requires
    Select the CSS and JavaScript files that are required by this User Component control.

    Select from the list of available CSS and JavaScript files in the right pane. Use the buttons to add or remove individual or multiple files.

    External References
    If the User Component requires the use of any external resources, for each resource, specify the URL, and then click Add.

    This adds the external resource to the list of required resources in the Requires field. Only resources displayed in the left pane of the Requires field are incorporated in the implementation of the User Component. You must indicate all resources referenced by your JavaScript.

  7. Click OK.
  8. In the Edit Web User Control Assets dialog box, verify that your User Component is added to the list of page elements.
  9. Click OK.
  10. Close and reopen Mongoose.
    When prompted to save your changes to the Web User Control Assets, click Yes.
  11. Open the form where you want to implement your User Component, and go into the designer.
  12. In the Toolbox, verify that your User Component displays in the list of User Components.
  13. Select your User Component and add to your form.
    Note: You cannot test the User Component in the Windows client. There it displays only as a reserved space on the form. You must be in the web client to test its operation.
Related topics