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 contains the customized code.

Tip: You open the Modern UI Editor page by 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 any number of custom fields that have been added in the backend code.
Add View	Launches the Add View wizard. This wizard 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 fields belonging to the selected view that you want to add to the extension.
Edit TypeScript Extension	Opens the Edit TypeScript Extension dialog box. This dialog box is used to create new TypeScript extensions or edit existing ones.

Table 1. Edit TypeScript Extension Dialog BoxThis dialog box opens when you click the Edit TypeScript Extension button on the page toolbar. In the dialog box, you can edit an existing TypeScript extension or create a new one.
The dialog box contains the following elements.
Element	Description
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 options for adding boilerplate code to the selected TypeScript extension: Add Field: Adds the boilerplate code for a new field. When clicked, 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. When clicked, 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. When clicked, 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. When clicked, 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.
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.
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

You use the HTML tab of the Modern UI Editor page to 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 a view or field that is 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. It is not possible to view and edit the properties of decorators that are already applied to the selected view or field in the original code. 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. You click Delete on the tab toolbar to delete any existing customization related to the selected view or field.

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.