Customization Project with UI Changes: To Include Source Files in a Customization Project

This activity will walk you through the process of including source files in a customization project.

Story

Suppose that for the Smart Fix company, you have defined the Modern UI for multiple MYOB Acumatica forms and added elements to the Modern UI of particular forms. You need to include all these changes in a customization project to be able to distribute the changes to the MYOB Acumatica instances that are used by employees of the Smart Fix company.

Process Overview

You will rebuild all your changes, include them in a customization project, and publish the project.

System Preparation

Before you begin including Modern UI source files in a customization project, do the following:

1. Perform the following prerequisite activities:
   1. Modern UI Development: To Deploy an Instance with Custom Forms and the Modern UI
   2. Modern UI Development: To Build the Source Code of All MYOB Acumatica Forms for Modern UI Development
2. Complete at least one of the following activities:
   • UI Definition in HTML and TypeScript: To Create the UI of a Form
   • UI Definition in HTML and TypeScript: To Convert an MYOB Acumatica Form to the Modern UI with the Converter
   • Data Entry Form: To Create the UI of a Data Entry Form
   • Processing Form: To Create the UI of a Processing Form
   • Setup Form: To Create the UI of a Setup Form
3. Perform at least one of the following activities:
   • UI Customization Development: To Add Elements to an MYOB Acumatica Form
   • UI Customization Development: To Add a Tab to an MYOB Acumatica Form

Step 1: Building the Source Files

Build the source code of the Modern UI for the current tenant, including the customization code, by executing the following command in the FrontendSources folder.

npm run build-dev

Step 2: Including Files in the Customization Project

To redistribute the Modern UI customization files, you need to include them in the customization project with the backend customization code as follows:

1. On the Customization Projects (SM204505) form, click the PhoneRepairShop project name to open this customization project.
2. On the navigation pane of the Customization Project Editor, which opens, click Modern UI Files. The Custom Files page opens.
3. On the page toolbar, click Add New Record.
4. In the Add Files dialog box, select the unlabeled check box in the rows with the following files:
   • screens\RS\RS101000\RS101000.html
   • screens\RS\RS101000\RS101000.ts
   • screens\RS\RS201000\RS201000.html
   • screens\RS\RS201000\RS201000.ts
   • screens\RS\RS202000\RS202000.html
   • screens\RS\RS202000\RS202000.ts
   • screens\RS\RS301000\RS301000.html
   • screens\RS\RS301000\RS301000.ts
   • screens\RS\RS501000\RS501000.html
   • screens\RS\RS501000\RS501000.ts
   • screens\IN\IN202500\extensions\IN202500_PhoneRepairShop.html
   • screens\IN\IN202500\extensions\IN202500_PhoneRepairShop.ts
   Tip: You may not have particular files if you have not performed the prerequisite activities in which these files and folders are created. Select the check boxes for all files from the list above that appear in the dialog box, and disregard the other listed files.
5. Click Save.
6. Publish the customization project.