How to create custom modal popup in Action Button

Hello Trailblazers !

In this blog post, we are going to see how to create lightning component for custom modal popup which we can use in Lightning Action Button to override the standard modal popup. 

Standard action button component provides header name as the action button name and cancel button in footer by default. But, there may be a requirement that you want to show different heading in modal header and all the buttons like previous, next or save in footer. So for this, I have created lightning component.

You can install unmanaged package that I have created for you. Below is the link to unmanaged package.

https://login.salesforce.com/packaging/installPackage.apexp?p0=04t2v000006xxMg

After installing the unmanaged package, 

1. Go to object manager-> Select object in which you want to create an action

2. Go to Buttons, Links & Action -> Click New Action 

3. Select the type of action to create.

4. For a Lightning Component action, select the component - CustomModalPopup.cmp

5. Fill up other information and save it.

Now, Action button is ready to add into page layout.

1. Go to page layout and click Mobile & Lightning Actions 

2. Drag the action into the Salesforce Mobile and Lightning Experience Actions section, and place the action where you want it to appear.

You can add your content in lightning component to show in modal popup. This is how our custom modal popup looks.

References
1. How to create action button in lightning
2. How to add action button in page layout