UI Customization Development: General Information

When you customize the UI of MYOB Acumatica in TypeScript and HTML, you may add new MYOB Acumatica forms or customize existing ones. For details on implementing a new form, see UI Definition in HTML and TypeScript: General Information. For a form whose UI you need to customize, you add TypeScript and HTML files for customization extensions of the form. Each file name starts with the screen ID and ends with a postfix that indicates the purpose of the extension, as you can see in the S0301000_Customization1.ts file name.

Learning Objectives

In this chapter, you will learn how to add new elements, such as boxes and tabs, to the UI of an MYOB Acumatica form in TypeScript and HTML.

Applicable Scenarios

You may need to customize the UI of MYOB Acumatica in TypeScript and HTML if any of the following scenarios apply:

• Your customization project is introducing capabilities that are not provided by MYOB Acumatica.
• You are developing integration with an external system.
• Your customization project needs to support custom workflows that integrate multiple systems.

Extension in TypeScript

To define an extension of an existing MYOB Acumatica form in TypeScript, you use TypeScript mixins. For details about mixins, see https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern.

In the TypeScript file of an extension, you define an interface that extends the screen class and a class with the same name the interface has.

Instead of extending the screen class, the interface can extend other extension classes or multiple classes (such as the screen class and an extension class). The order of the applied extensions is defined similarly to the way it is defined for graph extensions in C# code. For details about the order, see The Order in Which Extensions Are Loaded.

In the extension class, you do any of the following:

• Initialize new data views in the same way as you do in the screen class. For details about the screen class and view classes, see Screen Class in TypeScript and View Classes in TypeScript.

• Optional: In the parameter of the featureInstalled decorator, specify the feature for which the extension should be available.

• Optional: Define new actions in the same way as you do in the screen class. For details about action definitions, see Action Definitions in TypeScript and Button: Configuration.
• Optional: Adjust the TypeScript code of the original form.

An example is shown in the following code.

import { featureInstalled } from "client-controls";
import { GL401000 } from "src/screens/GL/GL401000/GL401000";

export interface GL401000_MultiCurrency extends GL401000 { }
@featureInstalled("PX.Objects.CS.FeaturesSet+Multicurrency")
export class GL401000_MultiCurrency {
}

For each data view that you need to modify, you add an interface and a class for the extension data view, as shown in the following example.

import { featureInstalled } from "client-controls";
import { GLHistoryEnqFilter } from "src/screens/GL/GL401000/GL401000";

export interface GLHistoryEnqFilter_MultiCurrency 
  extends GLHistoryEnqFilter { }
@featureInstalled("PX.Objects.CS.FeaturesSet+Multicurrency")
export class GLHistoryEnqFilter_MultiCurrency {
    ShowCuryDetail: PXFieldState<PXFieldOptions.CommitChanges>;
}

For more examples of adjustments of TypeScript code, see UI Adjustments in HTML and TypeScript: TypeScript Examples.

Extension in HTML

In the HTML file of an extension, you can modify the layout of the screen, if necessary. The following code shows an example of a modification.

<template>
    <field after="#columnSecond [name='SubCD']" name="ShowCuryDetail"></field>
</template>

In this example, the after attribute of the field tag shows that the ShowCuryDetail field should be placed after the tag with the SubCD name in the container with the columnSecond ID.

For more examples of layout adjustments, see UI Adjustments in HTML and TypeScript: HTML Examples.