Button Click in LWC

Button Click in LWC

Please complete part 3 : helloWorld in LWC

In the helloWorld blog, we have seen how to use a variable (property) in JavaScript and display it on the HTML page.
To revise,

           To create a property in JS                         message = ‘helloWorld’
           To display a property in HTML               {message}

NOTE: The property in { } must be a valid JavaScript identifier or member expression.

Now let’s see how we can create actionable buttons and handle button click in LWC. 

Step 1: Create a new Lightning web component named as ‘buttonClick’ just like we did in helloWorld Example. 

Step 2: We will start by creating a function called handleClick() in our buttonClick.js file.


import { LightningElement } from 'lwc';

export default class ButtonClick extends LightningElement {

    handleClick(){
        alert('button is clicked');
        
        var pizza = {
            name	      : 'mozzarella' ,
            actiontoeat : function(){
                 console.log(this.name);
            }
        }
        
        pizza.actiontoeat();
    }

}

Step 3: In UI side, we will add our Button in buttonClick.html file using lightning-button tag.

<template>
    <lightning-card>
        
        <lightning-button onclick={handleClick} label="Click Me"></lightning-button>
        
    </lightning-card>
</template>
  1. To add onclick functionality to this button, we have added ‘onclick’ attribute to lightning-button tag and binded the JS function inside it.
  2. To bind the handleClick function to the template, we have used the same syntax, {handleClick}.

NOTE: Don’t add spaces around the property. 
for example,
{ handleClick } is not valid HTML.

Step 4: Setup buttonClick.js-meta.xml (Configuration) file, to defines the metadata values for the component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="buttonClick">
    <apiVersion>45.0</apiVersion>
	
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
	
</LightningComponentBundle>

Step 5: Deploy the component to your scratch org.
Right click on the buttonClick folder & select SFDX: deploy source to Org.

NOTE: If you do not found ‘SFDX: deploy source to org’ option. Perform the following steps (else you can skip to step 6). 

Step a: List your Dev Hub and scratch org’s using following command:

> sfdx force:org:list –all

This command lists all orgs that the Salesforce CLI has created or authenticated to.

Here (D) indicates to authenticated default Dev hub.
(U) indicates to active default scratch org. Make sure you have both (D)(U).

Step b : If you do not have authorized Dev hub. Authorize it as follows:

> sfdx force:auth:web:login

This command authorizes a Salesforce org by opening a browser so you can log in through salesforce.com.

Step c : If you do not have default Dev hub. Configure it as follows:

> sfdx force:config:set defaultdevhubusername=<user-name/alias>

This command sets the local and global configuration variables for the Salesforce CLI.

Step d : If you do not have default scratch org. Configure it as follows:

> sfdx force:config:set defaultusername=<user-name/alias>

This command sets the local and global configuration variables for the Salesforce CLI.

Try Again to right click on folder name and ‘Deploy the source to Org‘ 

Step 6: You can find the component in your org using Lightning app builder. Drag and drop it to use on your page.

We conclude this blog here. Hope you have started growing more interest in LWC scenario.
It’s time to move towards a very topic in JavaScript ‘THIS’ variable. 

Make sure to comment down below your reviews.

Till then,
Thanks for reading! & PEACE

(Visited 4,821 times, 6 visits today)

1 Reply to “Button Click in LWC

Leave a Reply