import { LightningElement, track } from 'lwc'; export default class HelloLWC extends LightningElement { //default values @track typedValue = ''; salutationOptions = [ {'label': 'None', 'value': 'None'}, {'label': 'Mr.', 'value': 'Mr.'}, {'label': 'Ms.', 'value': 'Ms.'}, {'label': 'Mrs.', 'value': 'Mrs.'}, {'label': 'Dr.', 'value': 'Dr.'}, {'label': 'Prof.', 'value': 'Prof.'}, ]; //method on click of button handleClick(){ const txtInput = this.template.querySelector('.txtInput');//fetch the input value this.typedValue = txtInput.value;//show the value } }
Integrating VSCode with Salesforce
-
- Create sfdx project in vscode
-
- Launch VSCode > cmd+ shift+P > SFDX:Create Project with Manifest > Enter project Name > Enter
- Skelton sfdx prject is created
-
- Right click on manifest file > package.xml > SFDX: Reterieve source from Org
- Create lightning web component skeleton
-
- cmd+shift+p > SFDX:Create Lightning Web Component > type name of LWC (say helloLWC) > enter (select the default creation path)
-
- Add default LWC component from LWC library
- Take code for input box
- Take code for button
- Add the below code into helloLWC.html
<template> <div> My First salesforce LWC in VSCode </div> <section> <h2 class="slds-text-heading_medium slds-p-top_large"> Considerations </h2> <ul class="slds-list_dotted"> <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Have fun</li> <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Learn LWC</li> <li class="slds-m-horizontal_xx-small slds-m-bottom_x-small">Share your learning</li> </ul> <div> <lightning-input class='txtInput' label="TypeHere..." value={typedValue}></lightning-input> <lightning-button variant="brand" label="Submit" onclick={handleClick}> </lightning-button> </div> </section> <div> <p>{typedValue}!</p> </div> </template>
- Add the below code into helloLWC.js
import { LightningElement, track } from 'lwc'; export default class HelloWorld extends LightningElement { @track greeting = 'World'; changeHandler(event) { this.greeting = event.target.value; } }
- Add configuration settings, like where to show this component, inside helloLWC.meta.xml file. Read more about meta.xml file in LWC
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloLWC"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
- Deploy code to sandbox
- Right click lwc > SFDX: Deploy Source to Org
- Add Component to App in Lightning Experience
- Inside your sandbox, App launcher > Sales > gear icon > Edit Page > search
- Drag the given component to canvas
- Save and enjoy the latest added LWC component in sales app
- Inside your sandbox, App launcher > Sales > gear icon > Edit Page > search
- Create sfdx project in vscode
Keep learning and keep sharing