Insert Account Record using Accordion in Lightning Component

By | November 11, 2019

Hi, In this scenario we have shown the use of Accordion in Lightning & inserting data into sobject using Accordion Sections….

Apex Controller

public class AccountAccordionApex {
    @AuraEnabled
    public static void createRecord(Account accs){
        insert accs;
    }
}

Lightning Component

<aura:component controller="AccountAccordionApex" implements="force:appHostable,lightning:actionOverride,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="acc" type="Account" default="{'sobjectType' : 'Account'}" />
    
    <lightning:accordion activeSectionName="A">
        <lightning:accordionSection name="A" label="Account Information">
            <lightning:input label="Name" value="{!v.acc.Name}"/>
            <lightning:input label="Account Number" value="{!v.acc.AccountNumber}"/>
            <lightning:input label="Account Site" value="{!v.acc.Site}"/>            
        </lightning:accordionSection>
        
        <lightning:accordionSection name="B" label="Acc Information">
            <lightning:input label="Annual Revenue" value="{!v.acc.AnnualRevenue}"/>           
            <lightning:input label="Description" value="{!v.acc.Description}"/>
            <lightning:input label="Employees" value="{!v.acc.NumberOfEmployees}"/>
        </lightning:accordionSection>
        
        <lightning:accordionSection name="C" label="Mobile Information">
            <lightning:input label="Fax" value="{!v.acc.Fax}"/>
            <lightning:input label="Phone" value="{!v.acc.Phone}"/>
            <lightning:input label="Sic" value="{!v.acc.Sic}"/>            
        </lightning:accordionSection>
        <lightning:button label="Save" onclick="{!c.myAction}"/>
        
    </lightning:accordion>
</aura:component>

Js Controller

({
	myAction : function(component, event, helper) {
		var ac = component.get("v.acc");
        var action = component.get("c.createRecord");
        
        action.setParams({'accs': ac});
        action.setCallback(this,function(a){
        component.set('v.acc',a.getReturnValue());
            
        });
        $A.enqueueAction(action);
	}
})

Application

<aura:application  extends="force:slds">    
    <c:AccountAccordianInsert/>
</aura:application>

Output

Enter the date & click on save button, the data will be saved to sObject

Leave a Reply

Your email address will not be published. Required fields are marked *