1

I have a lightning component in which I am trying to open up a child record in edit mode in a modal popup using $A.createComponent and calling force:recordEdit.This lightning component is added as a separate tab on the Lightning page of the parent object where I pass the child record id to $A.createComponent.

The issue here is that even before the $A.createComponent completes the rendering of the child record details in the modal popup, the modal popup gets displayed with the header but with an empty body.But as soon as the force:recordEdit is complete, the popup comes up correctly.

Below is the image when user clicks on edit:

enter image description here

Below is the complete popup which comes up correctly after rendering is complete:

enter image description here

Below is the javascript controller method in which I have explicitly made sure that the modal popup gets displayed only when the callback is executed and has state='SUCCESS':

onSingleSelectChange: function(component, event, helper) {

    var operation = event.getSource().get("v.value");
    //alert('operation is '+operation);

    var resource = event.getSource().get("v.label");
    var recId = resource[0].fId;

         //alert('record id is '+recId);

         if(operation == 'Edit'){

            component.set("v.BookingId",recId);         

            $A.createComponent('force:recordEdit',
            {        
              'aura:id': 'edit',
              'recordId': recId
            },
           function(edit, status, errorMessage){


           if (status === "SUCCESS") {

           alert('testing');

           component.set('v.edit', edit);
           component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:0} ");
           component.set("v.showBookingModal",true);

           }
           }
           );


         }

         else if(operation == 'Delete'){

            component.set("v.BookingId",recId);
            component.set("v.showConfirmDelete",true);

            component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:0} ");       

         }



     },

Ideally the popup should be displayed only when the force:recordEdit is complete and we have state='SUCCESS'.I am really not sure what I am missing here.Please help.

Improve this question

2 Answers 2

Reset to default
0

Not sure why you opted for $A.CreateComponent. You can try calling the record edit by firing an event in your java script controller.

var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": component.get("v.contact.Id")
});
editRecordEvent.fire();

This can save you from rendering issues.

Improve this answer
1
  • The $A.createComponent was used because I have to override the save button functionality , once someone edits and saves the record.On hitting save, the component has to be reloaded to show the updated record and the detail tab of the parent record needs to be refreshed to show values in the rollup fields accordingly.( there are rollup fields on the parent record which will be updated once someone edits the record). I was unable to do the above using the force:recordEdit event.
    – Abhijeet
    Jun 8, 2018 at 15:53
0

I was able to perform a workaround according to the below post:

Opening a modal with force:recordEdit throws "Invalid Record Id or Record not accessible," but then it works?

I used the setTimeout() to wait for 1000 milliseconds so that force:recordEdit component gets sometime to get initialized.Meanwhile, till it gets loaded, the modal popup remains hidden using slds-hide class.Below is the snippet of the workaround:

setTimeout(function()
{ 
    var ec = component.find("recordTypeModal");
    $A.util.removeClass(ec, 'slds-hide');
}, 1000);
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .