1

My requirement is something like this:

  1. There is a create account button which creates a new account based on 'Name' input field in the lightning card.
  2. Once I click on this button, another button to create child contact appears, which when clicked, presents me with a list of input fields and a save contact button.

My account is getting created, but for some reason, the contact is not. Can you please help me to identify the mistake? I am still in a very beginner phase of LWC.

Thanks

<template>
<lightning-card title="Create Account">
    <lightning-input
            label="Name"
            onchange={handleNameChange}
            class="slds-var-m-bottom_x-small">
    </lightning-input>

    <lightning-button label="New Account" onclick={handleNewAccount}></lightning-button>
    <template if:true={showChildButton}>
        <lightning-button label="New Contact" onclick={handleNewContact}></lightning-button>
    </template>
</lightning-card>
<template if:true={showContactForm}>
    <lightning-card title="New Contact">
        <div class="slds-m-around_medium">
            <lightning-input label="First Name" value={contactFields.FirstName} onchange={handleFieldChange}></lightning-input>
            <lightning-input label="Last Name" value={contactFields.LastName} onchange={handleFieldChange}></lightning-input>
            <lightning-input label="Email" type="email" value={contactFields.Email} onchange={handleFieldChange}></lightning-input>
        </div>
        <div class="slds-m-around_medium">
            <lightning-button label="Save" onclick={handleSaveContact}></lightning-button>
        </div>
    </lightning-card>
</template>

import { LightningElement, track, api } 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 CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class AccountCreation extends LightningElement {

    name='';

    @track showChildButton = false;
    @track showContactForm = false;
    @api accountId;
    @track contactFields = { AccountId: '', FirstName: '', LastName: '', Email: '' };

    handleNameChange(event) {
       // this.accountId = undefined;
        this.name = event.target.value;
    }

    handleNewAccount() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.name;
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
                this.accountId = account.id;
                this.showChildButton = true;

                const toastEvent = new ShowToastEvent({
                    title: 'Success!',
                    message: 'New account record created',
                    variant: 'success'
                });
                this.dispatchEvent(toastEvent);
            })
            .catch(error => {
                console.error(error);
            });
    }

    handleNewContact() {
        this.contactFields.AccountId = this.accountId;
        this.showContactForm = true;
    }

    handleFieldChange(event) {
        //const field = event.target.label;
        //const value = event.target.value;
        //this.contactFields[field] = value;

        this.contactId = undefined;

        if (event.target.label==='First Name')
        {
            this.contactFields.FirstName= event.target.value;
        }

        else if (event.target.label==='Last Name')
        {
            this.contactFields.LastName = event.target.value;
        }

        else if (event.target.label==='Email')
        {
            this.contactFields.Email = event.target.value;
        }
    }

    handleSaveContact() {
        const fieldsContact = this.contactFields;
        const recordInput = { apiName: CONTACT_OBJECT.objectApiName, fieldsContact };
        createRecord(recordInput)
            .then(contact => {
                this.contactId = contact.id;
                //console.log(contact);
                this.showContactForm = false;

                const toastEvent = new ShowToastEvent({
                    title: 'Success!',
                    message: 'New contact record created',
                    variant: 'success'
                });
                this.dispatchEvent(toastEvent);

            })
            .catch(error => {
                console.error(error);
            });
    }
}

1 Answer 1

0

Your input is incorrect, it should be:

const fields = this.contactFields;
const recordInput = { apiName: CONTACT_OBJECT.objectApiName, fields };

See this document (UI API RecordInput) for more information on the required structure.

You must log in to answer this question.

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