Saturday 15 December 2018

Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org

LWC

Lightning Web Components are announced as part of Spring19 pre-release. Welcome in Lightning Web Components Worlds. In this post we will talk about what is Lightning web component (LWC), why lightning web component and how to very first lightning web component.

What is Lightning Web Component :-

Lightning Web Components is a new framework for building Lightning components. For Lightning Web Components development you need to setup SalesforceDX and VsCode as Lightning web component are currently not available in Developer console. If you want to know more about lightning web component please check our webinar recording of "Introduction to Lightning Web Components". In ApexHours Session we covered all below topic :-
  1. Why Lightning Web Component (LWC)
  2. Part 1 – Vanilla HTML5 Web Components
    • Benefits of Web Component
    • Pillars of Web Component
    • Demo of Custom Element and Templating 
  3. Part 2 – Lightning Web Component
    • Hello World
    • Demo of Lifecycle methods
    • Call Apex Class
    • Access Custom Label
    • Lightning Data Services
    • Communication between Lightning Component and LWC
 Here is recording of session:-
https://www.youtube.com/watch?v=KKNEpPP6V4s&t=40s


Let see how to create very First Lightning Web Component.

 

Step 1) Setup SalesforceDX with VSCode.

  1. Download and Setup Salesforce CLI.
  2. Download and Install Salesforce VsCode.
  3. Install required Extension 
    1. Salesforce Extension Pack 
    2. Salesforce Lightning Web Components Salesforce Extension Pack

Step 2) Create SalesforceDx Project

1) Create Project:  
In our last post we talk about how to use SalesforceDx with non-scratch org. We will use same approch here. Press "CTRL+SHIFT+P" then select  "SFDX:Create Project with Manifest"
Then enter project and select folder.

2) Authorize your org :
Press "CTRL+SHIFT+P" then select  "SFDX: Authorize an Org"


Step 3) Finally Create your first Lightning Web Component

  • Press CTRL+SHIF+P then Type Web Component and then select "SFDX: Create Lightning Web Component"
  • Then Select Folder where you want to save your LWC component
  • Then provide Component Name.
  • Verify your components under lwc folder.
LWC Folder

Step 4) Lets do some coding


Lets create one very simple lightning component with HelloWorld :)

HelloWorld.html
<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
    </lightning-card>
</template>

HelloWorld.js
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

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

Step 5) Deploy your component in Org.

Once you are done with coding. Select LWC folder and right click on same then from menu select "SFDX: Deploy Source to Org".

SFDX: Deploy Source to Org

Step 6) Verify your Changes with App Builder.


Open your app builder and add your Custom Component on page/App

app builder

Here is your first Lightning Web Component.

HelloWorld LWC components


NOTE:- Make sure Domain is enable in your Org. Else Custom Component will not visible in app builder.

I just record all this step in on Recording and posted same YouTube. Here is recording.

https://www.youtube.com/watch?v=V_riFQU5iNA


We also did one session on LWC best Practice with "René Winkelmeyer". Please check this recording to learn more about Lwc.


Please check below post on Lightning Web Components:-
Further Reading:
  1.  https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components


Check our YouTube Channel for more recording in Lightning Web Components.

Thanks,
Amit Chaudhary
amit.salesforce21@gmail.com


