Modern UI: General Information

The Modern UI is a .NET-compatible product that provides updated UI capabilities without ASPX pages. On the server side, the Modern UI is represented by web services. On the client side, it is represented by a template-based single-page application (SPA) framework based on Aurelia. For more details on Aurelia, see Aurelia.

The application code is written in TypeScript. The framework transcribes the TypeScript code into JavaScript code, which is then executed on the web browser. This approach simplifies code support. Developers use HTML and CSS to design the layout of a form.

Learning Objectives

In this chapter, you will learn how to do the following:

• Enable the Modern UI while deploying an instance
• Use the source code to build the UI of MYOB Acumatica forms based on the Modern UI
• Verify that certain prerequisite installation and configuration tasks have been performed before building the UI from the source code
• Build the UI based on the Modern UI from the source code for only specific forms
• Automatically rebuild the source code for a form when its source files are modified and saved
• Switch a form between the Modern UI and the Classic UI
• View a form in both the Modern UI and the Classic UI concurrently (in multiple tabs)

Applicable Scenarios

You will work with the Modern UI in the following cases:

• You need to enable the Modern UI for your instance.
• You need to convert any number of forms of your MYOB Acumatica instance to the Modern UI.
• You need to create a new form that is based on the Modern UI.
• You need to be able to switch between the Modern UI and the Classic UI of a form.

Configuration of the MYOB Acumatica ERP Configuration Wizard to Enable the Modern UI

While deploying an instance by using the MYOB Acumatica ERP Configuration Wizard, you can enable the switching to the Modern UI. To do this, you select the Enable Modern UI check box on the Website Configuration page of the wizard, as shown in the following screenshot.

When you select the Enable Modern UI check box, the system adds the <add key="EnableSiteMapSwitchUI" value="True" /> key to the Web.config file of your instance. If you want to disable the switching to the Modern UI for your instance, you can remove this key or change its value to False. However, if some forms were already switched to the Modern UI before you removed this key or changed its value, these forms will still stay in the Modern UI.

Architecture of the Modern UI

The architecture of the Modern UI is based on the Model-View-ViewModel (MVVM) pattern, where a view is represented by a HTML template, a view model is represented by the code written in TypeScript, and a model is represented by a graph on the server that exchanges data from the client side. The following diagram shows the architecture of the Modern UI and the interaction between its components.

Currently, the Modern UI is embedded in the infrastructure of the Classic UI. The Modern UI is represented by a new frame that enables TypeScript controls in the Classic UI infrastructure. Also, the Modern UI includes web API controllers that are added to the controllers of the Classic UI. Some parts of the Modern UI have been connected to the Classic UI architecture via an Aurelia adapter, which adapts TypeScript's controllers to work in the Classic UI architecture. The forms that are fully converted to the Modern UI (highlighted in yellow in the preceding diagram) work directly with web API controllers.

JSON serves as the protocol between the client side and the server side. As a result, all requests can be seen in a unified format and used for debugging.

Features of the Modern UI

The Modern UI provides a variety of new features for both developers and users. For developers, the Modern UI provides the following features in comparison to the Classic UI:

• The template (HTML and CSS) and presentation logic layers (TypeScript) are fully customizable.
• The client-side model can be programmed by using the event-driven model, which is similar to the server-side model.
• The graph code does not need to be modified. The Modern UI and the Classic UI share the same graph.
• The forms can be migrated to the Modern UI either individually, or as a batch. The developers can always switch between the Modern UI and the Classic UI.

For users, the Modern UI provides the following features:

• An overhauled user interface with updated styles, typography, and colors
• A new Settings menu that unifies the Tools and Customization menus, which were found on the form title bar of every MYOB Acumatica form (see Item 1 in the following screenshot)
• The ability to collapse and expand the containers that display the boxes that are shown on a form (Items 2 and 7)
• The ability to configure the boxes that are displayed on a form and their properties, as well as the order in which they are displayed (Items 3 and 8)
• The ability to hide and reorder the tabs on the tab bar of a form (Item 4)
• A unified form and table toolbar (Item 5)
• A toggle button to expand and collapse the enhanced filtering area on the table (Item 6)

• In elements with magnifier buttons, a link (which replaces the Edit button) that the user can click to open the corresponding form and view the selected record (Item 9)

• An adaptive screen layout that makes it possible for a form to be adapted to a device with a smaller screen, such as a tablet or a phone

The following screenshot highlights the major features of the Modern UI.

You can click the filtering toggle button (see Item 1 in the following screenshot) to expand and collapse the enhanced filtering area (Item 2), which provides quick and more intuitive access to quick and advanced filters. You can open the Advanced filter window (Item 4) by clicking the More button (Item 3) and selecting Open Advanced Filter.

The Modern UI also features an enhanced window for attaching files to a form, as shown in the following screenshot. This window opens when you click Files on the form title bar.