13

Can you add an additional footer button next to Cancel for a Lightning Quick Action?

<aura:component implements="force:lightningQuickAction">
    <ui:button label="Save Button" />
</aura:component>

I'm aware that I can use force:lightningQuickActionWithoutHeader and customize the whole design. Just wondering in the Lightning System provides a built in way of doing this.

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <ui:button label="Save Button" />
    <ui:button label="Cancel Button" />
</aura:component>

Lightning Quick Action Modal

| improve this question | | | | |
19

I'm afraid you can't. I would like to be able to do it to, at least customize the behavior of the "Save" button, but unfortunately it's not possible.

As you said, you need either to put the button inside your component with force:lightningQuickAction, or recreate everything in a component with force:lightningQuickActionWithoutHeader. Solution 1 is easier but not good looking and not consistent with the standard UI, but solution 2 needs more work.

You can use Salesforce Lightning Design System modal as a starting point for solution 2, but bear in mind that the look & feel is different in Salesforce1, if you use it.

Also, you can create a Idea for that and post the link here, I would be the first one to vote for it.

Last point, if you have access to the Partner Community, I asked the question here so I guess you can add your own comment to the thread to show the PMs I'm not the only one interested.

| improve this answer | | | | |
  • Would you mind sharing you code to get it done using force:lightningQuickActionWithoutHeader? – Robert Sösemann May 23 '17 at 20:58
3

Try this. After few css trick, I managed to fix it myself. This solution override the dialog box height which you mentioned while creating custom action on an object. I hope this will help someone needed.

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="MilindTest">     
<style>
    .cuf-content {
    padding: 0 0rem !important;
    }
    .slds-p-around--medium {
    padding: 0rem !important;
    }
    .slds-modal__content {
    overflow-y: hidden !important;
    height: unset !important;
    max-height: unset !important;
    }        
</style>

<div class="slds-col modal-header slds-modal__header">
    <h2 class="title slds-text-heading--medium">Milind Test</h2>
</div>
<div class="slds-col modal-body scrollable slds-p-around--medium" style="height: 200px; max-height: 400px; overflow-y: auto !important">
    <div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
</div>
<div class="slds-col modal-footer slds-modal__footer">        
    <lightning:button variant="neutral" label="Cancel" onclick="{! c.cancelClick }" />      
    <lightning:button variant="brand" label="Save" onclick="{! c.saveClick }" />
</div>

| improve this answer | | | | |
  • 1
    No feasible anymore with api >= 42.0. CSS styles within cmps are disallowed by now. – Christian Szandor Knapp May 11 '18 at 12:13
  • 2
    You can add style directly with api >= 42.0 by using <aura:html tag="style">your_css_contents</aura:html>! – Jon Duelfer Dec 17 '18 at 18:46
  • I did this the way Jon mentions successfully. Still annoying, as we move forward with lwc it seems there are lots of little problems similar to this. – Jeremy A. West Jan 16 at 19:50
1

Duplicate to this: how to access the save button in a modal when implementing the force:lightningQuickAction

And an idea was created here: https://success.salesforce.com/ideaView?id=0873A000000cNRIQA2

| improve this answer | | | | |
0

My solution was:

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <footer>
        <div class="modal-footer slds-modal__footer attach-to-bottom">
            <button class="slds-button slds-button_neutral">Cancel</button>
            <button class="slds-button slds-button_brand">Save</button>
        </div>
    </footer>
</aura:component>

CSS
.THIS .attach-to-bottom{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
}

Hope it helps.

| improve this answer | | | | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.