+ Start a Discussion
Debasish Paul 11Debasish Paul 11 

How to Insert new record using Lightning Component?

Hi,
  I have a Component showing the List of Records already inserted for an Object. In that Component one button is there called "New". I want after clicking on "New" another Modal Pop up will open where user can insert the new values of different fields of the object and can save it. After saving Pop up will close and the List of Record component will be refreshed with the new record addition details in a row along with previously inserted record details in Separate Rows of the Record List.
Hope I could able to make you undertsnad my problem. If you can please reply with Example.
Thanks,
Debasish.
Piyush Kumar 58Piyush Kumar 58
Hello, 

To Insert Record using Lightnig Component:-
<aura:component implements="force:appHostable" controller="AccountController">
<ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system.min.css"/>`<aura:attribute name="newAccount" type="Account"
     default="{ 'sobjectType': 'Account',
                     'Name': '',
                   }"/>
<div>
<form>
      <ui:inputText aura:id="AccountName" label="New Account Name"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAccount.Name}"
                    required="true"/>

<ui:button label="Submit" 
                   class="slds-button slds-button--neutral"
                   labelClass="label"
                   press="{!c.createAccount}"/>
          <ui:button label="Cancel" 
                   class="slds-button slds-button--neutral"
                   labelClass="label" press="{!c.Close}"/>
</form>
</aura:component >

client side controller for this component
({
  createAccount : function(component, event) {
    var newAcc = component.get("v.newAccount");
    var action = component.get("c.saveAccount");
    action.setParams({ 
        "acc": newAcc
    });
    action.setCallback(this, function(a) {
           var state = a.getState();
            if (state === "SUCCESS") {
                var name = a.getReturnValue();
               alert("hello from here"+name);
            }
        });
    $A.enqueueAction(action)
}
})
Now create a server side controller for insert account record on the Salesforce.
public with sharing class AccountController{
@AuraEnabled

public static Account saveAccount (Account acc) {

upsert acc;
return acc;
}
}

For more detail please have a look on this link:-https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/qs_aotp_app_customobj.htm

Thanks
Piyush Kumar

 
Debasish Paul 11Debasish Paul 11
Hi,
  Thanks for your reply Piyush. But I am getting following error:

Something has gone wrong. Cannot read property '$getActionDef$' of undefined.Please try again.

In gist my code is as below:

In PopupCmp.cmp
----------------------------
<input id="FDBugName" label="Name"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.FDBug.Name}"  
                    required="true"
                    />


In PoupCmpController.js
-------------------------------------
saveBugRecord : function(component, event, helper) {
    //component.set("v.FDBug", event.target.FDBug);
    debugger;
    var newBug = component.get("v.FDBug");
    console.log("FDBUG = " + newBug);
    helper.createBug(component, newBug);
}

In PopupCmpHelper.js
------------------------------------
({
createBug: function(component, newBug) {
    this.upsertBug(component, newBug, function(a) {
        var newBug = component.get("v.FDBug");
        newBug.push(a.getReturnValue());
        component.set("v.FDBug", newBug);
        //this.updateTotal(component);
      });
},
upsertBug : function(component, newBug, callback) {
    var action = component.get("c.saveFDBugRecord");
    action.setParams({ 
        "fdBugRecord": newBug
    });
    if (callback) {
      action.setCallback(this, callback);
    }
    $A.enqueueAction(action);
}
})

Can  you please help me identify what's the error?

Thanks,
Debasish.
Debasish Paul 11Debasish Paul 11
And in Controller Apex:

@AuraEnabled
    //public static FDBug__c saveFDBugRecord(FDBug__c fdBugRecord) {
    public static void saveFDBugRecord(FDBug__c fdBugRecord) {
        insert fdBugRecord;
        //return fdBugRecord;
    }
Piyush Kumar 58Piyush Kumar 58
Hello Debasish,

You can try like this it work fine for me.
 
({    
    createBug: function(component, newBug) {
        this.upsertBug(component, newBug, function(a) {
            var newBug = component.get("v.FDBug");
            newBug.push(a.getReturnValue());
            component.set("v.FDBug", newBug);
            //this.updateTotal(component);
          });
    },
    upsertBug : function(component, newBug, callback) {
       var action = component.get("c.saveFDBugRecord");
        action.setParams({ 
            "fdBugRecord": newBug
        });
        action.setCallback(this, function(a) {
               var state = a.getState();
                if (state === "SUCCESS") {
                    var name = a.getReturnValue();
                   alert("hello from here"+name);
                }
            });
        $A.enqueueAction(action)
    }
})

If this one helps you please mark it as a Solve or best that helps another..
Thanks.
 
Debasish Paul 11Debasish Paul 11
Hi Piyush, Thanks for your reply. But still I am getting the error: Something has gone wrong. Cannot read property '$getActionDef$' of undefined. Please try again. What might be the cause for this kind of error? What might be the root. In Google I found one link but according to that my Aura Controller class is Static. But still getting the error. Can anybody put some light? If you need to  see any specific portion of the code, please mention which portion you want to diagnose, I will paste that code in this blog. Any help will be appriciated. 

BTW, I am calling Insert popup Modal component from List of records Component and trying to return the control back to the List of record page after succesful save, where the List of record component will be refreshed with the new insertion value.

Mentioning specifically if CARLOS view this post, can you please put some light?

Thanks,
Debasish.
Piyush Kumar 58Piyush Kumar 58
Hello,
Try to put debugger and check where it was fail.
 
Arun Garg 9Arun Garg 9
Refer this link to insert record and display of Account using lightning component.
http://www.salesforceadda.com/2017/09/create-and-display-account-records.html
Hidayath ShaikHidayath Shaik
A form must be created to insert a Contact with Last Name, Email and Phone No as input fields us lightning.
Create lightning component
Code as below
Name:contactform

lightning component:-


<aura:component  controller="contactcontroller" >
    <aura:attribute name="newContact" type="Contact"  default="{ 'sobjectType': 'Contact',
                     'Last Name': '','Email':'','Phone':'',}"/>
    <form>
        
              <lightning:input aura:id="contactField" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
       <lightning:input aura:id="contactField" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
         <lightning:input aura:id="contactField" type="Phone"  value="{!v.newContact.Phone}"  Name="Phone" label="Phone"/>
        <lightning:button aura:id="contactField" label="Save Contact" onclick="{!c.savecontact}"/>
    </form>
</aura:component>


Client side controller(js controller):-

({
savecontact: function(component, event, helper) {
    var newcon = component.get("v.newContact");
    var action = component.get("c.save");
     action.setParams({ 
        "con": newcon
    });
     action.setCallback(this, function(a) {
           var state = a.getState();
            if (state === "SUCCESS") {
                var name = a.getReturnValue();
               alert("success");
            }
         else
         {
              alert("Failed");
         }
        });
    $A.enqueueAction(action)
}})



Server side controller

public   class contactcontroller {
     @AuraEnabled
    public static Contact save(contact con)
    {
     insert con;
        return con;
    }
}


Lightning application:-

<aura:application >
    <c:contactform/>
</aura:application>





User-added image
Hidayath ShaikHidayath Shaik
You have to write save method in server side controller. Regards, Shaik Hidayath Hussain ILP Associate TCS Ahmedabad Contact:9052821003