iBirds Services - Sharing Technology

Salesforce Lightning Web Components

Hi All,

Today I will talk about Lightning Web Components, which will be generally available in February 2019 and will run in any Salesforce Org.

Introduction

Lightning Web Components is a new programming model for building Lightning components. It holds web standards breakthroughs, can interoperate with the Aura programming model and delivers unique performance. To create and develop Lightning Web Components, you need to set up “Salesforce DX”.and “Visual Studio” code editor, which is the recommended Salesforce development environment. Here are the installation links:

Command Line Interface (CLI) :
https://developer.salesforce.com/tools/sfdxcli

Visual Code Studio :
https://code.visualstudio.com/download

-Now we need to Install below Visual Code Studio Extensions

1. Salesforce Extension Pack
2. Lightning Web Components
3. Salesforce CLI Integration.

-Now we also need to run below commands in “Visual Studio” terminal. Here are the commands:

1. sfdx plugins:install salesforcedx@pre-release
2. sfdx plugins:install salesforcedx@latest

Now, we can run “sfdx plugins” command for check the installed plugins.

It should be show result like “salesforcedx 45.0.12 (pre-release)” it.

- Now, we are ready to create new lightning web component. First of all, we need to create new “Developer Edition Pre-Release Org”. Here is the creation link:

https://www.salesforce.com/form/signup/prerelease-spring19/

- Now, we need to create a new “Salesforce DX” project in our local machine. Here are the steps:

SFDX Project Creation Steps :

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. Type SFDX: Create Project.
3. Enter MyLightningWebComponent as the project name, press Enter.
4. Select a folder to store the project.
5. Click Create Project.

- Now, we need to follow required steps to connect “Visual Studio” project with our Salesforce org.

1. In Visual Studio code, press Command + Shift + P on a Mac OR Ctrl + Shift + P on Windows.
2. SFDX: Authorize a Dev Hub: This step is used for login our pre-release Devhub Org.
3. SFDX: Create a Default Scratch Org: We need to create new scratch org for pushing our changes from our local machine into scratch org.
4. SFDX: Create Lightning Web Component: Now we need to create new lightning web component under “lwc” folder.

Now we will create a Lightning Web Component named ‘contactSearch’

Here’s the code:-

contactSearch.html

1:  <template>  
2:    <lightning-card icon-name="custom:custom57">  
3:      <div slot="title">  
4:        <lightning-layout vertical-align="center">  
5:          <lightning-layout-item>  
6:            Contact Search  
7:          </lightning-layout-item>  
8:          <lightning-layout-item padding="around-small">  
9:            <c-nav-to-new-record></c-nav-to-new-record>  
10:          </lightning-layout-item>  
11:        </lightning-layout>  
12:      </div>  
13:      <div class="slds-m-around_medium">  
14:        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" 
15:           label="Search"></lightning-input>  
16:        <template if:true={contacts}>  
17:          <template for:each={contacts} for:item="contact">  
18:            <c-contact-tile key={contact.Id} contact={contact}></c-contact-tile>  
19:          </template>  
20:        </template>  
21:      </div>  
22:    </lightning-card>  
23:  </template>  

contactSearch.css

1:  lightning-input,  
2:  c-contact-tile {  
3:    position: relative;    
4:    border-radius: 4px;  
5:    display: block;  
6:    padding: 2px;  
7:  }  
8:  c-contact-tile {  
9:    margin: 1px 0;  
10:  }  
11:  lightning-input:before,  
12:  c-contact-tile:before {  
13:    color: #dddbda;  
14:    position: absolute;  
15:    top: -9px;  
16:    left: 4px;  
17:    background-color: #ffffff;  
18:    padding: 0 4px;  
19:  }  

contactSearch.js

1:  import { LightningElement, track } from 'lwc';  
2:  import findContacts from '@salesforce/apex/ContactController.findContacts';  
3:  /** The delay used when debouncing event handlers before invoking Apex. */  
4:  const DELAY = 350;  
5:  export default class ContactSearch extends LightningElement {  
6:    @track contacts;  
7:    @track error;  
8:    handleKeyChange(event) {  
9:      // Debouncing this method: Do not actually invoke the Apex call as long as this function is  
10:      // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.  
11:      window.clearTimeout(this.delayTimeout);  
12:      const searchKey = event.target.value;  
13:      // eslint-disable-next-line @lwc/lwc/no-async-operation  
14:      this.delayTimeout = setTimeout(() => {  
15:        findContacts({ searchKey })  
16:          .then(result => {  
17:            this.contacts = result;  
18:            this.error = undefined;  
19:          })  
20:          .catch(error => {  
21:            this.error = error;  
22:            this.contacts = undefined;  
23:          });  
24:      }, DELAY);  
25:    }  
26:  }  