43 comments:

  1. HI amith,
    I created one sample lightning web component and deploy to my org this component is showing in below screenshot
    but it's not showing in lightning app builder i already emaple domian
    https://rassas-dev-ed.lightning.force.com/lightning/r/Contact/003B000000EI9KOIA1/view
    Can your please help me on this.

    ReplyDelete
  2. You need to update your xml file


    lightning__AppPage
    lightning__RecordPage
    lightning__HomePage

    ReplyDelete
  3. Hi Amith,

    This helloworld custom component is not visible in lightning app builder. I have also enabled My domain in my org.
    Can your please help me on this.

    ReplyDelete
    Replies
    1. Please this recording https://www.youtube.com/watch?v=V_riFQU5iNA

      Delete
  4. Did you added isExposed = true in your meta.xml file ? And add target tag with lightning__AppPage

    ReplyDelete
  5. Hey Amit,I need your urgent help,in which metadata LWC comes under?So for Aura we have AuraDefinitionBundle,but am not sure about LWC,not able to see LWC Component in AuraDefinitionBundle.

    ReplyDelete
  6. Hey Amit I got to know that Metadata,I have another doubt,when am trying to open VScode through Mavensmate not able to see vscode folder in Vscode Application.

    ReplyDelete
    Replies
    1. I will recommend you to use VsCode with SFDX https://www.youtube.com/watch?v=7qR0c8h5cCU&t=12s

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Hi Amit,

    How to lightning web component in the custom button or action.

    ReplyDelete
  9. Hi Amit,

    I am able to create LWC in using scratch org and non-scrath org both after 'Dev Hub' is now available in Dev Edition sandbox.

    Still i am in confusion here.
    1. I am working in my 'Dev Edition sandbox' and i am creating my apex classes from there and aura components as well. And that is not using DX. i am using VS Code. [The project is open in VS Code]

    2. Now i want to build Web component in same project. Now how to do that. Because, folder structure of Dx project is differ. And project i am currently working is differ.

    ReplyDelete
  10. hello sir !
    good evening !!
    How to create looup in lightning web components?? please helpo me put

    ReplyDelete
  11. Hi Amit,

    Can you please help me Lightning Web Component for Close Case button.

    Thanks,

    ReplyDelete
  12. Hello amit
    i am huge fan of your blog, i need a small help on lwc
    My requirement is that i am working on a real estate project,
    i have two objects, (opportunity) and custom object (Appartment__c), whenever a block a flat in a opportunity object, the same blocked flat should show in appartment objects, i have created UI for the button components, and i have put that lightning component in both objects, how can i achive this?

    if you want i share me UI code


    ReplyDelete
    Replies
    1. Please reply me back when you are free at manjuzmail053@gmail.com

      Delete
  13. Hi Amit,

    I'm not able to deploy the component to the Org. In my VSC I'm not getting the option to perform this. Rest all I did and it works fine. Is there anything that I need to install in the VSC in order to push the changes to source org?

    ReplyDelete
  14. Hi Amit,

    I'm not able to deploy the component to the Org. In my VSC I'm not getting the option to perform this. Rest all I did and it works fine. Is there anything that I need to install in the VSC in order to push the changes to source org?

    ReplyDelete
    Replies
    1. I hope you installed the Salesforce CLI

      Delete
  15. Hey! great post you shared. It was amazing to read whole new update also want to add more about custom lables here for you. It is good to know about new things.

    ReplyDelete
  16. Hi Amit,

    I am not able to find css option of any LWC in vscode tool.
    Could you please help me on this ?

    ReplyDelete
    Replies
    1. Please check below post/ Recording
      http://amitsalesforce.blogspot.com/2019/01/design-attributes-in-lightning-web-components-css-svg.html

      Delete
  17. Share some artile related to Navigation page to page and different types

    ReplyDelete
  18. Thanks Amit, for this awesome document. As new to salesforce, I was struggling alot to deploy my first app of org.

    ReplyDelete
  19. Hi Amit, i am not getting 'SFDX:Deploy Source to org' option. Please help.

    ReplyDelete
  20. IF any of you have Lightning Web Component expereience and interested to work with me please let me know.

    ReplyDelete
  21. Is it possible create chatter functionality in the LWC or access chatter in LWC?

    ReplyDelete
  22. Thanks a lot Amits, very good tutorial.

    ReplyDelete
    Replies
    1. Glad it helped you. Check this post for recording http://www.apexhours.com/lightning-web-components/

      Delete
  23. Hi Amit,

    Can we create Bulk Object Creation using CSV file in Sales Force ?

    ReplyDelete
  24. Hi Amit,

    Can we create Dynamic Form Builder in LWC ?

    ReplyDelete
  25. Hi Amith,

    I have below doubts could you please clarify them.

    • In lightning Web Component, can we create custom object using visual studio code.
    • Suppose I have created one component for employee data table and displaying the records and when I click on name-hyperlink record does it navigate to Record page?

    ReplyDelete
  26. Hi Amit,

    Its showing me error:
    "Lightning_AppPage is not a valid target" while pushing the changes to scratch org.

    ReplyDelete
    Replies
    1. I think you need to add double Underscore between Lightning and AppPage. so it will be like Lightning__AppPage

      Delete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Hello,
    I have created a LWC and it is also visible in app builder but when i add that component to home page it is not getting saved. And i have also done all configurations also like,
    true

    lightning__AppPage
    lightning__RecordPage
    lightning__HomePage

    ReplyDelete
  29. Link exchange is nothing else but it is only placing the other person's web site link on your page at proper place and other person will also do similar in favor of you.

    ReplyDelete
  30. I every time emailed this web site post page to all my associates, since if like to read it afterward my contacts will too.

    ReplyDelete
  31. Hello sir

    CSS class selector 'slds-m-around_medium' not found.

    Details Error
    {
    "resource": "/f:/LWC/HelloWorld/force-app/main/default/lwc/helloWorld/helloWorld.html",
    "owner": "_generated_diagnostic_collection_name_#0",
    "severity": 4,
    "message": "CSS class selector 'slds-m-around_medium' not found.",
    "startLineNumber": 3,
    "startColumn": 19,
    "endLineNumber": 3,
    "endColumn": 39
    }

    Please Reply kanaramyadavofficial@gmail.com

    ReplyDelete