+ Start a Discussion
@ M  Coder@ M Coder 

Lighting urgent help##### : custom Save , save and new button

hi folks,  Very Urgent requirement 
on Account object , i have a custom button " contact form" . 
On click of that button opens a Modal window which has  contact form (basically fields from contact object) , i have few fields  Name ,  phone number , className etc . in the bottom i have Save and Save & New buttons,

i want custom functionality of Save
and Save & New buttons 
Requirement 1:
On click of save button on contact form , i need to save all the parameter (Name ,  phone number , className )  custom way , i need to store the contact form data as Record in contact object and in  related list of Account record. .
Best Answer chosen by @ M Coder
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Use below code:

Component:
<aura:component controller="ContactModalOnAcc"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="accForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>
    <aura:attribute name="Pick" type="Contact[]" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="force:refreshView" action="{!c.isRefreshed}" />
    
    <lightning:button label="Create Contact PopUp"
                      iconName="utility:new_window"
                      iconPosition="left"
                      variant="brand"
                      onclick="{!c.newPopup}"
                      />
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox1" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 65%;">
            <div class="slds-modal__header">
                CONTACT
            </div>
            
            <div aura:id="mid" class="slds-modal__content slds-p-around--medium">
                <div class="slds-p-left_xx-large slds-p-right_xx-large">
                    <div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;, padding-right: 9px;, padding-left: 10px;">
                        <h3 style="font-size: 1rem;" title="">Contact Information</h3>
                    </div> 
                </div>    
                <div class="slds-grid slds-p-top_medium">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="First Name" name="myfirst" value="{!v.accForm.FirstName}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input required="true" label="Last Name" name="mylast" value="{!v.accForm.LastName}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="Phone" name="myphone" value="{!v.accForm.Phone}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input label="Email" name="myemail" value="{!v.accForm.Email}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:select aura:id="PicklistId" label="Rating" name="myrating" value="{!v.accForm.Rating__c}">
                            <option value="" text="- None -" />
                            <aura:iteration items="{!v.Pick}" var="per">
                                <option value="{!per}" text="{!per}" />  
                            </aura:iteration>
                        </lightning:select>
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Save" onclick="{!c.saveModal}" />
                <lightning:button label="Save and New" onclick="{!c.saveNewModal}" />
                <lightning:button label="close" onclick="{!c.closeNewModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:
