Define action buttons for CDT

Define action buttons that you want to appear in the Configurable Data Table (CDT) Lightning component.

To define header-level action buttons

1. From the App Launcher, select Data Table Configurations, then select the configuration you defined.
2. Go to the Related tab. In the Header Buttons Configuration section, select New.
3. In the New Data Table Header Button Configuration dialog, enter information or make selections:
   • Header Buttons Configuration Name—Enter a descriptive name for the configuration.
   • Data Table Configuration—Enter the Data Table Configuration Name of this configuration.
   • Header Button Label—Enter a user-meaningful label for the action button.
   • Header Button Label Override—Enter a string value that overrides any existing button label translation
   • Event Payload—Enter the value in JSON format that will be attached to the event. For example, it can be an action name that you want to point this custom event to: {"HeaderPayloadField":"HeaderPayloadValue"}
   • Header Button Order—Enter the display order of the action button in the header picklist.
   • Button Event Handler—Either search for the name of an already-configured button event handler, or define a new custom event handler by selecting the option +New Data Table Button Event Handler (it appears when you click into the field).
4. Select Save.

To define row-level action buttons

1. From the Lightning App Launcher, select Data Table Configurations, then select the configuration you defined.
2. In the Related tab, in the Row Buttons Configuration section, select New.
3. In the New Data Table Row Button Configuration dialog, enter information or make selections:
   • Row Button Configuration Name—Enter a descriptive name for the configuration.
   • Data Table Configuration—Enter the Data Table Configuration Name of this configuration.
   • Row Button Label—Enter a user-meaningful label for the action button.
   • Row Button Label Override—Enter a string value that overrides any existing button label translation.
   • Event Payload—Enter the value in JSON format that will be attached to the event. For example, it can be an action name that you want to point this custom event to: {"rowPayloadField","rowPayloadValue"}.
   • Row Button Order—Enter the display order of the action button in the row actions picklist.
   • Button Event Handler—Either search for the name of an pre-defined button event handler, or define a new custom event handler by selecting the option +New Data Table Button Event Handler (it appears when you click into the field).
4. Select Save.

Event handlers

All pre-defined button handlers, and any new custom handlers that you define, are stored in the zpf__DataTableButtonEventHandler__c. object.

Pre-defined button handlers

These handler configurations exist by default. You need only search for the following configuration names in the Button Event Handler field.

• PursuePGAButtonHandler
• DismissPGAButtonHandler
• WonPGAButtonHandler
• LostPGAButtonHandler
• SnoozePGAButtonHandler
• AcceptPGAButtonHandler
• RejectPGAButtonHandler

To define a custom button handler

1. In the New Data Table Button Event Handler dialog, enter information or make selections:
   • Button Handler Name—Enter a descriptive name for the handler configuration.
   • Button Handler Component Name—Enter the API name of a Lightning component that will handle the event on the action button.
2. Create a Lightning component that will provide the handler code for the action button.

Details of the component

The new Lightning component must implement the zpf:ConfigurableDataTableActionEventHandler interface:

<aura:interface access="global" description="Interface for a components that handle configured custom action events.">
 <aura:method name="handleEvent" access="global" description="Callback method called when action event is raised.">
        <aura:attribute name="records" type="Map[]" access="global" description="Selected records."/>
    </aura:method>
</aura:interface>

The new component must have a controller function named handleEvent. The handleEvent function will have access to the selected records (multiple record Ids).

Example of the CustomActionEventHandler component:

<aura:component description="CustomActionEventHandler" implements="zpf:ConfigurableDataTableActionEventHandler">
 <aura:attribute name="selectedIds" type="Id[]" access="private"/>
 <aura:attribute name="parentId" type="Id" access="private"/>
 <aura:attribute name="payload" type="Map" access="private"/>
</aura:component>

CustomActionEventHandler controller:

({
handleEvent: function (component, event) {
    const params = event.getParam('arguments');
    if(!params) return;
    component.set("v.selectedIds", params.records);
    component.set("v.parentId", params.parentId);
    component.set("v.payload", params.payload);
  }
});