How to show progress bar in lwc component - Salesforce Globe For You

 How to show progress bar in lwc component  - Salesforce Globe For You 

Solution: Use lightning-progress-indicator component to show the progress of a process.

Example:

displayProgressBarLWC.html

<template>

    <lightning-Card title="Progress Bar">

        <div style="padding:5px;">

            <lightning-progress-indicator type="base" current-step={currentState}>

                <lightning-progress-step label="Step One" value="1">

                </lightning-progress-step>

                <lightning-progress-step label="Step Two" value="2">

                </lightning-progress-step>

                <lightning-progress-step label="Step Three" value="3">

                </lightning-progress-step>

                <lightning-progress-step label="Step Four" value="4">

                </lightning-progress-step>

            </lightning-progress-indicator>

        </div>

        <div> This Component show Progress.Use Previous and next buttons to navigate or change steps</div>

        <div style="padding:5px;">

            <lightning-button variant="brand-outline" label="Previous" title="Primary action with lighter look" onclick={handlePrevious} class="slds-m-left_x-small"></lightning-button>

            <lightning-button variant="brand-outline" label="Next" title="Primary action with lighter look" onclick={handleNext} class="slds-m-left_x-small"></lightning-button>

        </div>

</lightning-Card>

</template>

displayProgressBarLWC.js

import { LightningElement,api } from 'lwc';

export default class DisplayProgressBarLWC extends LightningElement {

    @api currentState = 1;

    handleNext() {

        if(parseInt(this.currentState) != 4) {

            var counter = parseInt(this.currentState);

            counter = counter +1;

            this.currentState = String(counter);

            console.log(this.currentState);

        }

    }

    handlePrevious() {

        if(parseInt(this.currentState) != 1) {

            var counter = parseInt(this.currentState);

            counter = counter - 1;

            this.currentState = String(counter);

            console.log(this.currentState);

        }

    }

}

displayProgressBarLWC.js-meta.xml

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:

how to use console.dir and console.table to debug in javascript file lwc component - Salesforce Globe For You

 how to use console.dir and console.table to debug in javascript file lwc component  - Salesforce Globe For You 

Solution: console.log is used to display all properties of the javascript object.

Console.table is used to display in the form of table.

Example:

callApexMethodFromLWC.html

<template>

    <lightning-Card title="Display Console">

        <lightning-button variant="brand" label="Call Apex method" title="Call Apex method to display 5 Leads" onclick={callApexMethod} class="slds-m-left_x-small"></lightning-button>

        <div style="height: 300px;">

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    show-row-number-column="true"

                    columns={columns}>

            </lightning-datatable>

        </div>    

    </lightning-Card>

</template>

CallApexMethodFromLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

 ];

export default class CallApexMethodFromLWC extends LightningElement {

    @track lstLeads;

    columns = columns;

    callApexMethod() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

                console.dir(result);

                console.table(result);

                console.log(result);

            })

            .catch(error => {

                this.error = error;

            });

    }

}

callApexMethodFromLWC.js-meta.xml

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:When you do inspect element and see the output will be

How to open salesforce org from visual studio code - Salesforce Globe For You

 How to open salesforce org from visual studio code  - Salesforce Globe For You 

Solution: Use SFDX: Open Default Org from command palatte or use the following command from terminal

sfdx force:org:open

How to show a link with text in record detail page in salesforce - Salesforce Globe For You

 How to show a link with text in record detail page in salesforce  - Salesforce Globe For You 

Solution: We may need 3 fields to do it.

1) one text field to store the display text of the link

2) one url field to store the actual url

3)One formula field(text) to display the actual text with hyperlink.

Example:In Lead Object ,created 3 fields.

URL_Text__c text field

URL_Field__c url field

URL_Link__c formula field(text)  HYPERLINK( URL_Field__c , URL_Text__c, 'Self')

Output:

How to use LWC Component as quick action in salesforce - Salesforce Globe For You

 How to use LWC Component as quick action in salesforce.  - Salesforce Globe For You 

LWC Component can be used in quick action by modifying the following attributes of it's meta file as below

<targets>

  <target>lightning__RecordAction</target>

</targets>

<targetConfigs>

  <targetConfig targets="lightning__RecordAction">

    <actionType>ScreenAction</actionType>

  </targetConfig>

</targetConfigs>

Example:

lwcCompForQuickAction.html

<template>

    <lightning-quick-action-panel title="Quick Action Title">

        Welcome to LWC Component Quick Action

        <div slot="footer">

          Footer

        </div>

      </lightning-quick-action-panel>

</template>

lwcCompForQuickAction.js

import { LightningElement,api } from 'lwc';

export default class LwcCompForQuickAction extends LightningElement {

}

lwcCompForQuickAction.js-meta.xml

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

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

    <apiVersion>52.0</apiVersion>

   <isExposed>true</isExposed>

   <targets>

       <target>lightning__RecordAction</target>

   </targets>

    <targetConfigs>

   <targetConfig targets="lightning__RecordAction">

     <actionType>ScreenAction</actionType>

   </targetConfig>

 </targetConfigs>

</LightningComponentBundle>

Output:

How to process selected rows of lightning data table LWC Salesforce. - Salesforce Globe For You

 How to process selected rows of lightning data table LWC Salesforce.  - Salesforce Globe For You 

Solution:use getSelectedRows() to get the selected rows of lightning data table.

Example: 

displayLightningDataTableLWC.html

