Salesforce Lightning Web Components(LWC)

Screen Shot 2018-12-16 at 8.23.12 PM

Hi friends!

In my last post i have shared how to install CLI and how to install package etc.,

https://jayakrishnasfdc.wordpress.com/2018/12/15/salesforce-cli-installation-commands-configuration-and-advantages/

We all known that very recently few days back salesforce introduced LWC and it makes creation of web-components easier ..

Let’s go with one example component.

Trailhead Link: https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components

Lightning Web Components is a new programming model for building Lightning components. It leverages web standards breakthroughs, can coexist and interoperate with the Aura programming model, and delivers unparalleled performance. To create and develop Lightning Web Components and leverage their powerful features and performance benefits, you need to set up Salesforce DX. 

Step:1

Set Up Visual Studio Code

Install Salesforce extension pack and Lighting web Components

Visual Studio Code’s code completion in action

For this quick start, we are going to install Visual Studio Code and the recommended Salesforce Extension Pack and Lightning Web Components extension.

  1. Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
  2. Launch Visual Studio Code.
  3. On the left toolbar, click the Visual Studio Code's Extension icon Extensions icon.
  4. Search for Salesforce Extension Pack and click Install. If you already have it installed, then you just need to click on the Reload button.                                                                   Visual Studio Code search for Salesforce extension pack
  5. Search for Salesforce Lightning Web Components and click Install. If you already have it installed, then you just need to click on the Reload button.                                      Visual Studio Code search for Salesforce Lightning Web Components
  6. Re-launch Visual Studio Code to complete the installation.

Step: 2

Upgrade to Pre-Release org

                   sfdx plugins:install salesforcedx@pre-release
Ensure Your Development Environment Is Ready

Now that you’ve installed Visual Studio Code and enabled the necessary extensions, you need to test them out. 

  1. In Visual Studio Code, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows.
  2. Type sfdx to filter for sfdx commands.

As you use more sfdx commands, those commands will show up in the recently used panel.

Visual Studio Code: Filter sfdx commands in Visual Studio code

In the final step, you will create your first Lightning web component and add it to your org’s home page.

We won’t check any of your setup. Click Verify Step to go to the next step in the project.

Step:3

Create a Salesforce DX Project
  1. In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Create Project.
  4. Enter LWCExample as the project name.
  5. Press Enter.
  6. Select a folder to store the project.
  7. Click Create Project. You should see something like this as your base setup.     
Create a Scratch Org
  1. In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Create a Default Scratch Org.
  4. Press Enter to accept the default project-scratch-def.json.
  5. Press Enter to accept the default HelloWorldLightningWebComponent scratch org alias.
  6. Be patient, creating a scratch org can take a minute. The success message should look like this:       Success message of creating a default scratch org, in the terminal

Authorize a Dev Hub
  1. In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Authorize a Dev Hub.
  4. Log in using your pre-release Dev Hub org credentials from step 1.
  5. Click Allow.         Allow Access dialog
Create a Lightning Web Component
  1. In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Create Lightning Web Component.
  4. Press Enter to accept the default force-app/main/default/lwc.
  5. Type helloWorld for the name of the new component.
  6. Press Enter.
  7. View the newly created files in Visual Studio Code.

Step:4

Update the code in Component Bundle

  1. In the HTML file, helloWorld.html, copy and paste the following code.
    <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>
  2. Save the file.
  3. In the JavaScript file, helloWorld.js, copy and paste the following code.
    import { LightningElement, track } from 'lwc';
    export default class HelloWorld extends LightningElement {
        @track greeting = 'World';
        changeHandler(event) {
            this.greeting = event.target.value;
        }
    }
  4. Save the file.
  5. In the XML file helloWorld.js-meta.xml, copy and paste the following code.
    <?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>
  6. Save the file.

Step: 5

Push to a Scratch Org
  1. In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Push Source to Default Scratch Org.

Step: 6

Add Component to App in Lightning Experience
  1. In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Open Default Org.
  4. Click the app launcher icon App Launcherto open the App Launcher.
  5. Select the Sales app.
  6. Click the gear icon Setup Gear to reveal the Setup menu, then select Edit Page.
  7. Drag the helloWorld Lightning web component from the list of custom components to the top of the Page Canvas.   Lightning App Builder with HelloWorld lightning web component on the right column
  8. Click Save.
  9. Click Activate.
  10. Click Assign as Org Default.
  11. Click Save.
  12. Click Back to return to the Home page.
  13. Refresh the page to view your new component.

Home page with the HelloWorld Lightning web component

 

Reference:

https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/create-a-hello-world-lightning-web-component

Advertisements

2 thoughts on “Salesforce Lightning Web Components(LWC)

  1. Greetings from Florida! I’m bored at work so I decided to browse your blog on my
    iphone during lunch break. I love the knowledge you provide here and can’t wait
    to take a look when I get home. I’m shocked at how quick your blog loaded
    on my cell phone .. I’m not even using WIFI, just 3G ..
    Anyways, awesome blog! It’s perfect time to make some
    plans for the future and it is time to be happy. I’ve read this post
    and if I could I wish to suggest you few interesting things or advice.
    Maybe you could write next articles referring to this article.
    I desire to read more things about it! These are genuinely impressive ideas in on the topic of
    blogging. You have touched some nice things here. Any way keep up wrinting.
    http://foxnews.org

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s