Wednesday, 30 January 2019

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:


- 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,

29 comments:


  1. Thanks for sharing the good information and post more information.Talent flames company is one of the best training and placement company in Hyderabad. Providing training on Technologies like Java,Sql,Oracle,..,etc with 100% Placement Assistance. Now Interviews going on if you want to attend just visit our website and drop your resume. for more information visit us http://talentflames.com/
    training and placement company in Hyderabad

    ReplyDelete
  2. Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging... best angularjs training institute in chennai | angularjs training in omr | angularjs training in chennai | angularjs training in velachery |

    ReplyDelete
  3. hey there nice article on lightning web components. we have a similar article on Enhanced Performance with Lightning Web Components check it and tell me what you think of it. also read my blog on Evaluate Sales Performance with Territory Management

    ReplyDelete
  4. Can some one help me with this....

    when i press Command + Shift + P and when Type SFDX: Create Project. it is giving me "command not found" error. I installed cli,vs code, plugins and extensions everything as mentioned here, but could not move forward.

    ReplyDelete
  5. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from
    data analytics certification

    ReplyDelete
  6. Hiii...Thanks for sharing Great info...Nice post...Keep move on...
    Salesforce Training in Hyderabad

    ReplyDelete
  7. Thanks For sharing a nice post about datascience with python Training Course.It is very helpful and datascience with python useful for us.datascience with python training in bangalore

    ReplyDelete
  8. Great information thank you so much, want to know more about Custom settings in Salesforce

    ReplyDelete
  9. Thanks for sharing
    We are the best piping design course in Hyderabad, India. Sanjary academy Offers Piping Design Course and Best Piping Design Training Institute in Hyderabad. Piping Design Institute in India Piping Design Engineering.
    Piping Design Course
    Piping Design Course in india
    Piping Design Course in hyderabad

    ReplyDelete
  10. Good Information
    Sanjary kids is the best playschool, preschool in Hyderabad, India. Start your play school,preschool in Hyderabad with sanjary kids. Sanjary kids provides programs like Play group,Nursery,Junior KG,Serior KG,and Teacher Training Program.
    best preschool in hyderabad
    preschool teacher training
    playschools in hyderabad
    preschool teacher training in hyderabad

    ReplyDelete
  11. Nice Information for this blog
    Best QA / QC Course in India, Hyderabad. sanjaryacademy is a well-known institute. We have offer professional Engineering Course like Piping Design Course, QA / QC Course,document Controller course,pressure Vessel Design Course, Welding Inspector Course, Quality Management Course, #Safety officer course.
    QA / QC Course
    QA / QC Course in india
    QA / QC Course in hyderabad

    ReplyDelete
  12. I must appreciate you for providing such a valuable content for us. This is one amazing piece of article. Helped a lot in increasing my knowledge.salesforce admin training in bangalore

    ReplyDelete
  13. Really a awesome blog for the freshers. Thanks for posting the information.salesforce developer training in bangalore

    ReplyDelete
  14. Amazing Blog Thank you for the information...

    Dynamic Hip-hop And Western Dance Institute one of the best Dance Institute in Indore do visit to learn Different Dance styles.

    ReplyDelete
  15. Nice Post & I Must Say it is one of the best Blog I have every seen before Otherwise if anyone Want SALESFORCE Training with Placement So You Can Contact here-9311002620

    Some Best SALESFORCE Training Center in Delhi, India

    Salesforce training institute in delhi
    Salesforce training institute in Noida
    Salesforce training institute in Faridabad

    ReplyDelete
  16. The data that you provided in the blog is informative and effective.I am happy to visit and read useful articles here. I hope you continue to do the sharing through the post to the reader. Read more about

    selenium training in chennai

    selenium training in chennai

    selenium online training in chennai

    selenium training in bangalore

    selenium training in hyderabad

    selenium training in coimbatore

    selenium online training

    ReplyDelete
  17. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's

    Azure Training in Chennai

    Azure Training in Bangalore

    Azure Training in Hyderabad

    Azure Training in Pune

    Azure Training | microsoft azure certification | Azure Online Training Course

    Azure Online Training

    ReplyDelete
  18. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    blockchain online training
    best blockchain online training
    top blockchain online training

    ReplyDelete
  19. Thanks for sharing this wonderful content.its very useful to us.This is incredible,I feel really happy to have seen your webpage I gained many unknown information, the way you have clearly explained is really fantastic.keep posting such useful information.
    DevOps Training in Chennai

    DevOps Online Training in Chennai

    DevOps Training in Bangalore

    DevOps Training in Hyderabad

    DevOps Training in Coimbatore

    DevOps Training

    DevOps Online Training

    ReplyDelete