Modern UI Editor: General Information

The Customization Project Editor gives you the ability to customize the Modern UI forms that you have added to your customization project via the Modern UI Editor page. 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 do the following:

  • View the HTML and TypeScript code of a form.
  • Browse all view classes and fields in a convenient tree structure.
  • Create a TypeScript extension for new fields with a few clicks.
  • Create an HTML extension that implements the differences between the original and customized HTML code.

Applicable Scenarios

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

  • You want to customize the layout of a new or existing form and automatically generate the necessary extension file.
  • You have added a new field to a form in the backend code and you now need to configure it so that it is accessible in the Modern UI of the form.

Overview of the Modern UI Editor

The Modern UI Editor fits seamlessly into your customization process, as shown in the example below of customizing the Stock Items (IN202500) form. To open the editor, click Modern UI Editor (Item 1) in the navigation pane under the Screens node.

Figure 1. The Modern UI Editor


Here’s what you can do for any form that’s been migrated to the Modern UI:

  • View code directly: See HTML and TypeScript files (Items 2 and 8 above).
  • Navigate easily: Browse all view classes and fields relevant to the form in a convenient tree structure (Item 4) or use the Customized filter (Item 10) to only view the fields that you have customized.
  • Create a system-generated TypeScript extension: Create a system-generated TypeScript extension (Items 5 and 9) for new views and fields. These extensions have the _generated suffix in their filenames.
  • Create and edit a custom TypeScript extension: Use the Edit TypeScript Extension (Item 7) feature to create or edit a custom TypeScript extension with a few clicks. You can also view the code of any system-generated TypeScript extensions by using this feature. However, you cannot edit these extensions.
  • Customize a view or a field: For a selected view or field in the tree structure (Item 4), view its original TypeScript properties or add new ones on the View or Field Customization tab (Item 3).
  • Generate an HTML extension: Create an HTML extension that implements the differences between the original and customized HTML code, and preview these changes by using the Preview HTML Extension button on the tab toolbar (Item 6).
  • Quickly save or cancel changes: Use the Save and Cancel buttons on the page toolbar (Item 11) to quickly save or discard changes that you have made to an HTML or TypeScript extension on the HTML or View or Field Customization tabs.

The generated TypeScript and HTML extensions are automatically added to your customization project.