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);
 }
})
  • Can you please post your code of component also? – daniel wu Oct 18 '17 at 3:03
  • What sObject are you operating on ? and are you able to edit the same sObject via standard ligtning experience ? – StormBr34ker Oct 18 '17 at 3:11
  • It's on Campaign object. Yes with standard it's fine but I have issue with custom component. – Milind Oct 19 '17 at 3:58
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>
  • 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 '17 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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