0

I'm trying to prepopulate a field in a lightning web component to create new records and just not sure how to do it.

import { LightningElement} from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
    accountObject = ACCOUNT_OBJECT;
    nameField = NAME_FIELD;
    startDateField = STARTDATE_FIELD;
    myValue = new Date();

    handleAccountCreated(){
        // Run code when account is created.
    }
}

I've tried declaring var today = new Date(); and passing today in, but it just keeps returning nothing to the component on the page.

For good measure, here's the HTML

<template>
    <lightning-record-edit-form object-api-name={accountObject} onsuccess={handleAccountCreated}>
        <lightning-messages></lightning-messages>
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name={nameField}></lightning-input-field>
                <lightning-input-field field-name={startDateField} value={myValue}></lightning-input-field>
            </div>
         </div>
        <lightning-button type="submit" variant="brand" label="Create Account"></lightning-button>
    </lightning-record-edit-form>
</template>
1

You need to call the part of the field that the input field can understand. When you do an import from Schema you are pulling in a ridiculous amount of information about the field, not just the field name.

You will see if you log your imported variable that you have the full describe. Instead you need to store the fieldApiName piece of that import. See below:

import { LightningElement} from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
  accountObject = ACCOUNT_OBJECT;
  nameField = NAME_FIELD;
  startDateField = STARTDATE_FIELD;
  myValue = new Date();

  handleAccountCreated(){
     // Run code when account is created.
  }
}

and your HTML should be:

<template>
<lightning-record-edit-form object-api-name={accountObject.objectApiName} onsuccess={handleAccountCreated}>
    <lightning-messages></lightning-messages>
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name={nameField.fieldApiName}></lightning-input-field>
            <lightning-input-field field-name={startDateField.fieldApiName} value={myValue}></lightning-input-field>
        </div>
     </div>
    <lightning-button type="submit" variant="brand" label="Create Account"></lightning-button>
</lightning-record-edit-form>
</template>

One thing you should also understand is that your template in this state will throw an error that objectApiName could not found for undefined or fieldApiName could not be found for undefined.

This is going to be due to your import not being accessible during the construction of your template. This however will be available once the connectedCallback has been reached in the lifecycle. The easiest way to handle this is to set a rendered attribute on your HTML to then show your component once this has happened. Like this:

<template>
    <lightning-spinner if:false={rendered} size="small" alternative-text="loading..." variant="brand" ></lightning-spinner>
    <template if:true={rendered}>
        <lightning-record-edit-form object-api-name={accountObject.objectApiName} onsuccess={handleAccountCreated}>
            <lightning-messages></lightning-messages>
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field field-name={nameField.fieldApiName}></lightning-input-field>
                    <lightning-input-field field-name={startDateField.fieldApiName} value={myValue}></lightning-input-field>
                </div>
             </div>
            <lightning-button type="submit" variant="brand" label="Create Account"> </lightning-button>
         </lightning-record-edit-form>
    </template>
 </template>

your JS:

import { LightningElement, track } from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
  accountObject = ACCOUNT_OBJECT;
  nameField = NAME_FIELD;
  startDateField = STARTDATE_FIELD;
  myValue = new Date();
  @track rendered = false;

  connectedCallback(){
     this.rendered = true;
  }

  handleAccountCreated(){
     // Run code when account is created.
  }
}

Upon your form loading, you will see your spinner disappear, and your form will now be loaded and displaying the fields that you have imported.

| improve this answer | |
  • 1
    Thanks Ronnie, unfortunately the code changes you suggested still don't populate the Start Date field with today's date. I didn't have enough time to fully analyze your suggestions and try to adapt the code further, but when I do I'll post back. – AlwaysThinkin Feb 7 at 15:12
  • Once you get a chance to fully implement that and test it out, check back. I am sure we can sort this out – Ronnie Feb 7 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.