+ Start a Discussion
Kartik BhallaKartik Bhalla 

I want to insert account record and contact record related to that account by clicking the single submit button in LWC & without using apex class. Please help

I hope u understand my question. Please help as I am very very new to Lightning web component. Is there any way to insert both these using uiRecordApi ???? if yes plz explain how.
Best Answer chosen by Kartik Bhalla
Abdul KhatriAbdul Khatri
Hi Kartik

Looks like you got to the right spot of thinking uiRecordApi. Here is a one way that I can think of you can use creating Account and Contact Record without Apex. Please make adjustment as per your need.

html
<template>
    <lightning-card title="Account Contact Creator Without Apex" icon-name="standard:record">
       <div class="slds-m-around_medium">
           <lightning-input label="First Name" onchange={handleChange} name="firstName" class="slds-m-bottom_x-small"></lightning-input>
           <lightning-input label="Last Name" onchange={handleChange} name="lastName" class="slds-m-bottom_x-small"></lightning-input>                      
           <lightning-input label="Company Name" onchange={handleChange} name="companyName" class="slds-m-bottom_x-small"></lightning-input>
           <lightning-input-address
                    address-label="Address"
                    street-label="Street"
                    city-label="City"
                    country-label="Country"
                    province-label="State"
                    postal-code-label="PostalCode"
                    street=""
                    city=""
                    country="US"
                    province=""
                    postal-code=""
                    onchange={handleAddressChange}
                    field-level-help="Help Text for inputAddress field" >
            </lightning-input-address>                                         
           <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
       </div>
    </lightning-card>
</template>

js
import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import BILLINGSTREET_FIELD from '@salesforce/schema/Account.BillingStreet';
import BILLINGCITY_FIELD from '@salesforce/schema/Account.BillingCity';
import BILLINGSTATE_FIELD from '@salesforce/schema/Account.BillingState';
import BILLINGPOSTALCODE_FIELD from '@salesforce/schema/Account.BillingPostalCode';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import MAILING_STREET_FIELD from '@salesforce/schema/Contact.MailingStreet';
import MAILING_CITY_FIELD from '@salesforce/schema/Contact.MailingCity';
import MAILING_STATE_FIELD from '@salesforce/schema/Contact.MailingState';
import MAILING_POSTALCODE_FIELD from '@salesforce/schema/Contact.MailingPostalCode';
import ACCOUNTID_FIELD from '@salesforce/schema/Contact.AccountId';

export default class AddAccountContactWithoutApex extends LightningElement {

    acctcon = {};

    handleChange(event){
        this.acctcon[event.target.name] = event.target.value;
    }

    handleAddressChange(event){
        this.acctcon["street"] = event.detail.street;
        this.acctcon["city"] = event.detail.city;
        this.acctcon["province"] = event.detail.street;
        this.acctcon["postalCode"] = event.detail.street;
    }

    createAccount() {
        var fields = {};
        fields[NAME_FIELD.fieldApiName] = this.acctcon["companyName"];
        fields[BILLINGSTREET_FIELD.fieldApiName] = this.acctcon["street"];
        fields[BILLINGCITY_FIELD.fieldApiName] = this.acctcon["city"];
        fields[BILLINGSTATE_FIELD.fieldApiName] = this.acctcon["province"];
        fields[BILLINGPOSTALCODE_FIELD.fieldApiName] = this.acctcon["postalcode"];              
        var recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
               fields = {};
                recordInput = {};
                fields[FIRST_NAME_FIELD.fieldApiName] = this.acctcon["firstName"];
                fields[LAST_NAME_FIELD.fieldApiName] = this.acctcon["lastName"];
                fields[ACCOUNTID_FIELD.fieldApiName] = account.id;
                fields[MAILING_STREET_FIELD.fieldApiName] = this.acctcon["street"];
                fields[MAILING_CITY_FIELD.fieldApiName] = this.acctcon["city"];
                fields[MAILING_STATE_FIELD.fieldApiName] = this.acctcon["province"];
                fields[MAILING_POSTALCODE_FIELD.fieldApiName] = this.acctcon["postalcode"];                            
                recordInput = { apiName: CONTACT_OBJECT.objectApiName, fields };
                createRecord(recordInput)
                    .then(contact => {
                        console.log('contact : ' + JSON.stringify(contact));
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Success',
                                message: 'Account Contact created',
                                variant: 'success',
                            }),
                        );

                    })
                    .catch(error => {
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Error creating record',
                                message: error.body.message,
                                variant: 'error',
                            }),
                        );                        

                    });
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }

}

I hope this will help

All Answers

Abdul KhatriAbdul Khatri
Hi Kartik

