Loading ...

How to Convert a Custom Screen from Classic UI to Modern UI in Acumatica

Disclaimer: This is article of step representation with step by step instructions given in instructions in Acumatica video https://www.youtube.com/watch?v=-CS5UV2vAjU

1. Enable Modern UI

Under the <AppSettings> tag of the web.config file, add the following:

<add key="EnableSiteMapSwitchUI" value="true" />


This should be done with root access (for example, on a local machine).

2. Import the Customization Package

In the Customization Projects screen (ACPR5010), click "Import" and select the desired package.

3. Publish the Package

Publish this package to be able to access the required screen.

4. Access the Screen

Go to the required screen in Acumatica.

5. Convert to Modern UI

Click "Customization" and select "Convert to Modern UI".



The zip file containing the screen definition will start downloading automatically.

6. Navigate to FrontendSources Directory

Go to the server root path:
FrontendSources/screen/src/screens/XX/XXYYZZBB

Note: XX and the XX in the second part should be the same and should match the screen code. For example, for screen SM200520, the path should be:
screens/SM/SM200520

7. Add Extracted Files

Insert all three files extracted from the downloaded zip archive into this directory.

8. Open Package Preferences

Go back to the Customization Package Preferences.

9. Open Modern UI Files

In the left menu, select "Modern UI Files".


Click the "+" button to add files to the package.
Select the files saved in the previous directory.

10. Save and Publish

Click "Save" and then "Publish". This will compile the new files, so the process may take longer than usual.

11. Done

Your screen is now successfully converted to Modern UI. You can freely export this package and it will contain both versions of screen: Modern UI and Classic UI. Don’t forget to select desired version on the Site Map screen (SM200520)