Replace Save button with a custom action

You can replace the default Save button on the Edit Lines modal dialog with a custom action button. The custom action button can invoke any desired business action. You can also tailor the style and appearance of the custom action button.

Prerequisites

Before configuring this feature, make sure that the following fields are visible and editable:

• Is Save Button Disabled field on Product Selector Configuration object.
• Action Configuration object:
  • Action Component
    Note

    This picklist field should contain Edit Line Dialog and Edit Lines Dialog options. If they are not available to you, add them manually from the Object Manager.

  • Action Order
  • Action Type
  • Button Variant
  • Conditional Display Field
  • Action Event Handler Name
  • Action Event Handler Type
  • Event Payload
  • Icon
  • Is Enabled
  • Requires Createable
  • Requires Deletable
  • Requires Editable
  • Save Lines Before Action
  • Close Dialog After Action

If the fields are not visible or editable, confirm that they have been added to the object's page layout and are visible in the user's profile. For detailed instructions on how to add fields and check for visibility, refer to Make fields visible or editable.

Disable the default Save button

1. From the Lightning App Launcher, go to the appropriate Product Selector Configuration.
2. On the Details tab, select the Is Save Button Disabled checkbox.

Enable and configure a custom action button

1. From the Lightning App Launcher, go to the appropriate Product Selector Configuration.

2. On the Related tab, in the Action Configurations section, select New.

3. In the New Action Configuration dialog, enter or specify values to configure the button:

   • Action Name—Specify a user-friendly label for the action button.

   • Icon—Optionally specify a standard Salesforce icon to display in place of a button, in the format:

     <category>:<icon name>
     

   • Product Selector Configuration—Do not change the default value.

   • Conditional Display—Optionally specify the API name of the Boolean field on the header object (Agreement or Quote) to control when the button should appear. If you leave the field blank, the button is always visible.

   • Requires Createable, Requires Editable, and Requires Deletable—Select one or more options to allow the action button to be used only for line items with the corresponding creatable, editable, or deletable status for a given user.

   • Action Event Handler Type—Select Custom.

   • Action Event Handler Name—Specify the name of the custom Lightning component that will handle the event on the action button. This component must implement the zpl:ActionEventHandler interface and handle events in the handleEvent controller function.
     You must create a Lightning component to provide handler code for the action button. This Lightning component must implement the zpl:ActionEventHandler 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:attribute name="parentId" type="Id" access="global" description="ID of the header object."/>
             <aura:attribute name="payload" type="Map" access="global" description="Data attached to the event"/>
         </aura:method>
     </aura:interface>
     

     The new component must have a controller function named handleEvent. The handleEvent function will have access to the selected records, the header object ID, and a payload that is pre-configured in the Action Configuration.

     Example CustomActionEventHandler component:

     <aura:component description="CustomActionEventHandler" implements="zpl:ActionEventHandler">
     </aura:component>
     

     CustomActionEventHandler controller:

     ({
         handleEvent: function (component, event) {
             const params = event.getParam('arguments');
             if (!params) return;
     
             const toastEvent = $A.get("e.force:showToast");
             toastEvent.setParams({
                 title: "Success!",
                 message: JSON.stringify(params.records.map(e => e.Id)),
                 type: "success"
             });
     
             toastEvent.fire();
         }
     });
     

   • Button Variant—Select the appearance of the button. The default is Neutral. Select Brand Outline if you want the custom action button to look like the standard Save button.

   • Event Payload—Optionally specify the payload that you want to pass inside of the action handler, in JSON format.

   • Action Component—Select Edit Line Dialog or Edit Lines Dialog.

   • Action Type—Specify List Button.

   • Action Order—Specify the order in which this action item will appear among the rendered set of defined action buttons.

   • Save Lines Before Action—Select to save all recently edited or added line items before performing the custom action.

   • Close Dialog After Action—Select to automatically close the Edit Lines modal after the custom action is executed.

4. Select Save.