1

Similar to this question posted last year. I am calling the submit function from a lightning:recordEdit from the js controller. However, in my use case the form is creating a new record, and I now want to get the id of that record after it is created so the parent component can use it. The button for submitting/saving the record lives on the parent component.

As noted in the comments in the previously linked question, the onSubmit function does not get called when submitting in this way - how can I get the Id of the record that was created?

component code:

<lightning:recordEditForm
  aura:id="recordForm"
  recordId="{!v.recordId}"
  objectAPIName="My_Object__c"
  onSubmit="{!c.handleSubmit}">
    <lightning:inputField fieldName="Name" />
</lightning:recordEditForm>

my controller code:

var record = component.find('recordForm');
record.submit();

I've tried doing:

var record = component.find('recordForm');
var res = record.submit();

However res is undefined in this scenario.

1

When you create new record, you do not have record id before submit and so you cannot get it in onsubmit event. Instead you should be using onsuccess event.

You can use the same way to submit from linked question - no need to change that

update : function(component,event,helper) {
   component.find("editForm").submit();
}

Now, to get the created record id, you need to handle onsuccess event:

<lightning:recordEditForm
        onload="{!c.handleLoad}"
        onsubmit="{!c.handleSubmit}"
        onsuccess="{!c.handleSuccess}"

Now, in handleSuccess method, you can get id from event param:

handleSuccess: function(cmp, event, helper) {
    var params = event.getParams();
    cmp.set('v.recordId', params.response.id);
}

You can check documentation for further info.

  • 1
    One thing to note... the "onsubmit" doesn't actually fire when you call the submit of the form directly. And, unfortunately, onsubmit is the only way one can access the fields that are going to be submitted. The only way I've found to work around this is to have a hidden submit button within the form and call the click method of that submit button. – Chris Johnson Sep 11 at 13:05
  • @ChrisJohnson.. agreed, but onsuccess will always fire which will work for scenario in current question context - creation of new record – salesforce-sas Sep 11 at 13:21
  • Thanks for the quick answer. This works. Of course now I have the form validation part to worry about, but I think using the onclick method mentioned by @ChrisJohnson may work for that. Thanks! – Jason Benkert Sep 11 at 13:34
  • @ChrisJohnson do you have a snippet that provides a way to call .click() on a button in a lightning component? – Jason Benkert Sep 11 at 13:45
1

Jason, here is an example of field validation when using a button outside of the RecordEdit form.

Component Markup:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:recordEditForm objectApiName="Account"
                              recordId="0010V00002QteWtQAJ"
                              onsubmit="{!c.handleSubmit}">

        <lightning:messages />

        <lightning:inputField fieldName="Name" />
        <lightning:inputField fieldName="Website" />

        <button id="{!globalId + '_submit'}" type="submit" class="hidden_field"/>

    </lightning:recordEditForm>

    <lightning:button variant="brand" type="submit" name="save" label="Save" onclick="{!c.submitForm}"/>

</aura:component>

Controller:

({
    submitForm :  function(component, event, helper) {

        var globalId = component.getGlobalId();
        document.getElementById(globalId + '_submit').click();

    },
    handleSubmit : function(component, event, helper) {

        // Get the fields.
        var fields = event.getParam('fields');

        // List the fields.
        console.dir(JSON.parse(JSON.stringify(fields)));

        // Example verification...
        if (fields.Website == 'https://www.example.com') {
            console.log('Website is www.example.com... record not saved.')
            event.preventDefault();
        }

    }
})

CSS (this alternatively, this could be placed directly in the style attribute of the button):

.THIS .hidden_field {
    display:none;
}

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.