[SalesForce] Save form – Lightning component

I'm trying to save custom object's records using lightning component , the form contain lookup fields ( multi select records ) , i have developed a LC to be able to select multi records on custom object's lookup field

Code :

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" controller="SaveFormVisitReport" >
<aura:attribute name="recordId" type="String" />
<aura:attribute name="selectedLookUpRecords" type="Contact" default="[]"/>
<aura:attribute name="selectedLookUpRecords1" type="User" default="[]"/>
<aura:attribute name="newRecord" type="Visit_Report__c" default="{ 'sobjectType': 'Visit_Report__c',                                                                      'Visit_Type__c':'',                                                                        'Contact__c':'',                                                                        'User__c':'',                                                                       'Account__c':'',                                                                       'Comments__c':''}"/>
<lightning:recordEditForm objectApiName="Visit_Report__c">
<lightning:messages />
<lightning:inputField fieldName="Visit_Type__c" aura:id="type"/>   
<lightning:inputField fieldName="User__c" aura:id="user"/> 
<c:reUsableMultiSelectLookup objectAPIName="Contact"
                               IconName="standard:contact"
                               lstSelectedRecords="{!v.selectedLookUpRecords}"
                               label="Contact Name" aura:id="cont"/>
<c:reUsableMultiSelectLookup objectAPIName="User"
                               IconName="standard:User"
                               lstSelectedRecords="{!v.selectedLookUpRecords1}"
                               label="Assigned to" aura:id="user"/> 
<lightning:inputField fieldName="Account__c" aura:id="acc"/> 
<lightning:inputField fieldName="Comments__c" aura:id="comm"/>
<lightning:button
                class="slds-m-top_small"
                type="submit"
                label="Create new">
</lightning:button>
</lightning:recordEditForm>
</aura:component

>
Form :

enter image description here

Results:

enter image description here

Any suggestion on how to solve this issue ? should i develop custom controller?

Thanks in advance,

Best Answer

As @sfdcfox has suggested, first you need to create a submit handler, so modify the lightning:recordEditForm element to include onsubmit like this:

<lightning:recordEditForm aura:id="myform" objectApiName="Visit_Report__c" onsubmit="{!c.handleSubmit}">

You then need to extract values from your selected Contacts and Users and assign these values to fields of your Visit_Report__c SObject, which you can do by making your handler function like this:

   handleSubmit: function (component, event) {
        event.preventDefault();

        const fields = event.getParam('fields');
        fields.Contact__c = component.get('v.selectedContacts')[0].Id;
        fields.User__c = component.get('v.selectedUsers')[0].Id;

        component.find('myform').submit(fields);
    }

Note, there is an important limitation to this solution: You can only assign a single value from your reUsableMultiSelectLookup components to the existing fields on the Visit_Report__c SObject.

Since you want a multiselect, you probably want/need somewhere to put the remaining values. One possibility would be to reverse the relationships such that the Contacts and Users are the parents instead of the children, but offhand I don't know whether you'd be able to update the parents using lightning:recordEditForm. Also, depending upon your use case, you might actually want/need some junction sobjects, and I'm pretty sure you would need to take a different approach to saving your data if you need to create a collection of junctions objects every time you save this form.

If your comment field is large enough (or you create another text field), you could squirrel all your Ids into the text field in some structured format and then use an Apex trigger on Visit_Report__c to create the appropriate relations on the server side, but at that point it would probably be better to use an Apex controller more specific to this form instead.

Related Topic