T290: ModernUI

Version: 2025R1
Category: Technical

How to Use This Course

The T290 Modern UI for Developers training course shows you how to define the Modern UI of Acumatica ERP. The course is intended for application developers who are starting to learn how to customize the Modern UI of Acumatica ERP. The course is based on a set of examples that demonstrate the general approach to customizing the Modern UI. The course is designed to give you ideas about how to develop the Modern UI for your own embedded applications. It demonstrates the implementation of the Modern UI for new Acumatica ERP forms and for the customization of existing Acumatica ERP form. As you go through the course, you will continue the development of the customization for the cell phone repair shop, which was performed in the training courses of the T series (which we recommend that you take before completing the current course). Aer you complete all the lessons of the course, you will be familiar with the programming techniques used to define and customize the Modern UI of Acumatica ERP.

         We recommend that you complete the examples in the order in which they are provided in the course,
         because some examples use the results of previous ones.

What the Course Prerequisites Are

To complete this course, you should be familiar with the basic concepts of Acumatica Framework. Also, we recommend that you complete the T200 Maintenance Forms, T210 Customized Forms and Master-Detail Relationship, T220 Data Entry and Setup Forms, T230 Actions, T240 Processing Forms, T250 Inquiry Forms, and T270 Workflow API training courses before you begin this course. To complete the course successfully, you should have the following required knowledge:

Familiarity with the basics of Node.js
Understanding of the Model-View-ViewModel (MVVM) pattern
Basic knowledge of JavaScript
Understanding of TypeScript concepts, such as interface, type, classes, enum, generic, and union
Knowledge of HTML fundamentals
Knowledge of the debugging in browser

What Is in a Lesson

Each lesson is dedicated to a particular development scenario that you can implement by using Acumatica ERP customization tools and Acumatica Framework. Each lesson consists of a brief description of the scenario and an example of the implementation of this scenario.

Where the Source Code Is

You can find the source code of the customization described in this course and code snippets for the course in the ModernUI\T290 folder of the Help-and-Training-Examples repository in Acumatica GitHub.

What the Documentation Resources Are

The complete Acumatica ERP and Acumatica Framework documentation is available at https://help.acumatica.com/ and is included in the Acumatica ERP instance. While viewing any form used in the course, you can click the Open Help button in the top pane of the Acumatica ERP screen to bring up a form-specific Help menu; you can use the How to Use This Course | 7

links on this menu to quickly access form-related information and activities and to open a reference topic with detailed descriptions of the form elements.

Which License You Should Use

For the educational purposes of this course, you use Acumatica ERP under the trial license, which does not require activation and provides all available features. For the production use of the Acumatica ERP functionality, an administrator has to activate the license the organization has purchased. Each particular feature may be subject to additional licensing; please consult the Acumatica ERP licensing policy for details. Company Story and Customization Description | 8

Company Story and Customization Description

In this course, you will continue the development to support the cell phone repair shop of the Smart Fix company; you began this development while completing the previous training courses of the T series.

         You will load and publish the customization project with the results of these courses in To Deploy an
         Instance for the Training Course.

In the previous training courses of the T series, you have created the following forms:

The Repair Services (RS201000) custom maintenance form, which the Smart Fix company uses to manage the lists of repair services that the company provides
The Serviced Devices (RS202000) custom maintenance form, which the Smart Fix company uses to manage the lists of devices that can be serviced
The Services and Prices (RS203000) custom maintenance form, which provides users with the ability to define and maintain the price for each provided repair service
The Repair Work Orders (RS301000) custom data entry form, which is used to create and manage work orders for repairs
The Repair Work Order Preferences (RS101000) custom setup form, which an administrative user uses to specify the company's preferences for the repair work orders
The Assign Work Orders (RS501000) custom processing form, which users will use to assign multiple repair work orders at the same time In the previous training courses of the T series, you have also customized the Stock Items (IN202500) form to mark particular stock items as repair items—that is, items that are used for the repair services. In this training course, you will develop the Modern UI for these forms. Initial Configuration | 9

Initial Configuration

You need to perform the prerequisite actions before you start to complete the course.

To Deploy an Instance for the Training Course

The following activity will walk you through the process of preparing and deploying an Acumatica ERP instance that you can use to perform the steps in the lessons of this training course.

Story

To perform customization tasks and complete the activities described in the lessons of this training course, you need to deploy an instance of Acumatica ERP with the PhoneRepairShop customization project published and the Modern UI turned on.

Process Overview

In this activity, you will prepare the environment and install tools that will help you to perform customization tasks. You will then deploy an instance of Acumatica ERP with the PhoneRepairShop customization project published and the dataset from the T240 Processing Forms course.

Step 1: Preparing the Environment

          If you have completed any of the training courses of the T series and are using the same environment
          for the current course, you can skip this step.

Before you begin deploying the needed Acumatica ERP instance, do the following:

Make sure that the environment that you are going to use conforms to the System Requirements for the Acumatica ERP Installation.
Make sure that the Web Server (IIS) features that are listed in Configuration of IIS Web Server Features are turned on.
Install Microso Visual Studio Code.
Clone or download the customization project and the source code of the extension library from the Help- and-Training-Examples repository in Acumatica GitHub to a folder on your computer.
Install Acumatica ERP. On the Main Soware Configuration page of the Acumatica ERP Setup wizard, select the Install Acumatica ERP check box.

Step 2: Deploying the Instance To perform customization tasks, you need to deploy an instance of Acumatica ERP for the T290 Modern UI for Developers training course on the instance. You deploy an Acumatica ERP instance and configure it as follows:

Open the Acumatica ERP Configuration wizard, and do the following: a. Click Deploy a New Acumatica ERP Instance for T-Series Developer Courses. b. On the Instance Configuration page, do the following: a. In the Training Course box, select T290 Modern UI for Developers. Initial Configuration | 10
b. In the Local Path to the Instance box, select a folder that is outside of the C:\Program Files (x86), C:\Program Files, and C:\Users folders. (We recommend that you store the website folder outside of these folders to avoid an issue with permission to work in these folders when you customize the website.) c. On the Database Configuration page, make sure the name of the database is SmartFix_T290. d. On the Website Configuration page, make sure the Install NodeJS and Enable Modern UI check boxes are selected. The system creates a new Acumatica ERP instance, adds a new tenant, loads the data to it, and publishes the customization project that is needed for activities of this training course. The system also installs Node.js and adds the NodeJs:NodeJsPath and EnableSiteMapSwitchUI keys in the appSettings section of the Web.config file of the instance.
Make sure that a Visual Studio solution is available in the App_Data\Projects\PhoneRepairShop folder of the Acumatica ERP instance folder.
This is the solution of the extension library that you will modify in the activities of this training course.
Sign in to the new tenant by using the following credentials:

Username: admin
Password: setup Change the password when the system prompts you to do so.

In the top right corner of the Acumatica ERP screen, click the username, and then click My Profile. The User Profile (SM203010) form opens. On the General Info tab, select YOGIFON in the Default Branch box; then click Save on the form toolbar. In subsequent sign-ins to this account, you will be signed in to this branch.
Optional: Add the Customization Projects (SM204505) and Generic Inquiry (SM208000) forms to your favorites. For details about how to add a form to your favorites, see Favorites: General Information.
If for some reason you cannot complete instructions in this step, you can create an Acumatica ERP instance and manually publish the needed customization project, as described in Appendix: Initial Configuration. Part 1: Getting Started with the Modern UI | 11