UI Definition in HTML and TypeScript: Form Converter

You can use MYOB's form converter, which transforms an MYOB Acumatica form from the Classic UI to the Modern UI. The converter parses an ASPX page of the form and generates the source files of the form in the Modern UI. These source files include a TypeScript definition and initialization of views and an HTML layout of the form.

Important: The use of the form converter doesn't guarantee a perfect conversion of a form to the Modern UI. The converter provides a baseline conversion that you should further fine-tune based on your specific requirements. We strongly recommend that you:
  • Make necessary backups and use the converter only in your development environment.
  • Always review the files generated by the converter and make any required corrections.
  • Publish the converted form to your production environment only after fully testing its functionality in your development environment.

Running the Converter

To use the converter, you need to first make sure that the Modern UI is enabled for your instance. For details on this, see Modern UI Development: General Information. You also need to check whether the following key exists in the appSettings section of the Web.config file of your MYOB Acumatica instance: <add key="EnableSiteMapSwitchUI" value="False" />. If this key exists, remove it and save your changes to the file.

To run the converter, you open the needed MYOB Acumatica form in the Classic UI and click Customization > Convert to Modern UI on the form title bar.

Tip: The Convert to Modern UI command appears on the form only if the Customizer role is assigned to your user account.

After you execute this command, the following files are generated:

  • views.ts, which contains declarations of all views that are used in the form
  • [SCREENID].ts, which contains the initialization of views for the form
  • [SCREENID].html, which contains the HTML layout of the form

By default, the files are saved in a ZIP archive, which you can download.

Attention:
  • Before conversion, you need to turn on all MYOB Acumatica features related to the form. This will give you the converted version that’s the most similar to the original.
  • The converter ignores any JavaScript code in ASPX files or the code in the ASPX.CS files.

Configuring the Converter

You can modify the behavior of the converter by adjusting the px.core\ui\screenConverter tag of the web.config file of the instance, as shown in the following example.
<ui>
    <screenConverter declareViewsInViewModelFile="false" />
    </ui>

You can use any of the following properties of the screenConverter tag:

  • declareViewsInViewModelFile: If you set this property to True, the converter will declare the views in the <ScreenID>.ts file instead of creating a separate views.ts file.

  • shouldFilesBeDownloaded: If you set this property to False, the files are saved in the folder that’s defined by the screenConverterOutputFolder property. By default, the shouldFilesBeDownloaded property is True and the files are saved in a ZIP archive.

  • screenConverterOutputFolder: You can use this property to specify the output folder for the generated files. Use this property only if the shouldFilesBeDownloaded property is False. By default, the output folder is FrontendSources\screen\src\development\screens\[FirstTwoLettersOfSCREENID]\[SCREENID].

  • usingOfPXJoinSyntaxEnabled: If you set this property to True, the system uses the approach for joined fields, which involves the use of periods. For details on the approaches to define joined fields, see UI Definition in HTML and TypeScript: Joined Fields. By default, this property is True.
  • isAutoFormatEnabled: If you set this property to True, the system uses the Prettier tool to automatically format the HTML and TypeScript code generated by the converter.