({
    doInit : function(component, event, helper){
        var action = component.get("c.getPicklist");
        var percent = component.find("PicklistId");
        var opts=[];
        action.setCallback(this, function(response) {
            var allValues = response.getReturnValue();
            console.log('allValues -- >> ' + allValues);
            component.set("v.Pick", allValues);
        });
        $A.enqueueAction(action); 
    },
    
    newPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
    },
    
    saveModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();
                var cmpTarget = component.find('Modalbox1');
                var cmpBack = component.find('Modalbackdrop');
                $A.util.removeClass(cmpBack,'slds-backdrop--open');
                $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
                
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeNewModal : function(component, event, helper){
        component.set("v.accForm",{'LastName':''});
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    },
    
    saveNewModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                //Do Something
                component.set("v.accForm",{'LastName':''});
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

CSS:
.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex:
public class ContactModalOnAcc {

    @AuraEnabled
    public static List<String> getPicklist(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Contact.Rating__c.getDescribe();
        System.debug('fieldResult---->>> ' + fieldResult);
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        System.debug('pList---->>> ' + pList);
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        System.debug('options---->>> ' + options);
        return options;
    }
    
    @AuraEnabled
    public static void saveDetails (Contact regForm1, String recordId){ 
        regForm1.AccountId = recordId;
        INSERT regForm1;
    }
}

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

Please try the below code, it is working fine. Kindly modify the code as per your requirement.

Component:
<aura:component controller="ContactModalOnAcc"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:attribute name="accForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>
    
    <aura:handler event="force:refreshView" action="{!c.isRefreshed}" />
    
    <lightning:button label="Create Contact PopUp"
                      iconName="utility:new_window"
                      iconPosition="left"
                      variant="brand"
                      onclick="{!c.newPopup}"
                      />
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox1" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 65%;">
            <div class="slds-modal__header">
                CONTACT
            </div>
            
            <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-p-left_xx-large slds-p-right_xx-large">
                    <div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;, padding-right: 9px;, padding-left: 10px;">
                        <h3 style="font-size: 1rem;" title="">Contact Information</h3>
                    </div> 
                </div>    
                <div class="slds-grid slds-p-top_medium">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="First Name" name="myfirst" value="{!v.accForm.FirstName}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input required="true" label="Last Name" name="mylast" value="{!v.accForm.LastName}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="Phone" name="myphone" value="{!v.accForm.Phone}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input label="Email" name="myemail" value="{!v.accForm.Email}"/> 
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Save" onclick="{!c.saveModal}" />
                <lightning:button label="Save and New" onclick="{!c.saveNewModal}" />
                <lightning:button label="close" onclick="{!c.closeNewModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:
({
    newPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
    },
    
    saveModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();
                var cmpTarget = component.find('Modalbox1');
                var cmpBack = component.find('Modalbackdrop');
                $A.util.removeClass(cmpBack,'slds-backdrop--open');
                $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
                
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeNewModal : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    },
    
    saveNewModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
				//Do Something
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

CSS:
.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex:
public class ContactModalOnAcc {

    @AuraEnabled
    public static void saveDetails (Contact regForm1, String recordId){ 
        regForm1.AccountId = recordId;
        INSERT regForm1;
    }
}

Finally, add this component to the Account record page.

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
@ M  Coder@ M Coder
@khan Anas : Thanks  alot for quickk reply , can you help me how to do it for a picklist field as well in above requirement. 
picklist field: Rating__c : hot,cold,medium
Can you please remodify the code and send me pleaseeeeeeeeeeeeee
@ M  Coder@ M Coder
@Khan: Save and new button is not working for me, its not doing any action . can you please check and revert 
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Use below code:

Component:
<aura:component controller="ContactModalOnAcc"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="accForm" type="Contact" default="{'sobjectType' : 'Contact'}"/>
    <aura:attribute name="Pick" type="Contact[]" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="force:refreshView" action="{!c.isRefreshed}" />
    
    <lightning:button label="Create Contact PopUp"
                      iconName="utility:new_window"
                      iconPosition="left"
                      variant="brand"
                      onclick="{!c.newPopup}"
                      />
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox1" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 65%;">
            <div class="slds-modal__header">
                CONTACT
            </div>
            
            <div aura:id="mid" class="slds-modal__content slds-p-around--medium">
                <div class="slds-p-left_xx-large slds-p-right_xx-large">
                    <div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;, padding-right: 9px;, padding-left: 10px;">
                        <h3 style="font-size: 1rem;" title="">Contact Information</h3>
                    </div> 
                </div>    
                <div class="slds-grid slds-p-top_medium">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="First Name" name="myfirst" value="{!v.accForm.FirstName}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input required="true" label="Last Name" name="mylast" value="{!v.accForm.LastName}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="Phone" name="myphone" value="{!v.accForm.Phone}"/> 
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <lightning:input label="Email" name="myemail" value="{!v.accForm.Email}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:select aura:id="PicklistId" label="Rating" name="myrating" value="{!v.accForm.Rating__c}">
                            <option value="" text="- None -" />
                            <aura:iteration items="{!v.Pick}" var="per">
                                <option value="{!per}" text="{!per}" />  
                            </aura:iteration>
                        </lightning:select>
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Save" onclick="{!c.saveModal}" />
                <lightning:button label="Save and New" onclick="{!c.saveNewModal}" />
                <lightning:button label="close" onclick="{!c.closeNewModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:
({
    doInit : function(component, event, helper){
        var action = component.get("c.getPicklist");
        var percent = component.find("PicklistId");
        var opts=[];
        action.setCallback(this, function(response) {
            var allValues = response.getReturnValue();
            console.log('allValues -- >> ' + allValues);
            component.set("v.Pick", allValues);
        });
        $A.enqueueAction(action); 
    },
    
    newPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
    },
    
    saveModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();
                var cmpTarget = component.find('Modalbox1');
                var cmpBack = component.find('Modalbackdrop');
                $A.util.removeClass(cmpBack,'slds-backdrop--open');
                $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
                
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeNewModal : function(component, event, helper){
        component.set("v.accForm",{'LastName':''});
        var cmpTarget = component.find('Modalbox1');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    },
    
    saveNewModal : function(component, event, helper){
        var regForm = component.get("v.accForm");
        var rid = component.get("v.recordId");
        var action = component.get("c.saveDetails");
        action.setParams({regForm1  : regForm, recordId : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();          
            if (state === "SUCCESS") {
                //Do Something
                component.set("v.accForm",{'LastName':''});
            }
            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(response.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

CSS:
.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex:
public class ContactModalOnAcc {

    @AuraEnabled
    public static List<String> getPicklist(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Contact.Rating__c.getDescribe();
        System.debug('fieldResult---->>> ' + fieldResult);
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        System.debug('pList---->>> ' + pList);
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        System.debug('options---->>> ' + options);
        return options;
    }
    
    @AuraEnabled
    public static void saveDetails (Contact regForm1, String recordId){ 
        regForm1.AccountId = recordId;
        INSERT regForm1;
    }
}

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas
This was selected as the best answer
@ M  Coder@ M Coder
@Thanks Alot Anas Bhai , can upou please send me a test email with yourname and phone number , i want to contact you . this is my email id salesforceseekar@gmail.com
Jecrc UniversityJecrc University
@Khan Anas : Save and new button is not working properly. can you please check and revert