UI Definition in HTML and TypeScript: TypeScript Decorators

In this topic, you can find a reference list of the TypeScript decorators available for MYOB Acumatica forms.

columnConfig

export class FALocationHistory extends PXView {
    @columnConfig({ hideViewLink: true })
    FAAccountID: PXFieldState;
}

The decorator can be used for the properties of view classes.

featureInstalled

@featureInstalled(
  'PX.Objects.CS.FeaturesSet+outlookIntegration')
export class OU201000 extends PXScreen {
}

The decorator can be used for screen classes (that is, the classes that extend the PXScreen class).

graphInfo

You use the graphInfo decorator to specify the information about the graph of the form, as shown in the following example.

@graphInfo({
  graphType:'PX.Objects.GL.AccountHistoryEnq',
  primaryView:'Filter'})
export class GL401000 extends PXScreen {
}

You can use any of the following parameters of the decorator.

The decorator is required for screen classes (that is, the classes that extend the PXScreen class).

gridConfig

You use the gridConfig decorator to specify the configuration options for a table on a form, as shown in the following code. For descriptions of the options, see Table (Grid): Reference Information.

@gridConfig({
  preset: GridPreset.Details,
  initNewRow: true,
  syncPosition: true,
  wrapToolbar: true,
  statusField: "Availability"
})
export class SOLine extends PXView {
}

The decorator can be used for view classes (that is, the classes that extend the PXView class).

handleEvent

You use the handleEvent decorator to mark a handler of a runtime event for the specified view, or a handler of a runtime event for the specified field.

The following event types are supported (see the CustomEventType enum).

@handleEvent(CustomEventType.GetCellCss,
  { view: 'Transactions', column: 'CuryLineAmt' })
getTransactionsCellCss(args: CellCssHandlerArgs):
  string | undefined {
    if (args?.selector?.rowIndex === 0 &&
        args?.selector?.cellValue > 1000) {
        // see static/custom.css
        return 'red-cell';
  }
  return undefined;
}

@handleEvent(CustomEventType.GetRowCss,
  { view: 'Transactions' })
getTransactionsRowCss(args: RowCssHandlerArgs) {
    if (args?.selector?.rowIndex === 1) {
        // see static/custom.css
        return 'bold-row';
    }
 
    return undefined;
}

headerDescription

You use the headerDescription decorator to specify that the value of the field is displayed in the header of the form, such as the customer ID on the Customers (AR303000) form. The following code shows an example of code that uses this decorator.

@headerDescription 
CustomerID: PXFieldState;

The decorator can be used for properties of view classes.

linkCommand

You use the linkCommand decorator to specify the action to be executed when a user clicks the link on the field. The following code shows an example of code that uses this decorator.

export class Contacts extends PXView {
    @linkCommand("ViewContact")
    DisplayName: PXFieldState;
}

The decorator can be used for the properties of view classes.

<field name="OrigRefNbr" 
    config-link-command.bind="'ViewOriginalDocument'">
</field>

localizable

You use the localizable decorator to mark a class with localizable messages or a localizable string, as shown in the following examples.

@localizable
export class Messages {
    static ExternalLink = "External Link:";
}

export class QpDacBrowserCustomElement {
    @localizable
    static NothingFoundMsg: string = 
      "No entries have been found for the {filter}";
}

placeAfterProperty

You use the placeAfterProperty decorator to indicate that the field should be placed after the specified field, as shown in the following example.

@placeAfterProperty("caseCD") 
ProjectId: PXSimpleSelectorState;

The decorator is used for the properties of view classes in extensions.

placeAfterView

You use the placeAfterView decorator to indicate that the data view should be placed after the specified data view, as shown in the following example.

@placeAfterView("Filter")
export class GLSetup extends PXView {
}

The decorator is used for view classes (that is, the classes that extend the PXView class) in extensions.

placeBeforeProperty

You use the placeBeforeProperty decorator to indicate that the field should be placed before the specified field, as shown in the following example.

@placeBeforeProperty("caseCD") 
ProjectId: PXSimpleSelectorState;

The decorator is used for properties of view classes in extensions.

placeBeforeView

You use the placeBeforeView decorator to indicate that the data view should be placed before the specified data view.

@placeBeforeView("Filter")
export class GLSetup extends PXView {
}

The decorator is used for view classes (that is, the classes that extend the PXView class) in extensions.

viewInfo

You use the viewInfo decorator to identify a property that corresponds to a data view of the graph.

You can use any of the following parameters of the decorator:

• containerName: Specifies a user-friendly name of the container. This name is used as an object name during the configuration of particular functionality, such as workflows and import and export scenarios. If this value is not specified, the system displays the name of the data view as the object name.

  The following code shows an example of use of this decorator.

  export class GL301000 extends PXScreen {
   @viewInfo({containerName: 'Batch Summary'})
   BatchModule = createSingle(Batch);
  }

• syncAlways: If the value is true, includes the data view in the list of views whose data is sent in the requests between the browser and the server. By default (if the value is false), only the data views whose data is visible to a user are included in this list. Setting of the value to true may be useful for service data views whose data is used for calculations on the form, such as calculation of visibility of a tab.

The decorator can be used for the properties of screen classes.