1

I have created new Lightning component and missing Save button at bottom. I can only see Cancel button. What a strange? Am I missing something? What is the solution? see below component.

On standard object, I have added New Action button and selected lightning component.

    <aura:component implements="force:lightningQuickAction,force:appHostable,force:hasRecordId" controller="Test">
 <aura:attribute name="recordId" type="Id" required="true" default="{!v.recordId}" />
</aura:component>

    ({
 doSave : function(component, event, helper) { 
        console.log(component.get('v.recordId'));
        console.log('dosave called');
        var action =  component.get('c.ping');
        action.setParams({ msg : "Hello world" });

        action.setCallback(this, function(response) {
            console.log('setCallback called');
            var state = response.getState();
            if (state === "SUCCESS") {   

                // Display the total in a "toast" status message
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Good day",
                    "message": "Hello World"
                });
                resultsToast.fire();

                // Close the action panel
                var dismissActionPanel = $A.get("e.force:closeQuickAction");
                dismissActionPanel.fire();   

                console.log("From server: " + response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
                console.log(response.getReturnValue());
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        console.log('calling server-side action');       
        $A.enqueueAction(action);
 }
})
3
  • Can you please post your code of component also?
    – daniel wu
    Oct 18, 2017 at 3:03
  • What sObject are you operating on ? and are you able to edit the same sObject via standard ligtning experience ?
    – Sumuga
    Oct 18, 2017 at 3:11
  • It's on Campaign object. Yes with standard it's fine but I have issue with custom component.
    – Milind
    Oct 19, 2017 at 3:58

2 Answers 2

1

If you are using action with lightning component then you have to add save button in your component the cancel button is the standard one of lightning quick action pop up.

  <aura:component implements="force:lightningQuickAction,force:appHostable,force:hasRecordId" controller="Test">
 <aura:attribute name="recordId" type="Id" required="true" default="{!v.recordId}" />
<button name=“save” value=“save” onclick=“{!c.dosave}”/>
</aura:component>
1
  • Yes you are right. I already read that online. What is the reason they have not add Save button to the panel OR at least they should give a way to add button in footer panel. I'm trying in different way let see. Do you know any way to add button to the footer panel next to Cancel button. I can't understand why Salesforce lightning team have not added OR give footer panel in component to add custom button. Stupid people.. making life complicated unnecessary. I know I can use force:lightningQiuckActionWithoutHeader interface but I have to design header and footer myself in ugly way.
    – Milind
    Oct 19, 2017 at 4:00
1

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">
    <button class="slds-button slds-button--neutral uiButton--default uiButton--default uiButton" type="button">
        <lightning:button variant="neutral" label="Cancel" onclick="{! c.cancelClick }" />
    </button>
    <button class="slds-button slds-button--neutral uiButton--default uiButton--brand uiButton" type="button">
        <lightning:button variant="brand" label="Save" onclick="{! c.saveClick }" />
    </button>
</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .