Selector: Reference

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

Conversion from ASPX to HTML and TypeScript

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

Table 1. PXSelectorThe following table shows the correspondence between PXSelector 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
PXSelector
<px:PXSelector runat="server"
  ID="edContactID" DataField="ContactID"
  AllowEdit="True" DataSourceID="ds"
  AllowAddNew="True" AutoRefresh="True"
  CommitChanges="True" />
 Use the field tag, as shown in the following code. The control represents the selector control if the PXSelector attribute is specified (or its descendants are specified) for the DAC field in the name attribute.
<field name="ContactID"
  config-allow-edit.bind="true"></field>

In rare cases, you can use the qp-selector tag.
DataField
<px:PXSelector 
  DataField="ContactID" ... />
 Use the name property of the field tag in HTML to specify the DAC field name, as shown in the following code.
<field name="ContactID" ... ></field>
CommitChanges
<px:PXSelector ID="edContactID" ...
  CommitChanges="True" />
 In the TypeScript file, use the PXFieldOptions.CommitChanges type parameter when defining the field, as shown in the following code.
ContactID:
  PXFieldState<PXFieldOptions.CommitChanges>;
AllowEdit
<px:PXSelector ID="edContactID" ...
  AllowEdit="True" />
 Use the config-allow-edit property in HTML, as shown in the following code.
<field name="ContactID" 
  config-allow-edit.bind="true">
</field>
DisplayMode
<px:PXSelector ID="edSrvOrdType" 
DataField="SrvOrdType" DisplayMode="Text" ... />
 Specify what should be displayed in the selector by using the config-display-mode property in HTML, as shown in the following code. The possible values are "both", "id", and "text".
<field name="EntityTypeName"
  config-display-mode.bind="'text'">
</field>
Table 2. PXSegmentMaskThe following table shows the correspondence between PXSegmentMask 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
PXSegmentMask
<px:PXSegmentMask
  CommitChanges="True" ID="edCustomerID"
  runat="server" DataField="CustomerID"
  AllowAddNew="True" AllowEdit="True"
  DataSourceID="ds" AutoRefresh="True"/>
 Use the field tag, as shown in the following code. The control represents the selector control if the PXSelector attribute is specified (or its descendants are specified) for the DAC field in the name attribute.
<field name="CustomerID"
  config-allow-edit.bind="true"></field>

In rare cases, you can use the qp-selector tag.

qp-selector

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

Property Description
config-suggester Configures the suggester, which is shown when a user starts typing a value in the box.
config-allowEdit Enables the redirection link, which can be clicked to open the selected record.
<field name="ContactID" 
  config-allow-edit.bind="true">
</field>
displayMode Indicates what is displayed in the selector. You can specify one of the following values:
  • id: Only the identifier
  • text: Only text from the DescriptionField parameter
  • both: Both the identifier and the text from the DescriptionField parameter
<field name="EntityTypeName"
  config-display-mode.bind="'text'">
</field>
inputMask Specifies an input mask. The value is configured in the same way as an input mask is in the DAC attribute. For details, see To Configure an Input Mask and a Display Mask for a Field.
valueMode Defines the identifiers used to build the string from the value of the control. The possible values are the following:
  • RawText: The value does does not include literals.
  • IncludeLiterals: The value includes literals.
skipValidation Specifies whether validation of the mask should be performed. If this property is set to true, the validation is skipped.
promptChar The character that is used to fill empty mask positions in the display text.
emptyChar

The character that is used to replace empty mask positions in the value of an input mask.

For example, if the input mask is "###-##-##", the entered value is "555442", and the emptyChar value is "+", the resulting value that will be sent to the database is "555442+".