How to recreate modal component for force:lightningQuickActionWithoutHeader ( Showing quick action same as Lightning Experience Standard modal )

If you are building a lightning component for a lightning-quick action then you must be having a hard time to add additional buttons to the footer. If you are implementing the force:lightningQuickActionWithoutHeader interface in the component then you can get rid of the default header and footer and can create your own footer with the buttons of your choice. But still, it doesn’t match with the Lightning Experienceince view. I had the same issue on a recent project and I was able to make it look like the default button’s pop-up.

In order to get the lightning experience matching modal, you need to make some tweaks in the CSS along with lightning design system CSS. You need to include some styles which will modify the standard style so you can get the same look and feel.

After Salesforce Spring ’18 release, Tag Not Allowed in Components. You can’t add a  tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component.

So,  In order to use a workaround, we will have to include a CSS in our lightning component using a static resource to modify the CSS of the container which is wrapping the lightning component.

.cuf-content{
    padding:0 !important;
}
.slds-p-around--medium{
    padding:0 !important;
}
.slds-modal__container{
    width:80% !important; // You can update the width as per your need
    max-width:80% !important;
}
.slds-modal__content{
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;
}

Above provided CSS needs to be loaded as an external resource. You will need to copy and paste the CSS into a file and save it as a static resource. Make sure file extension is “.css”. For instance, assume we have uploaded it as a static resource and named it “quickActionStyle”.

Sample Component

Screenshot_1

 

Now, the quick action will look like below.

Screenshot_6

So, we are able to achieve what we were looking for with some small tweaks. If you have any question and concern then feel free to comment on the post.

You can also use the aura:html tag to inject this CSS in your lightning component.

Use the following CSS in aura:html tag as shown below.

Happy Easter!!

2 thoughts on “How to recreate modal component for force:lightningQuickActionWithoutHeader ( Showing quick action same as Lightning Experience Standard modal )

  1. I’m thankful for your post. I used the above CSS technique to add ‘Save’ button to the footer. Once I click save, it would navigate me to the newly created record page. Everything seems great till now. After navigating to the new record page, I have 2 buttons which opens up the slds-modal, on those two modal popups scrolling is not working. Once I refresh the page, scrolling is working. So I’m firing the e.force:refreshView event to refresh page but had no luck. I don’t have much experience regarding css aspect.

    I’m hoping you would help me figure this out and why CSS styling is carrying from the component to the navigated record page. Any insight would be aprreciated

  2. Looks like the CSS we used to create this model is being applied to the new record page too. You need to destroy this component when you navigate to new record page.

    component.destroy() is used to remove a component from document dom.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.