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.
[sourcecode language=”css”]
.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;
}
[/sourcecode]
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
Now, the quick action will look like below.
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.
https://gist.github.com/sfcure/4a242fcd3bd8e445bc424872474c538a
Happy Easter!!
By Naveen Sharma
May 24, 2018I’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
By Naveen Sharma
May 28, 2018Looks 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.