function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ryanschierholzryanschierholz 

LWC. Two buttons run very similar code. How can I simplify this?

I have two buttons on a Lightning Web Component on a record page. When each is clicked, the code they run is virtually identical, so I want to reuse the code as much as possible. However, I cannot figure out the best way to do it. I can pass the button name into the code, but when I try to put the "let record + fields" code into the switch or conditional if statements, it doesnt work. I need to pass a different field name into the 'let record' statement, depending on which button is pressed. 
 
handleActivateBuyerSide() {
        this.loading = true;
        
        let record = {
            fields: {
                Id: this.recordId,
                VirtualTCStatus_BuyerSide__c: 'Active',        
            },
        };
        updateRecord(record)
            // eslint-disable-next-line no-unused-vars
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record Is Updated',
                        variant: 'success',
                    }),
                );
                this.loading = false;

            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error on data save',
                        message: error.message.body,
                        variant: 'error',
                    }),
                );
                this.loading = false;

            });
    }
    handleActivateSellerSide() {
        this.loading = true;
        
        let record = {
            fields: {
                Id: this.recordId,
                VirtualTCStatus_SellerSide__c: 'Active',        
            },
        };
        updateRecord(record)
            // eslint-disable-next-line no-unused-vars
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record Is Updated',
                        variant: 'success',
                    }),
                );
                this.loading = false;

            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error on data save',
                        message: error.message.body,
                        variant: 'error',
                    }),
                );
                this.loading = false;

            });
    }

 
Best Answer chosen by ryanschierholz
Vladimir SaturaVladimir Satura
you can do switch on button name and have whole "let record + fields" in each statement (that part will be duplicated) and save at least 'updateRecord' part: 

let record;
switch(buttonName) {
  case button1:
record = { fields: { Id: this.recordId, VirtualTCStatus_BuyerSide__c: 'Active', }, };
    break;
  case button2:
record = { fields: { Id: this.recordId, VirtualTCStatus_SellerSide__c: 'Active', }, };
    break;
}
updateRecord(record).then....

All Answers

Vladimir SaturaVladimir Satura
you can do switch on button name and have whole "let record + fields" in each statement (that part will be duplicated) and save at least 'updateRecord' part: 

let record;
switch(buttonName) {
  case button1:
record = { fields: { Id: this.recordId, VirtualTCStatus_BuyerSide__c: 'Active', }, };
    break;
  case button2:
record = { fields: { Id: this.recordId, VirtualTCStatus_SellerSide__c: 'Active', }, };
    break;
}
updateRecord(record).then....
This was selected as the best answer
ryanschierholzryanschierholz
Thank you! My mistake was originally trying to put the whole 'let record = ...' statement into the switch statement case. putting 'let' on the outside and the definition on the inside was perfect. Thanks! 
Developpement Cap RetraiteDeveloppement Cap Retraite
@ryanschierholz
Hi ryanschierholz,
How did you get the button name into the code? I also want to reuse the code for 2 differents buttons.
ryanschierholzryanschierholz
I structured the buttons like this and set the name parameter: then I set the {handleActivate} to store the event target name and used a switch to handle the different results: handleActivate(event) { var side = event.target.name; switch(side){ case 'Buyer' : { this.buyerSide.IsInactive = false; break; } case 'Seller' : { this.sellerSide.IsInactive = false; break; } default : { break; } } }