Lightning Web Component

sfdx force:org:create -s -f config/project-scratch-def.json -a myfirstScratchOrg
sfdx force:org:create -f config/project-scratch-def.json --durationdays 30
sfdx force:org:create -s -w 3 -d 1 -f config/project-scratch-def.json -v <Prod Username>

3. To see scratch org from VS-

sfdx force:org:open -u userNameOfOrg--Example: sfdx force:org:open -u test-ruehwdnpalw3@example.com
--This will take some time?MESSAGE ----Waiting to resolve the Lightning Experience-enabled custom domain......https://business-energy-8323-dev-ed.lightning.force.com/lightning/setup/SetupOneHome/home

5. To generate a new password:

sfdx force:user:password:generate --targetusername test-ruehwdnpalw3@example.com-- You will get one more message to hit the command display the password
sfdx force:user:display -u test-ruehwdnpalw3@example.com

6. Once scratch org created and logged in then we need to push the metadata: Progress can be seen in bar %

sfdx force:source:push -u <scratch username>
sfdx force:source:push -u test-ruehwdnpalw3@example.com
--In case of any conflict comes than comment on that line, then again put the same command

7. Once it is done then go to the Manifest folder then right click then deploy from source to Org, this will take time.

8. Scratch Org Limit for Developer Edition:

https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_scratch_orgs.htm

9. List All Your orgs:

sfdx force:org:list

LWC Structure:

MetaData(XML) AI Version, Expose component like App builder, adding Properties
JavaScript: All the logic(at least one JS file)
HTML: User interface
CSS: Stying

Note for SFDX:

once you are in Folder:

Then CTRL+SHFT+P to add command just type SFDX

There is one interesting trailhead challenge which says :
https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/add-styles-and-data-to-a-lightning-web-component

Create a page named Your Bike Selection in the Lightning App Builder.
Add the current user's name to the app container by editing the selector JavaScript and HTML files.

So here Adam and Harry are discussing the same.

Harry: Do you know what is LWC in lightning salesforce.
Adam: Yeah, sure I am learning about it, December 2018 LWC announced by salesforce. Which leverages:

custom element
modules
shadow DOM
decorators
templates
other new language constructs available in ECMAScript 7 and beyond.

Adam: So you want to know more about this in terms of coding?

Harry: yes, I wish to....

Adam:

It consists of three files: HTML, js ,Meta xmlCss

HTML:

<template>

    <div class="wrapper">

        <header class="header">Available Bikes for {name}</header>

    </div>

</template>
<template>
.
<target> ---> making it available for lightning pages,, we do this in lightning component (using interface at the header)
.
</template>

.js ---------> javascript

import {

    LightningElement,

    wire,

    track

} from 'lwc';

import {

    getRecord

} from 'lightning/uiRecordApi';

import USER_ID from '@salesforce/user/Id';

import NAME_FIELD from '@salesforce/schema/User.Name';

import EMAIL_FIELD from '@salesforce/schema/User.Email';

export default class Userinfoexample extends LightningElement {

    @track error ;

    @track email ;

    @track name;

    @wire(getRecord, {

        recordId: USER_ID,

        fields: [NAME_FIELD, EMAIL_FIELD]

    }) wireuser({

        error,

        data

    }) {

        if (error) {

           this.error = error ;

        } else if (data) {

            this.email = data.fields.Email.value;

            this.name = data.fields.Name.value;

        }

    }

}
import{Lightning element} //
export statment{};

meta xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightningCommunity__Page</target>

    </targets>

</LightningComponentBundle>
current api version
expose if is true then we can use it for app builder

Harry : How can i user apex class and Method in LWC

Adam: Here we go-

let say we want to display the name but using salesforce Query,so here the example

Selector apex class:

public with sharing class UserInformationDetails {

   @AuraEnabled(Cacheable =true)

   public static User getUserInfo(String recId) {

       return[Select Id,Name,Email from user where id =: recId];

    }

}

slectorapexclass.html

<template>

    <template if:true={user}>

        Name : {user.Name}

        EMail : {user.Email}

        Id : {user.Id}

    </template>

</template>

selectorApexclass.js

import { LightningElement,wire,track } from 'lwc';

import getUserInfo from '@salesforce/apex/UserInformationDetails.getUserInfo';

import Id from '@salesforce/user/Id';

export default class SelectorApexClass extends LightningElement {

    userId =Id;

    @track user;

    @track error;

    @wire (getUserInfo, {

        recId:'$userId'

    })

    wiredUser({error,data})

    {

        if (data)

        {

            this.user =data;

        }

        else if(error)

        {

            this.error =error;

        }

    }

}

selectorapexclass.meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightningCommunity__Page</target>

    </targets>

</LightningComponentBundle>

Search This Blog

DreamSource

Lightning Web Component

Lightning Web Component salesforce 🌩:

Comments

Post a Comment

Popular posts from this blog

LearnSalesforce

LWC Interview Questions Part-1