Selector Control: 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.

PXSelector

The 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.
AllowAddNew
<px:PXSelector ID="edContactID" ...
  AllowAddNew="True" />
 Use the config-allow-edit property in HTML, as shown in the following code. The property enables the link and add the + (Add Row) button to the lookup table of the selector control.
<field name="ContactID" 
  config-allow-edit.bind="true">
</field>
AllowEdit
<px:PXSelector ID="edContactID" ...
  AllowEdit="True" />
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>;
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>
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>

PXSegmentMask

The 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.

PXMultiSelector

The following table shows the correspondence between the PXMultiSelector ASPX element 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
PXMultiSelector
<px:PXMultiSelector 
  ID="edMailTo" 
  runat="server" 
  SkinID="email" 
  TextField="SearchSuggestion" 
  ValueField="EMail" 
  DataSourceID="ds" 
  DataField="MailTo" 
  Width="100%" 
  AutoGenerateColumns="false" 
  Hidden="True" 
  CommitChanges="True">
 Use the multiSelect property, which is available in the config attribute of the qp-selector control, as shown in the following code. The property indicates whether multiple values can be selected in the control.
@controlConfig({
  multiSelect: true,
  valueTemplate: '{1} <{0}>' }) 
MailTo: PXFieldState;

Parameters

The following table shows the correspondence between Parameters 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
Parameters
<px:PXSelector ... DataField="RefNbr">
  <Parameters>
    <px:PXControlParam ControlID="grid" 
      Name="APRegister.docType" 
      PropertyName="DataValues[&quot;DocType&quot;]" 
      Type="String" />
  </Parameters>
</px:PXSelector>
 Use the parameters property in the config property of the qp-selector control. For details, see Selector Control: Selector Parameters.
@columnConfig({
  editorConfig: {
    parameters: (screen: AP203500) => ({ 
      "APRegister.docType": screen.Document_Detail.activeRow.DocType.value })
  }
})
RefNbr: PXFieldState;