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,

51 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
    Replies
    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training

      Delete
  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
  20. Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.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.
    Full Stack Training in Chennai | Certification | Online Training Course
    Full Stack Training in Bangalore | Certification | Online Training Course

    Full Stack Training in Hyderabad | Certification | Online Training Course
    Full Stack Developer Training in Chennai | Mean Stack Developer Training in Chennai
    Full Stack Training

    Full Stack Online Training




    ReplyDelete
  21. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again.
    Data Science Training In Chennai

    Data Science Online Training In Chennai

    Data Science Training In Bangalore

    Data Science Training In Hyderabad

    Data Science Training In Coimbatore

    Data Science Training

    Data Science Online Training

    ReplyDelete
  22. I feel really happy to have seen your webpage.I am feeling grateful to read this.you gave a nice information for us.please updating more stuff content...keep up!!

    Android Training in Chennai

    Android Online Training in Chennai

    Android Training in Bangalore

    Android Training in Hyderabad

    Android Training in Coimbatore

    Android Training

    Android Online Training

    ReplyDelete
  23. This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things...
    IELTS Coaching in chennai

    German Classes in Chennai

    GRE Coaching Classes in Chennai

    TOEFL Coaching in Chennai

    spoken english classes in chennai | Communication training


    ReplyDelete
  24. Top Quality blog with very helpful information thanks for sharing well done.
    typeerror nonetype object is not subscriptable

    ReplyDelete
  25. Fantastic blog with top quality information found very useful thanks you.
    Data Science Course in Hyderabad

    ReplyDelete

  26. Awesome article with top quality information and I appreciate the writer's choice for choosing this excellent topic found valuable thank you.
    Data Science Training in Hyderabad

    ReplyDelete


  27. Firstly talking about the Blog it is providing the great information providing by you . Thanks for that .Hope More articles from you . Next i want to share some information about Salesforce training in Banglore .

    ReplyDelete
  28. Nice Information Your first-class knowledge of this great job can become a suitable foundation for these people. I did some research on the subject and found that almost everyone will agree with your blog.
    Cyber Security Course in Bangalore

    ReplyDelete
  29. Writing in style and getting good compliments on the article is hard enough, to be honest, but you did it so calmly and with such a great feeling and got the job done. This item is owned with style and I give it a nice compliment. Better!
    Cyber Security Training in Bangalore

    ReplyDelete
  30. Amazing article with informative information found valuable and enjoyed reading it thanks for sharing.
    Data Analytics Course Online

    ReplyDelete
  31. From this post I know that your good knowledge of the game with all the pieces has been very helpful. I inform you that this is the first place where I find problems that I look for. You have a clever but attractive way of writing. PMP Training in Hyderabad

    ReplyDelete
  32. It's good to visit your blog again, it's been months for me. Well, this article that I have been waiting for so long. I will need this post to complete my college homework, and it has the exact same topic with your article. Thanks, have a good game.

    Business Analytics Course in Bangalore

    ReplyDelete

  33. Firstly talking about the Blog it is providing the great information providing by you . Thanks for that .Hope More articles from you . Next i want to share some Information about Salesforce training in Hyderabad .

    ReplyDelete
  34. It's like you understand the topic well, but forgot to include your readers. Maybe you should think about it from several angles.

    Data Analytics Course in Bangalore

    ReplyDelete