0

html code

<lightning-card>
    <h3 slot="title">
        <lightning-icon icon-name="standard:record" size="small"></lightning-icon>
        Create Patient Record
    </h3>
    <div slot="footer">
        <lightning-button label="Create Record" onclick={handleClick} variant="brand"></lightning-button>
    </div>
    <p class="slds-p-horizontal_small">
        <lightning-input type="text" label="Patient Name" value={patientRecord.Name} onchange={handleNameChange}></lightning-input>
        <lightning-input type="text" label="Age" value={patientRecord.Age} onchange={handleAgeChange}></lightning-input>
        <lightning-input type="text" label="Gender" value={patientRecord.Gender} onchange={handleGenderChange}></lightning-input>
        <lightning-input type="text" label="Phone" value={patientRecord.Phone} onchange={handlePhoneChange}></lightning-input>
        <lightning-input type="text" label="Email" value={patientRecord.Email} onchange={handleEmailChange}></lightning-input>
        <lightning-input type="text" label="Address" value={patientRecord.Address} onchange={handleAddressChange}></lightning-input>
        <lightning-input type="text" label="State" value={patientRecord.State} onchange={handleStateChange}></lightning-input>
    </p>
</lightning-card>

js code

import { LightningElement, track} from 'lwc';
import Name_field from '@salesforce/schema/Patient__c.Name';
import Age_field from '@salesforce/schema/Patient__c.Age__c';
import Gender_field from '@salesforce/schema/Patient__c.Gender__c';
import Phone_field from '@salesforce/schema/Patient__c.Phone__c';
import Email_field from '@salesforce/schema/Patient__c.Email_ID__c';
import Address_field from '@salesforce/schema/Patient__c.Address__c';
import State_field from '@salesforce/schema/Patient__c.State__c';

import createPatient from '@salesforce/apex/CreatePatient.createPatientRecord';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CreateRecordWithFieldIntigrity extends LightningElement {

    @track patientId;
    @track error;

    @track patientRecord = {
        Name : Name_field,
        Age : Age_field,
        Gender : Gender_field,
        Phone : Phone_field,
        Email : Email_field,
        Address : Address_field,
        State : State_field 
    };

    handleNameChange(event) {
        this.patientRecord.Name = event.target.value;
    }
    
    handleAgeChange(event) {
        this.patientRecord.Age = event.target.value;
    }

    handleGenderChange(event) {
        this.patientRecord.Gender = event.target.value;
    }

    handlePhoneChange(event) {
        this.patientRecord.Phone = event.target.value;
    }

    handleEmailChange(event) {
        this.patientRecord.Email = event.target.value;
    }

    handleAddressChange(event) {
        this.patientRecord.Address = event.target.value;
    }

    handleStateChange(event) {
        this.patientRecord.State = event.target.value;
    }


    handleClick() {
        createPatient({pat:this.patientRecord})
        .then(result => {
            this.patientRecord = {};
            this.patientId = result.Id;
            const toastEvent = new ShowToastEvent({
                title:'Success!',
                message:'Patient record is created Successfully!',
                variant:'success'
            });
            this.dispatchEvent(toastEvent);
        })
        .catch(error =>{
            this.error = error.message;

        });
    }
}

apex

public with sharing class CreatePatient {

    @AuraEnabled
    public static Patient__c createPatientRecord(Patient__c pat){
        try {
            insert pat;
            return pat;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}
1
  • You can use record-form to create record, it will be easier approach. You can use API name directly when assigning values to field. Name field is populating because API name is same as you object key. You can remove import lines for field and directly use - ` this.patientRecord.Age__c = event.target.value;` Oct 20, 2022 at 10:51

3 Answers 3

1

You can modify your code to use the single handle change method.

import { LightningElement, track} from 'lwc';
import createPatient from '@salesforce/apex/CreatePatient.createPatientRecord';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CreateRecordWithFieldIntigrity extends LightningElement {

    @track patientId;
    @track error;

    @track patientRecord = {};

    handleNameChange(event) {
        this.patientRecord.Name = event.target.value;
    }
    
    handleAgeChange(event) {
        this.patientRecord.Age__c = event.target.value;
    }
    /* similarly other fields can be mentioned as above or you can use single handleChange method */

  
    handleClick() {
        createPatient({pat:this.patientRecord})
        .then(result => {
            this.patientRecord = {};
            this.patientId = result.Id;
            const toastEvent = new ShowToastEvent({
                title:'Success!',
                message:'Patient record is created Successfully!',
                variant:'success'
            });
            this.dispatchEvent(toastEvent);
        })
        .catch(error =>{
            this.error = error.message;

        });
    }
}
0

To use the field tokens, you have to actually use them as tokens; you can't assign those values to properties and expect them to work this way.

fieldNames = {
  Name: Name_field.fieldApiName,
  Age: Age_field.fieldApiName,
  Gender: Gender_field.fieldApiName,
  Phone: Phone_field.fieldApiName,
  Email: Email_field.fieldApiName,
  Address: Address_field.fieldApiName,
  State: State_field.fieldApiName,
};
patientRecord = {
  [Name_field.fieldApiName]: "",
  [Age_field.fieldApiName]: "",
  [Gender_field.fieldApiName]: "",
  [Phone_field.fieldApiName]: "",
  [Email_field.fieldApiName]: "",
  [Address_field.fieldApiName]: "",
  [State_field.fieldApiName]: "",
};

<lightning-input type="text" label="Patient Name" name={fieldNames.Name} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="Age" name={fieldNames.Age} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="Gender" name={fieldNames.Gender} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="Phone" name={fieldNames.Phone} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="Email" name={fieldNames.Email} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="Address" name={fieldNames.Address} onchange={handleChangeEvent}></lightning-input>
<lightning-input type="text" label="State" name={fieldNames.State} onchange={handleChangeEvent}></lightning-input>

As far as the onchange handler, you can write a generic one, like this:

handleChangeEvent(event) {
  this.patientRecord[event.target.name] = event.target.value;
}

This way, you only need one method, instead of one method per field.

0

In addition to Gaurav Suthar comment. Since Spring 20 release, the @track decorator is no longer required anymore to lwc attributes.

You must log in to answer this question.

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