Salesforce Knowledge

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

Today we will have a look at creating a custom global search using Lightning and SOSL. We will use SOSL to query the results from database and show it on the lightning component using the lightning:datatable tag SOSL is preferred over SOQL in use cases where we want to search for a particular keyword across different objects. The return type of SOSL will be a list of list of sobjects.  List<List<sObject>> searchResult = [FIND :searchKey                                             IN ALL FIELDS RETURNING                                             Account (Id, Name, AccountNumber, Website),                                             Co...

Today we will have a look at how to create a lightning component for countdown timer which can be used on pages where an operation needs to be completed within a specific time period. Example, an online exam or a banking transaction which expires after a specific time period. The component contains a datetime field which represents the end time. Once the user selects the date and time and clicks on Start Timer button, the countdown timer will start. Below is the lightning component: CountdownTimer.cmp <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >       <aura:attribute name="endTime" type="String"/>       <aura:attribute name="timeLeft" type="String"/>       <lightning:tile label="Time Left" class="slds-page-header">         {!v.timeLeft}     </lightning:tile...

Today we will have a look at how to create a lightning component which analyses the strength of your password. The component only uses the standard lightning tags and no external JS library has been used to achieve this functionality. The functionality is handled completely at the client with no apex code, which makes it performance centric. To allow the user to enter password, I have used lightning:input with type="password". There is an ochange event configured on this input element which makes a call to JS controller and analyses the password. Once the analysis is completed, it sets a score for the entered password. To display the strength of the password, I have used below 2 components: lightning:slider lightning:progressBar Both the components use the score which is set by the controller method. If you want to add some chart which displays the strength, you can use JS libraries like chart.js. PasswordStrengthMeter.cmp <aura:component implements=...

Winter 19 has a lot of new features released which provides more flexibility while creating apps in Salesforce. Here are some of my favourite features: New component lightning:map Before Winter 19 release, to display a map, you need to use external JS library like Leaflet. But with Winter 19, maps will be supported by the platform using lightning:map. This tag is similar to the apex:map tag available in Visualforce page. New attribute in lightning:accordion Before Winter 19 release, the default behaviour of accordion was that only one section can be opened at a time. If you want to open all the sections at once, it was not supported. The workaround was to use html accordion instead of lightning accrodion. But now with Winter 19, Salesforce has introduced a new attribute called allowMultipleSectionsOpen. If this attribute is set to true, then all the sections can be opened at the same time. Mark Apex Method as Cacheable As mentioned in my last blog, the current solution to...