+ Start a Discussion
Vyasar GulVyasar Gul 

How to create a LWC to edit 5 fields with one button?

Hello folks, 

I am new to Salesforce development. I have not created a LWC before. I am tasked with creating a LWC that will update 5 fields at one time on the Account object if the record meets a certain criteria (or else it's disabled). The values are preset, so they can be hardcoded. Can you please give me pointers on how to go about doing this? An outline would suffice, I have just created a shell of a LWC that has the button and the labels. I want to know where does the conditional logic go to make this LWC appear/disappear and other things I have to keep in mind. 

 

Thank you.

Best Answer chosen by Vyasar Gul
CharuDuttCharuDutt
Hii Vyasar Gul
Try The Below Code
LWC

<lightning-record-edit-form record-id="Please Insert Record Id From Your ORG of Account Object"
                                object-api-name="Account">
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-field>
        <lightning-input-field field-name="Name" value={nameVal} name="Acname" onchange={handleChange}>
        </lightning-input-field>
        <lightning-input-field field-name="Rating" value={ratingVal} name="rate" onchange={handleChange}>ail
        </lightning-input-field>
        <lightning-input-field field-name="Industry" name="industry" value={industryVal} onchange={handleChange}>
        </lightning-input-field>
        <template if:true={hideBtn}>
        <lightning-button
            class="slds-m-top_small"
            variant="brand"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </template>
    </lightning-record-edit-form>


JS

 nameVal;
  ratingVal;
  industryVal;
  accountId;
  hideBtn= false;
  handleSuccess(event) {
      this.accountId = event.detail.id;
  }
  handleChange(event){
    var fieldname = event.target.name;
   if(fieldname == 'Acname'){
     this.nameVal= event.target.value;
   }
  else if(fieldname == 'rate'){
    this.ratingVal = event.target.value;
  }else if (fieldname == 'industry'){
    this.industryVal = event.target.value;
  }


  if(this.nameVal== 'test' && this.ratingVal == 'Hot' && this.industryVal =='Agriculture'){
    this.hideBtn = true;
  }else{
    this.hideBtn = false;
  }
  }
Please Mark It As Best Answer If It Helps
Thank You!

 

All Answers

CharuDuttCharuDutt
Hii Vyasar Gul
Try The Below Code
LWC

<lightning-record-edit-form record-id="Please Insert Record Id From Your ORG of Account Object"
                                object-api-name="Account">
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-field>
        <lightning-input-field field-name="Name" value={nameVal} name="Acname" onchange={handleChange}>
        </lightning-input-field>
        <lightning-input-field field-name="Rating" value={ratingVal} name="rate" onchange={handleChange}>ail
        </lightning-input-field>
        <lightning-input-field field-name="Industry" name="industry" value={industryVal} onchange={handleChange}>
        </lightning-input-field>
        <template if:true={hideBtn}>
        <lightning-button
            class="slds-m-top_small"
            variant="brand"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </template>
    </lightning-record-edit-form>


JS

 nameVal;
  ratingVal;
  industryVal;
  accountId;
  hideBtn= false;
  handleSuccess(event) {
      this.accountId = event.detail.id;
  }
  handleChange(event){
    var fieldname = event.target.name;
   if(fieldname == 'Acname'){
     this.nameVal= event.target.value;
   }
  else if(fieldname == 'rate'){
    this.ratingVal = event.target.value;
  }else if (fieldname == 'industry'){
    this.industryVal = event.target.value;
  }


  if(this.nameVal== 'test' && this.ratingVal == 'Hot' && this.industryVal =='Agriculture'){
    this.hideBtn = true;
  }else{
    this.hideBtn = false;
  }
  }
Please Mark It As Best Answer If It Helps
Thank You!

 
This was selected as the best answer
Vyasar GulVyasar Gul

Charu Dutt, 

 

Thanks a ton for the code! This was really helpful. I don't really need to display the fields on the component. I just need to show the button which will update fields in the background. Do I need to even mention them in HTML in that case? 

CharuDuttCharuDutt
Hii Vyasar Gul

I Think Yes It Is nesessary To Mention Them In The Component

Please Mark It As Best Answer If it Helps So It Can Help Others In Future.And It Motivates us To Give More In Community
Thank You!