Like others before me, I'd like to add a button to the footer of a Lightning Quick Action Component. Since no one has provided a solution with code yet, I'm still trying to accomplish the same thing. So I thought of an idea: "what if I could access the Quick Action's footer in the DOM via JavaScript, and then use appendChild() to append my button HTML."

I thought this would be a great solution! Problem is, I can't seem to find the footer in the DOM by class name. I try:

    document.getElementsByClassName("modal-footer").length //returns length 0

But this returns a length of 0; it can't find the footer. Furthermore, in attempts to understand the HTML architecture, I ran the code:

    var compElem = document.getElementById("anElementInMyComponent");
    compElem.parentElement.nodeName //BODY
    compElem.parentElement.parentElement.nodeName //HTML

You can see I'm grabbing an element from my component, then checking its parent which turns out to be BODY, and grandparent is HTML. Why is the parent of my element the BODY, but when I look in my Browser Dev Tools that same element has tons of ancestors prior to BODY, including div modal-body and div modal-container?

  1. Why is the JavaScript telling me that the direct parent of my Component is BODY?
  2. Is it possible to obtain the footer element in JavaScript?
  3. Has anyone found a way to actually add another button to the footer?

closed as too broad by glls, Martin Lezer, Basti, battery.cord, Himanshu Feb 23 '18 at 14:58

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


Why is the JavaScript telling me that the direct parent of my Component is BODY?

Locker Service. Each component in the same namespace ultimately gets put in to a "shadow DOM", which is like a light-weight iframe. You can't touch anything outside of this, because you're locked in (hence, "Locker" service).

Is it possible to obtain the footer element in JavaScript?

Nope. It's outside of your namespace, so safely locked away from you.

Has anyone found a way to actually add another button to the footer?

Use the force:lightningQuickActionWithoutHeader and then add your own custom footer:

<div style="height: 180px;">
  <div class="slds-docked-form-footer">
    <button type="button" class="slds-button slds-button_neutral">Cancel</button>
    <button type="button" class="slds-button slds-button_brand">Save</button>
  • Thanks for the response, it makes so much sense. The idea about adding a custom footer is the same thing I saw at this link: success.salesforce.com/ideaView?id=0873A000000cNRIQA2 The problem with this though is that in their sample code they have embedded CSS styling and I'm not able to save my file with that. So, I tried to add those same styles with the .THIS prefix in my style file, but the styles don't take effect. Does the Locker Service prevent me from updating these styles as well? – Tony Rush Feb 22 '18 at 21:22
  • My css file: .THIS.cuf-content { padding: 0 0rem !important; } .THIS.slds-p-around--medium { padding: 0rem !important; } .THIS.slds-modal__content { overflow-y: hidden !important; height: unset !important; max-height: unset !important; } – Tony Rush Feb 22 '18 at 21:25
  • @TonyRush Did you manage to get this set up? I had a weird issue with the footer being in the right place, but I do know you're supposed to build your own. If you want, feel free to edit this answer with the solution you came up with, or add your own. – sfdcfox Feb 23 '18 at 21:09
  • No, not yet. I copied and pasted the component from that link and it looks great if I enter the browser developer mode and manually add all of the CSS to each of the classes (cuf-content, slds-p-around--medium, and slds-modal__content) as shown in my previous comment. However, I can't get get the styles to load automatically if I put them in the Styles files. I'm not sure if this is because of the Locker Service? – Tony Rush Feb 25 '18 at 0:54
  • would you recommend that I post a new question about the aforementioned issue with the CSS? The solution in the link works when I go through the browser web tools and apply each style manually, it's just that I don't know how to get those class changes to apply automatically. In the link I posted, he uses nested style tag, but the Developer Console won't let me save the component with nested style. – Tony Rush Feb 26 '18 at 20:51

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