Customization: Updating Customization Projects for the Modern UI

In previous releases of MYOB Acumatica, you could convert a form to the Modern UI by using the Form Converter. However, this converter had the following limitations:

• It only converted custom forms. It couldn't convert customized versions of original MYOB forms.
• You could only convert a single form at a time.
• The Modern UI files generated from the conversion had to be manually included in your customization project.

MYOB Acumatica 2026.1.1 introduces the Customization Project Converter. You can use it for single-click conversion of a customization project that contains custom forms or customized versions of original MYOB Acumatica forms to the Modern UI. Alternatively, you can use the converter to individually convert specific forms within the project instead of converting all the forms in the customization project at once.

Regardless of the approach you choose, the converter does the following for each customized form:

• Generates the Modern UI version of the original form and the Modern UI version of the customized form—and then compares them to find the differences
• Creates extension files for the original form in the Modern UI that include the difference, such as added fields or modified table properties
• Adds the extension files to the Modern UI Files page of the Customization Project Editor

For each custom form, the converter does the following:

• Generates the Modern UI version of the custom form by converting its ASPX code to TypeScript and HTML
• Adds the generated TypeScript and HTML source files to the Modern UI Files page of the Customization Project Editor

Prerequisites for Using the Customization Project Converter

Before you use the converter, make sure the following requirements are met:

• The Modern UI has been enabled and set as the default UI in your instance. For details, see Modern UI Development: General Information.
• The customization project you want to convert has already been published.
• The Customizer role has been assigned to your user account.
  Important: You must have this role to run the converter on a customization project or on a specific form within the project.
• All MYOB Acumatica features related to the form have been enabled before the conversion. This gives you the converted version that’s the most similar to the original version.
  Important: The converter ignores any JavaScript code in ASPX files or the code in the ASPX.CS files.

Running the Customization Project Converter on a Customization Project

To run the converter on an entire customization project:

1. Open the Customization Projects (SM204505) form and select the unlabeled check box in the row for the customization project you want to convert to the Modern UI.
2. On the form toolbar, click Convert to Modern UI.

   The system displays a notification indicating that the conversion has started and updates it when the conversion has completed.

   As part of the conversion, the converter generates the following extension files for each customized form that it converted to the Modern UI:

   • [SCREENID]_[CUSTOMIZATION_PROJECT_NAME]_converted.ts, which contains the differences in TypeScript code between the original and customized versions of the form
   • [SCREENID]_[CUSTOMIZATION_PROJECT_NAME]_converted.html, which contains the differences in HTML code between the original and customized versions of the form

   When you publish the customization project, these files are saved in the FrontendSources\screen\src\customizationScreens\[TENANT_NAME]\screens\[FIRST_TWO_LETTERS_OF_SCREENID\[SCREENID]\extensions folder of your instance.

   The converter generates the following source files for each custom form that it converted to the Modern UI:

   • [SCREENID].ts, which contains the initialization of views for the form
   • [SCREENID].html, which contains the HTML layout of the form

   When you publish the customization project, these files are saved in the FrontendSources\screen\src\customizationScreens\[TENANT_NAME]\screens\[FIRST_TWO_LETTERS_OF_SCREENID\[SCREENID] folder of your instance.

3. Open the converted customization project in the Customization Project Editor and click Modern UI Files in the navigation pane. The Modern UI Files page opens. Here you’ll find a list of the TypeScript and HTML files for all the forms that were converted to the Modern UI.
4. Review the generated TypeScript and HTML files and make any needed corrections. For example, for a custom form that was converted, you may need to correct the IDs of some tags in the HTML code so that they follow established naming conventions. For details, see UI Component Guide.

   You can make changes to the generated files on the Modern UI Files page or export the files to the development folder (by clicking Export to Development Folder on the page toolbar) and edit them in an external editor. For details about using the development folder, see Modern UI Development: Creating Modern UI Source Files for Custom and Customized Forms.

5. If you used the development folder to modify the generated files, you need to update these files in the customization project. You do this by clicking Detect Modified Files on the Modern UI Files page.
6. Publish the customization project and open the forms in your instance to verify that they were converted correctly.

Running the Customization Project Converter on a Specific Customized Form

To run the customization converter on a specific customized form within a customization project:

1. On the Customization Projects (SM204505) form, open the customization project in the Customization Project Editor.
2. On the Screens page, click the row for the form that you want to convert to the Modern UI and click Convert to Modern UI on the page toolbar.

   The system displays a notification indicating that the conversion has started.

   When the conversion has completed, the system goes to the Modern UI Files page, which displays the extension files that were generated for the converted form:

   • [SCREENID]_[CUSTOMIZATION_PROJECT_NAME]_converted.ts, which contains the difference in the TypeScript code of the original and customized versions of the form
   • [SCREENID]_[CUSTOMIZATION_PROJECT_NAME]_converted.html, which contains the difference in the HTML code of the original and customized versions of the form

   For example, if the customized form that you converted was the Stock Items (IN202500) form and the name of your customization project was PhoneRepairShop, the extension files generated from the conversion operation would be named as follows:

   • IN202500_PhoneRepairShop_converted.ts
   • IN202500_PhoneRepairShop_converted.html

   After you published the customization project, the converter would save these files in the FrontendSources\screen\src\customizationScreens\[TENANT_NAME]\screens\IN\IN202500\extensions folder of your instance.

3. Review the generated TypeScript and HTML extension files and make any needed corrections. For example, suppose that your customization of the form adds a UI element to an existing section of a form. In the HTML code, you may need to correct the ID of a qp-fieldset tag so that it matches the ID specified for this tag in the form's original HTML code.

   You can make changes to the generated files on the Modern UI Files page. Alternatively, you can export the files to the development folder by clicking Export to Development Folder on the page toolbar; you then edit the files in an external editor. For details about using the development folder, see Modern UI Development: Creating Modern UI Source Files for Custom and Customized Forms.

4. Optional: If you’ve edited the generated files in the development folder, update these files in the customization project. To do this, click Detect Modified Files on the Modern UI Files page.
5. Publish the customization project and open the form in your instance to verify that it was converted correctly.

Learn More

For more information about updating customization projects for the Modern UI, see the topics in the Updating Customization Projects for the Modern UI chapter.