Looks like you got to the right spot of thinking uiRecordApi. Here is a one way that I can think of you can use creating Account and Contact Record without Apex. Please make adjustment as per your need.

html
<template>
    <lightning-card title="Account Contact Creator Without Apex" icon-name="standard:record">
       <div class="slds-m-around_medium">
           <lightning-input label="First Name" onchange={handleChange} name="firstName" class="slds-m-bottom_x-small"></lightning-input>
           <lightning-input label="Last Name" onchange={handleChange} name="lastName" class="slds-m-bottom_x-small"></lightning-input>                      
           <lightning-input label="Company Name" onchange={handleChange} name="companyName" class="slds-m-bottom_x-small"></lightning-input>
           <lightning-input-address
                    address-label="Address"
                    street-label="Street"
                    city-label="City"
                    country-label="Country"
                    province-label="State"
                    postal-code-label="PostalCode"
                    street=""
                    city=""
                    country="US"
                    province=""
                    postal-code=""
                    onchange={handleAddressChange}
                    field-level-help="Help Text for inputAddress field" >
            </lightning-input-address>                                         
           <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
       </div>
    </lightning-card>
</template>

js
import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import BILLINGSTREET_FIELD from '@salesforce/schema/Account.BillingStreet';
import BILLINGCITY_FIELD from '@salesforce/schema/Account.BillingCity';
import BILLINGSTATE_FIELD from '@salesforce/schema/Account.BillingState';
import BILLINGPOSTALCODE_FIELD from '@salesforce/schema/Account.BillingPostalCode';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import MAILING_STREET_FIELD from '@salesforce/schema/Contact.MailingStreet';
import MAILING_CITY_FIELD from '@salesforce/schema/Contact.MailingCity';
import MAILING_STATE_FIELD from '@salesforce/schema/Contact.MailingState';
import MAILING_POSTALCODE_FIELD from '@salesforce/schema/Contact.MailingPostalCode';
import ACCOUNTID_FIELD from '@salesforce/schema/Contact.AccountId';

export default class AddAccountContactWithoutApex extends LightningElement {

    acctcon = {};

    handleChange(event){
        this.acctcon[event.target.name] = event.target.value;
    }

    handleAddressChange(event){
        this.acctcon["street"] = event.detail.street;
        this.acctcon["city"] = event.detail.city;
        this.acctcon["province"] = event.detail.street;
        this.acctcon["postalCode"] = event.detail.street;
    }

    createAccount() {
        var fields = {};
        fields[NAME_FIELD.fieldApiName] = this.acctcon["companyName"];
        fields[BILLINGSTREET_FIELD.fieldApiName] = this.acctcon["street"];
        fields[BILLINGCITY_FIELD.fieldApiName] = this.acctcon["city"];
        fields[BILLINGSTATE_FIELD.fieldApiName] = this.acctcon["province"];
        fields[BILLINGPOSTALCODE_FIELD.fieldApiName] = this.acctcon["postalcode"];              
        var recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
               fields = {};
                recordInput = {};
                fields[FIRST_NAME_FIELD.fieldApiName] = this.acctcon["firstName"];
                fields[LAST_NAME_FIELD.fieldApiName] = this.acctcon["lastName"];
                fields[ACCOUNTID_FIELD.fieldApiName] = account.id;
                fields[MAILING_STREET_FIELD.fieldApiName] = this.acctcon["street"];
                fields[MAILING_CITY_FIELD.fieldApiName] = this.acctcon["city"];
                fields[MAILING_STATE_FIELD.fieldApiName] = this.acctcon["province"];
                fields[MAILING_POSTALCODE_FIELD.fieldApiName] = this.acctcon["postalcode"];                            
                recordInput = { apiName: CONTACT_OBJECT.objectApiName, fields };
                createRecord(recordInput)
                    .then(contact => {
                        console.log('contact : ' + JSON.stringify(contact));
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Success',
                                message: 'Account Contact created',
                                variant: 'success',
                            }),
                        );

                    })
                    .catch(error => {
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Error creating record',
                                message: error.body.message,
                                variant: 'error',
                            }),
                        );                        

                    });
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }

}

I hope this will help
This was selected as the best answer
nazeem changlnazeem changl
Thank you! I am an IT expert at https://www.kingmarketing.pk and had similar problem
Kartik BhallaKartik Bhalla
Hi Abdul, 

Thank you sir for the answer. Your answer made my day. Just want to ask one more thing that from where should I start learning about Lightning Web Component. I'm confused as there are lot of things to learn. Thanks in advance.
Mukesh Kumar 470Mukesh Kumar 470
create a LWC component to show EmailStatus.

There is an object named as email status show that in LWC



please help me