Lightning-Web-Components – How to Create a New Record and a Related Record Simultaneously

So, I have a situation where I'm using a junction object (JD_AOR__c) for many-to-many relationship between two other objects, Job_Decription__c and AOR__c. I'm making a lwc that sits on the Job_Description__c page – I want the user to be able to add a new AOR to the Job Description, which would require the backend to create a new AOR__c record, and then also create a JD_AOR__c record.

I'm pretty sure this would require apex, but I haven't been able to figure out exactly how to write it. Can someone here help me?

This is my HTML:

                    <lightning-record-edit-form object-api-name="AOR__c" onsubmit={handleSubmit_JDAOR} onsuccess={handleSuccess}>
                        <lightning-input-field field-name="Applies_To__c" value="Specific Roles" disabled></lightning-input-field>
                        <lightning-input-field field-name="Name"></lightning-input-field>
                        <lightning-input-field field-name="Description__c"></lightning-input-field>
                        <lightning-input-field field-name="Link_to_Documentation__c"></lightning-input-field>
                        <center>
                        <lightning-button 
                                          type="reset"
                                          label="Cancel"
                                          onclick={handleCancel_JDAOR}>
                        </lightning-button>
                        <lightning-button class="slds-p-left_small"
                                          type="submit"
                                          label="Submit"
                                          >
                        </lightning-button>
                        </center>
                    </lightning-record-edit-form>

This is my current JS, it only creates the AOR__c record though:

    handleSubmit_JDAOR(event) {
        event.preventDefault();
        const fields = event.detail.fields;
        createRecord({apiName: "AOR__c", fields})
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record created',
                        variant: 'success',
                    }),
                );
                return refreshApex(this.wiredJDAORsResult);   
            }).catch(error => {
                console.log(error);
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });

Best Answer

The question I ask is, does this require additional input from the user? Assuming that the answer in this case is no, the simple answer is to create a record in the Trigger.isAfter && Trigger.isInsert logic of your trigger. This will automatically create this added record by default, and you can control when it is being created. For example, you do not want to create if field_a__c == 'some value' or DO want to create when field_a__c == 'some other value'

If this requires some additional input and you need to submit with additional input from your users, you can use separate lightning-record-edit-form and use an external button as seen HERE to submit both forms in succession by chaining the form submissions in the onsuccess events in the order that you want by allowing the user to fill all appropriate details in advance and submit 1 time. lightning-record-form can be used as well, however you cannot hide the buttons within the form.

Related Topic