Button: General Information

A button is a control that users can interact with to trigger an action or execute a command.

A button is defined by PXButton in the Classic UI. In the Modern UI, a button is defined by the qp-button HTML tag. If you need to add a button inside a container (for example, next to a box), you use the qp-button tag.

You do not need to manually add the standard buttons to the form toolbar of an MYOB Acumatica form. The buttons representing actions that are available on the form toolbar are added automatically to the form.

Learning Objectives

In this chapter, you will learn the following about a button:

  • The design guidelines for a button, including the naming conventions and layout recommendations
  • The proper configuration of a button for specific cases, such as when a button is to be placed below another element
  • The key details of each property of a button

Applicable Scenarios

You configure buttons in the following user scenarios:

  • A user needs to trigger an action or execute a command, such as initiating invoice creation.
  • A user needs to confirm or cancel an action or a command, such as canceling the release of an invoice.

Button ID

An ID of a button in HTML consists of two parts, the button prefix and the semantic name. The semantic name describes the purpose of the element. For example, you may have a button that adjusts the document amount. You can set its ID to buttonAdjustDocAmt, as the following code shows.

<qp-button id="buttonAdjustDocAmt"></qp-button>

Button of a Graph Action

If you have defined an action in a graph, you must specify the state attribute for the button that corresponds to this action, as shown in the following code.

<qp-button id="buttonAddBlanketLine" state.bind="AddBlanketLineOK">
</qp-button>

In the code above, you have used the state attribute and specified the AddBlanketLineOK value for its bind property, which is the name of the action that is defined in the graph.

Standard Buttons of a Dialog Box

For the standard buttons of a dialog box—such as OK or Cancel—you must have the dialog-result attribute specified. Also, if you do not specify the caption attribute, the button's caption will be set to the value of the dialog-result attribute, and the caption will be localizable by general rules. You can override the default caption by specifying the caption attribute. You can omit the caption attribute if its value is the same as the value of the dialog-result attribute.

The following code example shows you two approaches to declaring the OK button of a dialog box that has a caption.

<qp-button id="buttonOK" caption="Confirm" dialog-result="OK"> </qp-button>
// You can also define the above button in the following manner
<qp-button id="buttonOK" config.bind="{text: SysMessages.Confirm, dialogResult: 1}">
</qp-button>

The following code example shows you two approaches to declaring the Cancel button of a dialog box that does not have a caption.

<qp-button id="buttonCancel" dialog-result="Cancel"></qp-button>
// You can also define the above button in the following manner
<qp-button id="buttonCancel" config.bind="{dialogResult: 'Cancel'}">
</qp-button>

UI Naming Conventions

The following table shows the UI naming conventions for a button.

Naming Convention Example
Use a verb or verb phrase that describes the process that is initiated when a user clicks the button. Title-style capitalization is used for button names. In the Classic UI, button names are displayed in uppercase. The Release and Release All buttons on the Release AR Documents (AR501000) form, as shown in the following screenshot