Creating a custom code template with the web UI framework

Edit online

You can create a custom code template by using the Code Template Generator.

About this task

Do the following to create a custom code template from either a default template or a custom template.

Procedure

  1. Open the Code Template Generator.
  2. In the Available Templates section, right-click on a template in one of the following lists:
    • Custom Templates
    • Default Templates
  3. Choose the create from selected option.

    A new template appears in the Create New Template window. This window includes variables that can be used in the code template and reduce the number of required fields in the Code Template Generator.

    The Existing Screen Variables section show the default variables, which you cannot change (names and values). The User Defined Variables section shows the variables that you created and which you can change (names, types, and values).

    In the User Defined Variables section, you can add any properties to the name/value pairs that are part of the default template. Click the Add button to add a user-defined variable, which defaults to the string type. You can change the type to an expression (expr).

    The above example screen shows a user-defined variable (projname) of the type expr and the value className (className is a screen variable). The application uses the expression projName=className, instead of the projName=”className” (if the type is string).

    You can remove variables by right-clicking on a variable row and selecting the delete option.

  4. In the Template Details section, define the following information:
    • Template Name: Unique identifier of a template that also serves as the json file name.
    • Variable Name: Name by which this parameter is referenced in the template.
    • Variable Label: Text that would be displayed before the input field of this variable on the Code Template Generator window.
    • Variable Type: String or expression (expr).
    • Value: String, variable, or expression that could be evaluated to return a value. This value would then serve as the default value and be used to populate the value in the input field for this variable on the Code Template Generator window. By default, this field is left empty.

    You can add variables by clicking the Add New button. A new variable row appears.

    You can remove variables by right-clicking on a variable row and selecting the delete option.

    The bottom part of the Template Details section shows the Ext JS XTemplate that is used to generate the code.

  5. Save the new template by clicking the Save button. The new template is saved as a json file (using the template name) in the following directory:

    <user's project directory>/designer-metadata/templates

    If you do not want to save the template, click the Cancel button.

    After you click the Save button, the Create New Template window closes and the Code Template Generator window appears. You can now use the new template to update the code for a screen component.