Modern UI: How to Build the Source Code for the Modern UI Development

When you want to start migrating MYOB Acumatica forms to the Modern UI or you want create a new form based on it, you need to build the source code of each form to see its Modern UI version. After that, if you make any changes to the UI of the forms by using its source code, you need to rebuild its source code to see the results of your changes. You build the source code in the FrontendSources\screen folder of your instance. You also need to make sure that you perform some prerequisite actions before you start building the source code.

Performing the Prerequisite Actions

Before you begin building the source code for the first time, do the following:

Verify that you have the Node Version Manager (NVM) installed on your computer. To verify this, use Windows PowerShell or a similar program to run the nvm -v command. If a version number is displayed, it means that NVM is already installed on your computer. You also need to have NodeJS and the Node Package Manager (NPM) installed. For more information, see Install NodeJS on Windows.
In the appSettings section of the Web.config file of your MYOB Acumatica instance, add the following key (if it has not already been added).
```
<add key="EnableSiteMapSwitchUI" value="True" />
```
Use Windows PowerShell or a similar program to run the following command in the FrontendSources\screen folder to download the required node packages.
```
npm install
```
This command installs the required dependencies needed to build the sources correctly.

Building the Source Code for All MYOB Acumatica Forms

To build the sources in the FrontendSources\screen folder of your instance, you need to run a command in the same folder. This command generates the form schema and JavaScript code from the TypeScript code and creates the mapping between the JavaScript and TypeScript code. You use this mapping to debug the client code in a web browser.

To build the sources, run the following command in the FrontendSources\screen folder.

npm run build-dev

Note that if you use the build command instead of the build-dev command, the mapping between the JavaScript and TypeScript code is not generated, and you cannot use the debugging tools in the web browser.

Building the Source Code for Particular MYOB Acumatica Forms

To speed up the build process, you can initiate the build for only specific forms instead of all of them. To do this, you can run one of the following modified versions of the command instead of the one in the preceding section:

```
npm run build-dev -- --env screenIds=SO301000,FS305100
```
The command above builds the sources for only the Sales Orders (SO301000) and Service Contract Schedules (FS305100) forms.
```
npm run build-dev -- --env modules=AR,AP,GL
```
The command above builds the sources for only the forms in the specified functional area (AR, AP, and GL in this example).

Automatically Rebuilding the Source Code for All MYOB Acumatica Forms

During the migration of the needed forms to the Modern UI, you make changes to the generated source files in the FrontendSources\screen folder of your instance. To see the changes that you make to a form, you will need to rebuild the corresponding source files every time a change is made. To save time, you can run a command that causes the source files to be rebuilt automatically each time a file is modified and saved in this folder.

To rebuild the source files automatically, use Windows PowerShell or a similar program to run the following command in the FrontendSources\screen folder. You need to run this command only once.

npm run watch

Tip:

To run this command from the root folder of your instance, navigate to the root folder in Windows PowerShell, and run the following command.

npm run watch --prefix .\FrontendSources\screen\

In some cases, when you have made changes to the sources of the forms that have been migrated to the Modern UI and rebuilt the sources, you still may not see these changes reflected in the web browser when you open one of these forms. For tips on viewing these changes, see Modern UI: How to Troubleshoot Unreflected Changes in the Modern UI.

Automatically Rebuilding the Source Code for Particular MYOB Acumatica Forms

To automatically rebuild the sources for only specific forms, you can run one of the following modified versions of the command instead of the one in the preceding section:

```
npm run watch -- --env screenIds=SO301000,FS305100
```
The command above automatically rebuilds the sources for only the Sales Orders (SO301000) and Service Contract Schedules (FS305100) forms when their corresponding source files are modified and saved.
```
npm run watch -- --env modules=AR,AP,GL
```
The command above automatically rebuilds the sources for only the forms in the specified functional area (AR, AP, and GL in this example).