<template>

    <lightning-Card title="Process Lightning Data Table Data">

        <div>

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    columns={columns}>

            </lightning-datatable>

        </div> 

        <div style="padding-top: 10;">  

            <lightning-button variant="brand" label="Get Selected Records" title="Process Lightning Data Table Data" 

            onclick={getSelectedRec} class="slds-m-left_x-small"></lightning-button>

        </div>

        <div title="Selected Leads">

            <lightning-Card title="Selected Leads are">

            <lightning-datatable

                    key-field="id"

                    data={lstSelectedLeads}

                    columns={columns}>

            </lightning-datatable>

        </lightning-Card>

        </div> 

    </lightning-Card>

</template>

displayLightningDataTableLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

];

export default class DisplayLightningDataTableLWC extends LightningElement {

    @track lstLeads;

    @track lstSelectedLeads;

    columns = columns;

    async connectedCallback() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

            })

            .catch(error => {

                this.error = error;

            });

    }

    getSelectedRec() {

        var selectedRecords =  

      this.template.querySelector("lightning-datatable").getSelectedRows();  

      console.log('selectedRecords are ',selectedRecords);

      this.lstSelectedLeads = selectedRecords;

    }

}

displayLightningDataTableLWC.js-meta.xml

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:

Metadata to retrieve apps in salesforce - Salesforce Globe For You

 Metadata to retrieve apps in salesforce  - Salesforce Globe For You 

To retrieve standard app like sales,use the following metadata

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

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

    <types>

        <members>standard__Sales</members>

        <name>CustomApplication</name>

    </types>

    <version>51.0</version>

</Package>

Note: For standard app,need to prefix with 'standard__'.

For custom app,apiname of the app will be given as members.Assume 'Custom_Sales_Appp' is the apiname of the custom app created then use the following metadata

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

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

    <types>

        <members>Custom_Sales_Appp</members>

        <name>CustomApplication</name>

    </types>

    <version>51.0</version>

</Package>

Example:

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

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

    <types>

        <members>standard__Sales</members>

        <members>Custom_Sales_Appp</members>

        <name>CustomApplication</name>

    </types>

    <version>51.0</version>

</Package>

Output:

Metadata to retrieve process builder salesforce - Salesforce Globe For You

 Metadata to retrieve process builder salesforce  - Salesforce Globe For You 

In this example assume I created Lead_Process_Builder as shown in the image below.

Solution: Use name as 'Flow' and the apiname of the process 'Lead_Process_Builder' as members as shown below

<types>

    <members>Lead_Process_Builder</members>

    <name>Flow</name>

</types>

Package.xml:

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

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

    <types>

        <members>Lead_Process_Builder</members>

        <name>Flow</name>

    </types>

    <version>51.0</version>

</Package>

Output: Once we retrieve the process builder will be retrieved as shown below.

aura component not visible in lightning app builder - Salesforce Globe For You

 aura component not visible in lightning app builder  - Salesforce Globe For You 

Problem: The below TestAuraComponent.cmp is created but when trying to create new lightning page this component is not visible to drag.

TestAuraComponent.cmp

<aura:component >

    <lightning:card  title="Aura Component">

        <b style="padding-left:20px">Testing Aura Component</b>

    </lightning:card>

</aura:component>

Solution: To make your component visible available for record pages and any other type of page,you need to implement flexipage:availableForAllPageTypes interface as shown below.

<aura:component implements="flexipage:availableForAllPageTypes">

    <lightning:card  title="Aura Component">

        <b style="padding-left:20px">Testing Aura Component</b>

    </lightning:card>

</aura:component>

Output:

Show/add row number column to lightning datatable in LWC component Salesforce - Salesforce Globe For You

 Show/add row number column to lightning datatable in LWC component Salesforce  - Salesforce Globe For You 

Solution: Use the show-row-number-column="true" attribute for lightning datatable tag as shown in the example below.

Example:

public class LeadController {

    @AuraEnabled

    public static List<Lead> getLeads() {

        List<Lead> lstLead = new List<Lead>();

        lstLead = [Select id,name from Lead Limit 5];

        return lstLead;

    }

}

callApexMethodFromLWC.html

<template>

    <lightning-Card title="Call Apex method From LWC Component">

        <lightning-button variant="brand" label="Call Apex method" title="Call Apex method to display 5 Leads" onclick={callApexMethod} class="slds-m-left_x-small"></lightning-button>

        <div style="height: 300px;">

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    show-row-number-column="true"

                    columns={columns}>

            </lightning-datatable>

        </div>    

    </lightning-Card>

</template>

callApexMethodFromLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

];

export default class CallApexMethodFromLWC extends LightningElement {

    @track lstLeads;

    columns = columns;

    callApexMethod() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

            })

            .catch(error => {

                this.error = error;

            });

    }

}

callApexMethodFromLWC.js-meta.xml

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:

call Apex method from LWC component Salesforce - Salesforce Globe For You

 call Apex method from LWC component Salesforce  - Salesforce Globe For You 

Example:

public class LeadController {

    @AuraEnabled

    public static List<Lead> getLeads() {

        List<Lead> lstLead = new List<Lead>();

        lstLead = [Select id,name from Lead Limit 5];

        return lstLead;

    }

}

callApexMethodFromLWC.html

<template>

    <lightning-Card title="Call Apex method From LWC Component">

        <lightning-button variant="brand" label="Call Apex method" title="Call Apex method to display 5 Leads" onclick={callApexMethod} class="slds-m-left_x-small"></lightning-button>

        <div style="height: 300px;">

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    columns={columns}>

            </lightning-datatable>

        </div>    

    </lightning-Card>

</template>

callApexMethodFromLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

];

export default class CallApexMethodFromLWC extends LightningElement {

    @track lstLeads;

    columns = columns;

    callApexMethod() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

            })

            .catch(error => {

                this.error = error;

            });

    }

}

callApexMethodFromLWC.js-meta.xml

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

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

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: