Modern UI Editor

Page ID: (AU201080)

You use this page to customize the original HTML and TypeScript code of a form and to automatically create the extension files that contain the customized code.

Tip: You open the Modern UI Editor page by first expanding the Screens node in the navigation pane of the Customization Project Editor. In the list of forms displayed under the expanded Screens node, expand the node that corresponds to the form whose code you want to customize, and click the Modern UI Editor node.

Page Toolbar and More Menu

The page toolbar includes standard buttons and page-specific buttons and commands. For the list of standard buttons, see Page Toolbar. The page-specific commands can be shown as buttons on the page toolbar, as commands on the More menu, or in both places. These commands are listed in the following table in alphabetical order.


Button	Description
Add Field	Opens the Add Field dialog box. This dialog box is used to create a TypeScript extension for custom fields that have been added in the backend code.
Add View	Launches the Add View wizard, which is used to create a TypeScript extension for a view that has been added in the backend code. In Step 1 of the wizard, you select a view in the View Name box. In Step 2 of the wizard, you select any number of the selected view’s fields that you want to add to the extension.
Edit TypeScript Extension	Opens the Edit TypeScript Extension dialog box, which is used to create new custom TypeScript extensions or edit existing ones.

Table 1. Add Field Dialog BoxThis dialog box opens when you click Add Field on the page toolbar. In the dialog box, you can add a custom field and generate a TypeScript extension.
Element	Description
This dialog box has the following elements.
Data View	The data view that contains the custom field you want to add to the form. You select this data view from the drop-down list, which displays all available data views whose fields you can add to the form that you are customizing.
DAC	The name of the data access class (DAC) that corresponds to the data view selected in the Data View box. The system automatically inserts this DAC.
Field or Display Name	A search box where you can type a string that’s part of the field or display name of the custom field that you want to add to the form. The system uses this string to filter the results in the table below it that lists the fields from the selected data view.
Fields table	A list of the fields from the selected data view that can be added to the form.
The dialog box has a table listing the fields from the selected data view that can be added to the form. You can select any number of fields from the table. If you've entered a search string, you'll see only the fields whose field or display name contains the string.
Included	An unlabeled check box that you select to add the field to the form.
DAC	The DAC of this field.
Field Name	The name of the field.
Display Name	The display name of the field.
The dialog box has the following buttons.
Save to Extension	Generates a new extension or saves the changes to an existing one, and closes the dialog box. The file with the generated TypeScript extension is added to your customization project and listed on the Modern UI Files page of the Customization Project Editor.
Cancel	Closes the dialog box without generating an extension or modifying an existing one.

Table 2. Add View WizardThis wizard opens when you click Add View on the page toolbar. In the wizard, you can add a view and generate a TypeScript extension.
Element	Description
This wizard has two steps. Step 1: View Settings has the following elements.
View Name	The view you want to add to the form you’re customizing. You select the view that you want to add from the drop-down list.
View Type	The view type that corresponds to the value selected in the View Name box. The system automatically inserts this view type.
Display Name	The display name of the selected view, as defined in the backend code. The system automatically fills in this value.
DAC Name	The name of the corresponding DAC for the selected view. The system automatically fills in this value.
Step 1: View Settings has the following buttons.
Cancel	Closes the wizard without making any changes.
Prev	Goes to the previous step. (The button is unavailable in this step.)
Next	Goes to the next step.
Step 2: Select fields has a table with the following columns.
Included	A check box that you select to add the current field to the extension.
DAC	The name of the DAC that corresponds to the view selected in Step 1.
Field Name	The name of a field that’s defined in the DAC specified in the DAC column.
Display Name	The display name of the field that’s specified in the Field Name column.
Step 2: Select fields has the following buttons.
Cancel	Closes the wizard without making any changes.
Prev	Goes to the previous step.
Finish	Generates a new extension or saves the changes to an existing one, and closes the wizard.

Table 3. Edit TypeScript Extension Dialog BoxThis dialog box opens when you click Edit TypeScript Extension on the page toolbar. In the dialog box, you can edit an existing custom TypeScript extension or create a new one.
Element	Description
The toolbar has the following buttons.
New Extension	A button that creates a new TypeScript extension. You specify the name for the new extension in the Extension Name box and add the TypeScript code in the code editor below it.
Add Code Snippet	A button that expands into a drop-down menu, which provides the following commands for adding boilerplate code to the selected TypeScript extension: Add Field: Adds the boilerplate code for a new field. Clicking this opens a dialog box where you specify the name of the new field and select the check box for any of the following optional properties: Commit Changes Readonly Hidden No Label Multiline Disabled You click Add to add the code for the new field to the extension or Cancel to leave the extension unchanged. Add Data View Extension: Adds the boilerplate code for a data view extension. Clicking this opens a dialog box where you select the name of the base view from which you want to derive the data view extension. You click Add to add the code for the data view extension to the extension or Cancel to leave the extension unchanged. Add View: Adds the boilerplate code for a view. Clicking this opens a dialog box where you select the name of the view that you want to add to the extension. You click Add to add the code for the view to the extension or Cancel to leave the extension unchanged. Add Grid View: Adds the boilerplate code for a grid view. Clicking this opens a dialog box where you select the name of the grid view that you want to add to the extension. You click Add to add the code for the grid view to the extension or Cancel to leave the extension unchanged. Add Custom Event Handler: Adds the boilerplate code for a custom event handler. Clicking this opens a dialog box where you select the type of event that you want to add to the extension. The dialog box may include additional boxes that require a value, depending on the selected event type. You click Add to add the code for the custom event handler to the extension or Cancel to leave the extension unchanged.
The dialog box has the following box and area.
Extension Name	A drop-down list that displays all the existing TypeScript extensions. You select the extension that you want to edit from this list. Note that you cannot edit system-generated extensions.
Code Editor	The area where you review and edit the code for the selected extension.
This dialog box has the following buttons.
Validate	Performs validation checks on the extension code to ensure correctness.
Format and Validate	Fixes the formatting of the extension code that is displayed in the code editor and performs validation checks on the extension code to ensure correctness.
Save Extension	Saves the changes you have made to the extension and closes the dialog box.
Cancel	Closes the dialog box without any changes.

Element Tree

You use the element tree to browse all view classes and fields—relevant to the form being customized—in a convenient tree structure. You also use it to select a view or field and view its original TypeScript properties or add custom ones on the View or Field Customization tab.

HTML Tab

On this tab, you view and edit the HTML code of a form that you want to customize.

You can click Preview HTML Extension on the tab toolbar to view the difference between the original HTML code and the changes that you have made. You can then click Save on the page toolbar to generate an extension file or save the changes to an existing extension file.

To view the original HTML code, you click Reload Original HTML on the tab toolbar.

View or Field Customization Tab

You use the View or Field Customization tab of the Modern UI Editor page to view or customize the TypeScript properties of the view or field selected in the element tree.

You can use the Add Decorators button on the tab toolbar to add new decorators to the selected view or field and customize the corresponding properties of each decorator. Currently, the system only supports adding new decorators to the selected view or field. You cannot view and edit the properties of decorators that are already applied to the selected view or field in the original code.

You can click Delete on the tab toolbar to delete any existing customization related to the selected view or field.

After customizing the properties of the selected view or field, you click Save on the page toolbar to save the changes to a TypeScript extension; or Cancel to discard all changes.

TypeScript Tab

You use the TypeScript tab of the Modern UI Editor page to view the TypeScript code of a form that you want to customize. However, you cannot directly edit the TypeScript code on this tab. Instead, you generate a TypeScript extension by using the Add Field or Add View buttons on the page toolbar.