contactSearch.js-meta.xml:

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘contactTile’
contactTile.html :

1:  <template>  
2:    <lightning-layout vertical-align="center">  
3:      <lightning-layout-item>  
4:        <img src={contact.Picture__c} alt="Profile photo">  
5:      </lightning-layout-item>  
6:      <lightning-layout-item padding="around-small">  
7:        <a onclick={navigateToView}>{contact.Name}</a></p>  
8:        <p>{contact.Title}</p>  
9:        <p>  
10:          <lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>  
11:        </p>  
12:      </lightning-layout-item>  
13:    </lightning-layout>  
14:  </template>  

contactTile.css:

1:  img {  
2:    width: 60px;  
3:    height: 60px;  
4:    border-radius: 50%;  
5:  }  

contactTile.js

1:  import { LightningElement, api } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  //import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';  
4:  export default class ContactTile extends NavigationMixin(LightningElement) {  
5:    @api contact;  
6:   // @wire(getSingleContact) contact;   
7:    navigateToView() {     
8:     this[NavigationMixin.Navigate]({  
9:      type: "standard__recordPage",  
10:        attributes: {  
11:          objectApiName: "Contact",  
12:          actionName: "view",  
13:          recordId: this.contact.Id,  
14:        },  
15:      });  
16:   }    
17:  }  

contactTile.js-meta.xml:

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>false</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Now we will create a Lightning Web Component named ‘navToNewRecord’
navToNewRecord.html:

1:  <template>  
2:      <lightning-button label="New Contact" variant="brand" class="slds-m-around_medium" 
3:      onclick={navigateToNewContact} ></lightning-button>  
4:  </template>  

navToNewRecord.js:

1:  import { LightningElement } from 'lwc';  
2:  import { NavigationMixin } from 'lightning/navigation';  
3:  export default class NavToNewRecord extends NavigationMixin(LightningElement) {  
4:    navigateToNewContact() {  
5:      this[NavigationMixin.Navigate]({  
6:        type: 'standard__objectPage',  
7:        attributes: {  
8:          objectApiName: 'Contact',  
9:          actionName: 'new',  
10:        },  
11:      });  
12:    }  
13:  }  

navToNewRecord.js-meta.xml

1:  <?xml version="1.0" encoding="UTF-8"?>  
2:  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="navToNewRecord">  
3:    <apiVersion>45.0</apiVersion>  
4:    <isExposed>true</isExposed>  
5:    <targets>  
6:      <target>lightning__AppPage</target>  
7:      <target>lightning__RecordPage</target>  
8:      <target>lightning__HomePage</target>  
9:    </targets>  
10:  </LightningComponentBundle>  

Here’s the GitHub link for further files which are required before pushing to scratch org for this tutorial
https://github.com/jaiaswani10/lightning-web-components
Files which are required:-
Picture__c.field-meta.xml file for creating a custom field
lwc.permissionset-meta.xml file for assigning permission
‘data’ named the folder for loading data

Push to a Scratch Org
Type :SFDX: Push Source to Default Scratch Org by using Ctrl + Shift + P  OrType in terminal
sfdx force:source:push [-u<Username>]

Assign the lwc permission set to the default user:
sfdx force:user:permset:assign -n lwc

Load sample data:
sfdx force:data:tree:import --plan ./data/data-plan.json

Add Component to App in Lightning Experience

1. Type SFDX: Open Default Org.
2. Click the app launcher icon App Launcher to open the App Launcher.
3. Select the Sales app.
4. Click the gear icon Setup Gear to reveal the Setup menu, then select Edit Page.
5. Drag the contactSearch Lightning web component from the list of custom components to the top of the Page Canvas.

Deploy it to your Pre-release org:

Log in to your Pre-Release org and create an alias for it.

To deploy we have to also push further files which I’ve mentioned above

Type the following commands in VS Code terminal:

sfdx force:auth:web:login -a MyOrg

Confirm that this org is available:

sfdx force:org:list

Deploy your code to Pre-Release org

sfdx force:source:deploy -p force-app  -u MyOrg

Assign the lwc permission set to the default user:

sfdx force:user:permset:assign -n lwc -u MyOrg

Load sample data:

sfdx force:data:tree:import --plan ./data/data-plan.json -u MyOrg

Run your org  and interact with the app:

sfdx force:org:open -u MyOrg

Thanks,