Button: Reference Information

In the tables of this topic, you can find reference information about buttons.

Conversion from ASPX to HTML and TypeScript

The following tables will help you to convert ASPX elements that are related to buttons to HTML or TypeScript elements.

Table 1. PXButtonThe following table shows the correspondence between PXButton and HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXButton
<px:PXButton ... />
 Is replaced by the qp-button tag.
<qp-button id="buttonAdjustDocAmt">
</qp-button>
CommandName
<px:PXButton 
CommandName= "AddOK"  ... />
 Is replaced by the state.bind attribute, which binds the button to the specified action defined in a graph.
<qp-button id="buttonAddOK" 
state.bind="AddOK">
</qp-button>
DialogResult
<px:PXButton 
DialogResult= "Cancel"  ... />
 Is replaced by dialog-result attribute, which specifies the response returned by an action. This attribute is required for the standard buttons of a dialog box.
<qp-button
  id="buttonCancel"
  dialog-result="Cancel">
</qp-button>
This attribute can have any of the following values:
  • Abort
  • Cancel
  • Ignore
  • No
  • None
  • OK
  • Retry
  • Yes
Enabled
<px:PXButton 
Enabled= "True"  ... />
 Is replaced by the enabled attribute, which indicates (if set to true) that the button is enabled on the UI.
<qp-button id="buttonAdjustDocAmt">
enabled="true" </qp-button>
ID
<px:PXButton 
ID= "button1"  ... />
 Is replaced by the id attribute. This is a required attribute.
<qp-button id="button1">
</qp-button>
Text
<px:PXButton 
Text= "Add More"  ... />
 Is replaced by the caption attribute, which defines the text that is displayed on the button. The string specified in this attribute is localizable.
<qp-button id="button1" 
caption="Add More" dialog-result="Add">
</qp-button>
Size Is replaced by the class attribute, which indicates how many columns of width athe button should occupy.
Visible
<px:PXButton 
Visible= "True"  ... />
 Is replaced by the hidden attribute, which indicates (if set to true) that the button is not visible on the UI.
<qp-button id="buttonAdjustDocAmt">
hidden="false" </qp-button>
Table 2. Obsolete ASPX Controls and PropertiesThe following table lists obsolete ASPX elements that are related to buttons. You do not need to replace these ASPX elements with any HTML or TypeScript elements.
ASPX Control Properties
PXButton
  • CommandSourceID
  • runat
  • SyncVisible
PXDSCallbackCommand All properties

qp-button

The following table lists the properties of the qp-button control, which represents a button in HTML.

Property Description
caption Specifies the text that is displayed on the button. The string specified in this attribute is localizable.
<qp-button id="button1" 
caption="Add More" dialog-result="Add">
</qp-button>
If the button has the dialog-result attribute specified and the caption attribute value is the same as the dialog-result value, you can omit the caption attribute.
class Species the CSS class for the button. The class can indicate how many columns of width the button should occupy relative to the width of its parent control.
 <field name="ShipVia">
    <qp-button id="btnShopRates"
      state.bind="ShopRates"
      class="col-7">
    </qp-button>
</field>
The code class="col-7" above indicates that the button occupies 7 columns of width (out of 12) relative to the width of its parent control.
dialog-result Defines the response returned by the performed action. This attribute is required for the standard buttons of a dialog box, such as OK and Cancel.
<qp-button
  id="buttonCancel"
  dialog-result="Cancel">
</qp-button>
This attribute can have any of the following values:
  • Abort
  • Cancel
  • Ignore
  • No
  • None
  • OK
  • Retry
  • Yes
enabled Specifies whether the button should be enabled or disabled on the UI. A true value indicates that the button is enabled, whereas a false value indicates that it is disabled.
<qp-button id="buttonAdjustDocAmt">
enabled="true" </qp-button>
hidden Indicates whether the button should be hidden or visible on the UI. A true value indicates that the button is hidden, whereas a false value indicates that it is visible.
<qp-button id="buttonAdjustDocAmt">
hidden="true" </qp-button>
id Specifies the id of the button. This attribute is required.
<qp-button id="button1">
</qp-button>
imageSrc Determines the source of the image displayed on the button.
<qp-button id="button1" 
imageSrc="\Content\svg_icons">
</qp-button>
pushed Specifies whether the button is in the pushed state.