Creating a salesforce lightning web component in visual studio code – User friendly Tech help

import { LightningElement, track } from 'lwc';nnexport default class HelloLWC extends LightningElement {n    //default valuesn    @track typedValue = '';n    salutationOptions = [n        {'label': 'None', 'value': 'None'},n        {'label': 'Mr.', 'value': 'Mr.'},n        {'label': 'Ms.', 'value': 'Ms.'},n        {'label': 'Mrs.', 'value': 'Mrs.'},n        {'label': 'Dr.', 'value': 'Dr.'},n        {'label': 'Prof.', 'value': 'Prof.'},n    ];nn    //method on click of buttonn    handleClick(){n        const txtInput = this.template.querySelector('.txtInput');//fetch the input valuen        this.typedValue = txtInput.value;//show the valuen    }n}

n

Integrating VSCode with Salesforce 

n

    n

  1. n
      n

    1. Create sfdx project in vscoden
        n

      1. n
          n

        1. Launch VSCode > cmd+ shift+P > SFDX:Create Project with Manifest > Enter project Name > Enter
        2. n

        3. Skelton sfdx prject is created
        4. n

        n

      2. n

      n

      n

    2. n

    3. Right click on manifest file > package.xml > SFDX: Reterieve source from Org
    4. n

    5. Create lightning web component skeleton n
        n

      1. n
          n

        1. cmd+shift+p > SFDX:Create Lightning Web Component > type name of LWC (say helloLWC) > enter (select the default creation path)
        2. n

        n

      2. n

      n

      n

    6. n

    7. Add default LWC component from LWC libraryn
        n

      1. Take code for input box 
      2. n

      3. Take code for button
      4. n

      5. Add the below code into helloLWC.htmln
        n    n        My First salesforce LWC in VSCoden    n    n        

        n

        Considerations

        n

        n        

        n

          n

        • Have fun
        • n

        • Learn LWC
        • n

        • Share your learning
        • n

        n

        n        n            n            n            n        nn    n    n        
        {typedValue}!n n
      6. n

      7. Add the below code into helloLWC.jsn
        import { LightningElement, track } from 'lwc';nexport default class HelloWorld extends LightningElement {n    @track greeting = 'World';n    changeHandler(event) {n        this.greeting = event.target.value;n    }n}
      8. n

      9. Add configuration settings, like where to show this component, inside helloLWC.meta.xml file. Read more about meta.xml file in LWCn
        nn    45.0n      truen  n    lightning__AppPagen    lightning__RecordPagen    lightning__HomePagen  n
      10. n

      n

    8. n

    9. Deploy code to sandboxn
        n

      1. Right click lwc > SFDX: Deploy Source to Org
      2. n

      n

    10. n

    11. Add Component to App in Lightning Experiencen
        n

      1. Inside your sandbox, App launcher > Sales > gear icon > Edit Page > search
      2. n

      3. Drag the given component to canvas
      4. n

      5. Save and enjoy the latest added LWC component in sales app
      6. n

      n

    12. n

    n

  2. n

n

n

Keep learning and keep sharing

n

Was this article helpful?
YesNo

Similar Posts