Recreate modal component for force:lightningQuickActionWithoutHeader


Lightning component action is a handy option to create custom function called from record detail page. We can launch a lightning component from a custom action by just implementing either force:lightningQuickAction or force:lightningQuickActionWithoutHeader. However, lightning component action has serious user interface problems. I will introduce them and propose a workaround.


A component implemented force:lightningQuickAction is shown on the auto-created modal and its header and footer are outside of the component. So we can neither customize the header text nor put an another button next to the cancel button on the footer.

It's a natural to think about recreating everything in a component implemented force:lightningQuickActionWithoutHeader. However, it has another problem. Extra margin is generated.


Notice: The following workaround is not compatible with Salesforce mobile.
We can overwrite the style of the auto-created modal by inline CSS to disable extra margin. Another possibility is calling a custom modal from lightning:button tag but it requires you to recreate a highlight panel and it would be a tough work.

    padding:0 !important;
    padding:0 !important;
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;

Now we get a modal which is similar to standard action.

Reusable component

I created a template modal component which can be used in a component implemented force:lightningQuickActionWithoutHeader. It is available on this repository.

<aura:component implements="force:lightningQuickActionWithoutHeader">
	<c:LightningActionModal title="Hello world!" percentWidth="85" bodyHeight="300">
        <aura:set attribute="body">
            //awesome modal body
        <aura:set attribute="footer">
            <lightning:button label="Cancel" variant="neutral"/>
            <lightning:button label="Save" variant="brand" />
Attribute Type Description
title String Text shown on the modal header.
percentWidth String Designate the width of the modal by percent. Default value is 50.
bodyHeight Integer Designate the height of the modal body by pixel. Default value is 250. The value in the custom action setting is neglected due to the overwritten CSS.
body Object Content in the modal body.
footer Object Content in the modal footer.