Modern UI Development: 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
  • Switch a form between the Modern UI and the Classic UI
  • Verify that certain prerequisite installation and configuration tasks have been performed before building the UI from the source code
  • Build the Modern UI from the source code
  • Automatically rebuild the source code for a form when its source files are modified and saved

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.

Enabling of the Modern UI in the MYOB Acumatica ERP Configuration Wizard

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.



Attention:
Make sure you have the Install NodeJS check box selected so that the MYOB Acumatica ERP Configuration Wizard installs the needed version of Node.js for compilation of the customization code of the Modern UI. If you want to use the version of Node.js that has already been installed in your system, you can clear the Install NodeJS check box and add the following key to the appSettings section of the Web.config file of your instance: <add key="NodeJs:NodeJsPath" value="C:\Program Files\NodeJs"/>, where value specifies the path to the location where Node.js has been installed.

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.

Important:
You may select the Enable Modern UI check box only when you are deploying an instance for testing purposes. This check box must not be selected for instances that are to be deployed for production use.

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 generally does not require any modifications. The Modern UI and the Classic UI share the same graph.
  • 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 (Item 2)
  • 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
  • The ability to hide and reorder the tabs on the tab bar of a form (Item 3)
  • A unified form and table toolbar (Item 4)
  • A toggle button to expand and collapse the enhanced filtering area on the table (Item 5)

  • 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 6)

  • 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
  • Quicker page loading because of page rendering on the client side
Tip:
If a user does any configuration of the form, such as hiding or reordering of UI elements, this configuration is saved in the database in JSON format.

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

Figure 1. Primary 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.

Figure 2. Advanced filter window


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.

Figure 3. Enhanced window for attaching files