Screen Editor for the Modern UI: General Information

The Customization Project Editor gives you the ability to customize the Modern UI forms that you have added to your customization project. These include custom forms that you have developed for the Modern UI from scratch, as well as existing MYOB Acumatica forms that you have switched to the Modern UI in your instance.

Learning Objectives

In this chapter, you will learn how to customize the layout of a form by using the HTML editor that is available in the Customization Project Editor.

Applicable Scenarios

You customize a form in the Modern UI by using the Customization Project Editor in the following cases:

  • You want to customize the layout of an existing form that you have switched to the Modern UI in your instance and automatically generate the necessary extension file.
  • You want to customize the layout of a new form that you have developed for the Modern UI and automatically generate the necessary extension file.

Access to the HTML Editor

The HTML editor is available on the navigation pane of the Customization Project Editor for each form that you have added to your customization project. To access the editor, on the navigation pane, expand the Screens node. In the list of forms displayed under the expanded Screens node, expand the node that corresponds to the form for which you want to edit the HTML code, and click the Modern UI Editor node. The Modern UI Editor (AU201080) page opens with the HTML editor and displays the current HTML code for the form, as shown in the following screenshot.

Figure 1. The form's HTML code


Use of the HTML Editor

You use the editor to make the necessary modifications to the layout of the form and generate an extension file. Once you have made the necessary changes, click the Compare HTML button. The system displays a dialog box that shows the code changes that you have made. In the Extension Suffix box of the dialog box, you specify the suffix for the extension file name, and click OK. The following screenshot shows an example.

Figure 2. The Compare HTML dialog box


The system generates the extension file (in the specified subfolder in the FrontendSources\screen\src\customizationScreens\<Tenant Name>\screens\<FirstTwoLettersOfFormID>\<FormID>\extensions file path). It also adds this file to the Custom Files (Modern UI) page under the Modern UI Files node, as shown in the following screenshot.

Figure 3. The Custom Files page and Modern UI Files node


Important: Currently you cannot generate the corresponding TypeScript extension file along with the generated HTML extension file by using the Modern UI Editor (AU201080) page. This functionality will be available in a future release. As a workaround, you can manually create the TypeScript extension file with the needed code in the same folder where the HTML extension file was generated by the system.

You then publish the customization project and validate your changes by opening the corresponding form in your instance.