Salesforce Knowledge

You might have observed that the role hierarchy which gets displayed in the org (Setup > Users > Roles) is still displayed using a VF component. Today, we will see how to create the same role hierarchy using LWC and Apex. LWC provides us with a component called lightning-tree which displays a nested tree. We will make use of this component to display the role hierarchy in a tree structure. In Apex, we will query all the user roles and form a JSON structure which will be fed to the lightning-tree component. Let's first see the LWC component - roleHierarchy: roleHierarchy.html <template> <div class="slds-p-around_medium lgc-bg"> <lightning-tree items={roles} header="Roles"> </lightning-tree> </div> </template> Here we have used the lightning-tree component which will display the data in a tree structure. The items attribute is of type Object which has nested i...

HTTP callout from Lightning Web Components? Is it similar to Lightning (Aura) components? Or is something better available in modern JavaScript? Do we still require Apex to make the callout? Or can we handle it all on the client side itself? Have similar questions in your mind? Then continue reading this blog post. Today, we will see how to make an HTTP callout from a Lightning Web Component. Good news - we do not require any apex class to make the callout. In the JavaScript controller of our lightning web component, we can easily make the web service callout by making use of the fetch method. For this example, we will use the free API provided by Crypto Compare . The API returns the response in JSON format, which we will parse and feed to the HTML file. The component will make the HTTP callout to bring in the price of the top 10 cryptocurrencies and display them in a lightning card. To make the callout from the Lightning web component, first, we need to add the endpoint URL in...

Today, we will see how to communicate between the LWC components. We will cover parent to child component communication and vice versa. We will see the various ways in which we can communicate between aura components and then we will compare it with the ways available to communicate between LWC components. A side by side comparison will help to have a better understanding of how things work in LWC. Aura Components LWC Communication from the parent component to the child component 1. Passing attributes: We can pass attribute from parent component to child component. The binding between attributes can be one-way binding or two-way binding.  1. Public property: Creating a public property in the child component and passing the value from the parent component. Public property is reactive in nature. 2. Aura method: Define an aura method in the child component and call it from the parent component. Aura methods cannot return a value. 2. Public method: Create a public m...

In this series, we will learn how to create simple LWC components without writing any apex code. There are various ways provided by Salesforce to fetch data from the database without the developer requiring to write even a single line of Apex. In this blog, we will have a look at wire service to retrieve data from the server. LWC uses a reactive wire service that is built on Lightning Data Service. Components use @wire annotation in the JS class file to read data from one of the wire adapters in lightning/ui*Api modules. We will build a simple LWC component that will get the account record id from the Account record page and fetch the account data using wire service. The account details will be displayed in a header component styled using SLDS. We will also use the lightning-map component to show the account address on the google map. Below is the HTML markup for the LWC component accountInfo.html <template>   <div class="slds-page-header">    ...

Today we will see how can we convert an existing Lightning Component to Lightning Web Component (LWC). I will convert the Org Limits Lightning component that I published in my last blog spot to a LWC component. The basic structure of a lightning web component consists of a HTML file, a JS file and a xml file. The .html file in LWC is equivalent to the .cmp file present in Aura.  The .js file in LWC is equivalent to the combination of controller.js and helper.js files present in Aura The xml file in LWC contains the meta information such as api version.  Lets see step by step how to convert the Org Limits component. First we will convert the OrgLimits.cmp to orgLimitsLWC.html <aura:component implements="flexipage:availableForAllPageTypes" controller="OrgLimitsCtrl"> The <aura:component> tag in LC gets replaced by <template> tag in LWC. The implements attribute containing value flexipage:availableForAllPageTypes gets shifted to the xm...

In Summer 19, Salesforce introduced a new class named OrgLimit under the System namespace. The System.OrgLimit class contains methods that return the name, current value, and maximum limit for an instance. By utilizing information from this class, I have created a lightning component that will be useful for the Org admin and developers. This component lists down all the org limit, its current usage and the maximum limit. The component gets the org limits by making use of the OrgLimit class and displays the data in a tabular format. You can also refresh the component by clicking on the Refresh icon present at the top right corner. The refresh icon also displays the time when the component was last refreshed. Below is the code for the lightning component: OrgLimits.cmp <aura:component implements="flexipage:availableForAllPageTypes" controller="OrgLimitsCtrl">       <!-- Attributes -->     <aura:attribute name="orgLimitInfo" ...

In this article, we will compare the performance of If else statements vs the Switch statements available in Apex. Switch statements was a long awaited feature in Apex and Salesforce released the Switch statements in the Summer '18 release. This article will help the developers to decide whether to use the traditional If else statements or to go with the newly introduced Switch statement. I have done a simple test to compare the performance of both. The test involves querying the Account records, along with an inner query to fetch the related contacts and then iterating over them in a loop. The first test uses the If else statements and the second test uses the Switch statement. Performance of If else statement: List<Account> accList = [SELECT Name,(SELECT Name FROM Contacts) FROM Account]; System.debug('Start Time: '+Limits.getCpuTime()); Integer i = 0; for(Account acc: accList){     if(i == 0){         System.debug('Account List: '+accLis...