Selector Control: Configuration of a Link

A selector control can display a value as a link to the record whose identifier is displayed in the selector control. The link is configured differently depending on the location of the selector control.

Selector Control in a Fieldset

In a fieldset, you add the link by specifying allowEdit: true in the controlConfig decorator for the field in TypeScript, as shown in the following example.
@controlConfig({allowEdit: true, })
CustomerID: PXFieldState<PXFieldOptions.CommitChanges>;

@controlConfig({allowEdit: true, })
CustomerLocationID: PXFieldState;

@controlConfig({allowEdit: true, })
ContactID: PXFieldState;

The code above displays links, as shown in the following screenshot.

Figure 1. Links in the selector controls


Tip: The allowEdit: true setting also adds the + (Add Row) button to the lookup table of the selector control.

Selector Control in a Table

In a table, a link is displayed by default. To remove the link, specify hideViewLink: true in the columnConfig decorator in TypeScript, as shown in the following example.
@columnConfig({ hideViewLink: true })
BranchID: PXFieldState<PXFieldOptions.CommitChanges>;

The code above removes the link from the Branch column, as shown in the following screenshot.

Figure 2. Link in the grid


Link Behavior

You can configure which action is executed when a user clicks the link in the selector control. By default, the system opens the record that is specified in the selector control. To specify a custom action, you use one of the following:
  • For a selector control located in a fieldset, the editCommand property in the controlConfig decorator, as shown in the following code
    export class EPAssignmentMap extends PXView {
  @controlConfig({editCommand: "OpenForm"})
  GraphType: PXFieldState<PXFieldOptions.CommitChanges>;
}
  • For a selector control located in a grid, the linkCommand decorator 
    @gridConfig({
	preset: GridPreset.Inquiry
})
export class RSSVWorkOrderToPay extends PXView {
	@linkCommand<RS401000>("ViewOrder")
	OrderNbr: PXFieldState;
}

To use a custom action for the link in the selector control, you also need to do the following:

  1. In the graph, define an action that opens the entered form with the new record.
  2. In the TypeScript file of the form, declare a property of the PXActionState type for this action in the screen class.