Salesforce Tips, Tricks, and Knowledge

Understanding of Async/Await in LWC - Extension to Promise

noreply@blogger.com (Prateek Tandon) — Thu, 05 May 2022 19:25:00 +0000

In the last post, we discussed about Promise function How to chain Asynchronous actions in LWC using Promise? While they provide easy control to Asynchronous JavaScript, but Async/Await which builds on Promises allowing them to be used in a way that much more closely resembles synchronous JavaScript.

Async

It is simply a keyword we put in front of a function definition. Async functions are instances of the AsyncFunction constructor.

async function performAction() {
   // do some asynchronous action
   return 'result of an action';
}

An Async function always returns a Promise. That promise will contain the value that you defined.

If you look at the below code script

function start() {
    console.log('start');
    console.log(performAction());
    console.log('stop');
}

start();

You might expect the below result

start
result of an action
stop

But in reality the result will be

start
stop
result of an action

This is because performAction() was executed asynchronously.

Now, to make the above code work like synchronously or to execute all calls in sequential order we need to use Await function.

Await

The await expression causes the async function to pause until a Promise is returned for the async function. So, in simple words we are essentially telling our code to wait for the result of the asynchronous function to complete going any further.

await always expects a Promise from the async function, and parses the result automatically.

Lets consider the above code snippet

async function performAction() {
   // do some asynchronous action
   return 'result of an action';
}

async function start() {
    console.log('start');
    console.log(await performAction());
    console.log('stop');
}

start();

Now the result will be

start
result of an action
stop

This is because we are waiting the function performAction() to be completed before proceeding further.

NOTE: await can only be used within Async function.

Usage in LWC

Problem Statement : I need to re-render the validation message whenever the user checks Another amount as a radio button, but for me the DOM is not getting rendered properly on UI. So, I need to make a wait before I check for the selected radio button and checks the validity and reset it. So, to make that happen I need to put my change action in async/await.

Below is the code snippet:

payment.html

<!--
  @description       : 
  @author            : @tandonprateek
  @group             : 
  @last modified on  : 04-15-2022
  @last modified by  : @tandonprateek
-->
<template>
	<div class="slds-grid slds-gutters slds-var-m-bottom_small">
		<div class="slds-col slds-size_1-of-3 slds-nowrap">
			{labels.component.amountToPay}
		</div>
		<div class="slds-col">
			<lightning-radio-group 
                name="amountToPay"
                label={labels.component.amountToPay} 
                variant="label-hidden"
				options={amountToPayOptions} 
                value={amountToPaySelection} 
                type="radio" 
                onclick={handleAmountToPayChange}
				onchange={handleAmountToPayChange} 
                class="slds-var-m-bottom_small requiredInput" required>
			</lightning-radio-group>
			<lightning-input 
                type="number" 
                name="anotherAmount" 
                label="Another Amount" 
                variant="label-hidden"
				value={anotherAmount} 
                min="1" onfocus={handleAnotherAmountFocus} 
                onchange={handleAnotherAmountChange}
				formatter="currency" 
                class="inputAmount anotherAmount requiredInput" required={isAnotherAmountRequired}>
			</lightning-input>
		</div>
	</div>
</template>

payment.js

/**
 * @description       : 
 * @author            : @tandonprateek
 * @group             : 
 * @last modified on  : 05-05-2022
 * @last modified by  : @tandonprateek
**/
import { LightningElement } from 'lwc';

const ANOTHER_AMOUNT_OPTION = 'anotherAmount';
const AMOUNT_DUE_TODAY_OPTION = 'amountDueToday';


export default class Payment extends LightningElement {

    labels = {
        toast: {
            processingErrorTitle: 'Processing Error'
            , validationErrorTitle: 'Input Validation Error'
            , validationErrorMessage: 'Please provide values for all required fields'
        },
        component: {
            paymentHeader: 'Payment'
            , amountToPay: 'Amount to Pay'
            , amountDueToday: 'Amount Due Today '
            , remainingBalance: 'Remaining Balance '
            , anotherAmount: 'Another Amount'
        }
    }

    amountToPaySelection;
    anotherAmount;
    isAnotherAmountRequired = false;

    connectedCallback() {
        this.amountToPaySelection = AMOUNT_DUE_TODAY_OPTION
    }

    /**
        This method will wait for the Promise to be resolved and will then reset the validity.
    **/
    async handleAmountToPayChange(event) {
        this.amountToPaySelection = event.detail.value;
        const anotherAmountField = this.template.querySelector('.anotherAmount');
        if(this.amountToPaySelection !== ANOTHER_AMOUNT_OPTION) {
            this.anotherAmount = undefined;
            await Promise.resolve();
            anotherAmountField.reportValidity();
        } else {
          anotherAmountField.focus();
          anotherAmountField.reportValidity();
        }
        this.isAnotherAmountRequired = this.amountToPaySelection === ANOTHER_AMOUNT_OPTION;
    }
    
    handleAnotherAmountChange(event) {
        const value = event.detail.value;
        this.anotherAmount = value;
    }
    
    handleAnotherAmountFocus(event) {
        this.amountToPaySelection = ANOTHER_AMOUNT_OPTION;
        this.isAnotherAmountRequired = this.amountToPaySelection === ANOTHER_AMOUNT_OPTION;
    }
    
    get amountToPayOptions() {
        const theOptions = [];
        theOptions.push({ label: this.labels.component.amountDueToday, value: AMOUNT_DUE_TODAY_OPTION});
    
        let balanceLabel = this.labels.component.remainingBalance;
    
        theOptions.push({ label: balanceLabel, value: 'remainingBalance'});
        
        theOptions.push({ label: this.labels.component.anotherAmount, value: ANOTHER_AMOUNT_OPTION });
    
        return theOptions;
    }

}

Error Handling

To handle error we will be using old try/catch block.

async function doSomething() {
   // do something asyncronous
   return 'something';
}

async function start() {
    try {
        console.log('start');
        console.log(await performAction());
        console.log('end');
    } catch(e) {
        console.error(e);
    } finally {
        console.log('Do something no matter what');
    }
}

start();

How to chain Asynchronous actions in LWC using Promise?

noreply@blogger.com (Prateek Tandon) — Tue, 19 Apr 2022 19:05:00 +0000

As we are aware that Javascript can interpret only one statement at a time. With this, Javascript also doesn't face concurrency issue like other language faces while executing threads. Having said that, in Javascript, you can execute "Asynchronous Methods". These Asynchronous Methods are "Callbacks, Promises, Async/Await".

First, let's understand the difference between Callbacks and Promises before using Asynchronous actions in LWC.

Callbacks:

A callback is a function that is to be executed after another function has finished executing. Async callbacks are functions that are passed as arguments. and when that function is called it will start executing code in the background. When the background code finishes running, it calls the callback function to let you know the work is done. We use these callbacks because we want to avoid executing things out of order. If we want to wait for something in JavaScript, we need to use a callback.

Let's make Pizza from scratch using callbacks:

Synchronous Code:

 const makePizza = () => {

  const pizzaBase = makePizzaBase();

  const veggies = chopVeggies();

  const spreads = makePizzaSpreads();

  const cheese = grateCheese();

  const pizza = preparePizza(pb, veg, spread, cheese);

  return pizza;

 }

 makePizzaBase() = () => {

  //do something

 }

This synchronous makePizza() function runs in order, one function after another but what if we had a function that needed to be run first and other functions couldn't be running until after this function finishes. Let’s think of making pizza from scratch, you can’t put the veggies, spreads, and cheese on the pizza base until it’s made so you must wait until it's done. With synchronous code, it doesn’t wait it just does it. So, to fix this issue we have to Async callbacks.

Asynchronous Code:

const makePizza = () => {

  makePizzaBase(function(){

   chopVeggies(function(..arguments){

    makePizzaSpreads(function(…arguments){

     grateCheese(function(…arguments){

      preparePizza(){

       //pizza is ready

      }

     });

    });

   });

  });

Let’s consider the above asynchronous code which has a lot of code to execute. This code execution can cause an issue because we can have enough nested callbacks inside one another. This leads to what we call callback hell. Callback hell can puzzle the code with bugs that are illusory. For this reason, we need a way to get rid of so many nested callbacks.

Promises:

A promise is a returned object where you attach callbacks, instead of passing callbacks into a function. You can attach the callback after the successful completion of a task is called, .then(). inside this, you can pass a callback. Promises allow us to avoid callback hell by chaining multiple .then() on each other which avoids nested callbacks and a cleaner code. For the failure of completing a task, you can pass it through a .catch() block.

Let’s convert the above asynchronous callback code to Promise:

const makePizza = () => {

  return makePizzaBase()

   .then(veggies = > chopVeggies(vegetables))

   .then(pizzaSpreads => makePizzaSpreads(sauces))

   .then(cheese => grateCheese(cheese))

   .then(pizza => constructPizza());

  catch((bad pizza));

 }

In the above code, we turned our code into Promise. First, we will make the pizza base and on completion, we are returning the promise that will be passed to the next callback. Next, we did chaining on other functions that will execute one after the other in order by using .then(), making an async function. As we have observed that code looks cleaner and we avoided callback hell.

How we can use Promise in LWC:

A promise can have three stages

- Pending - Default state, not fulfilled, not rejected.

- Fulfilled - Operation completed.

- Rejected - Operation failed.

Syntax :

var promise = new Promise(function(resolve, reject){

//do something

});

Example:

promiseExample.html

<!--
  @description       : 
  @author            : @tandonprateek
  @group             : 
  @last modified on  : 04-19-2022
  @last modified by  : @tandonprateek
-->
<template>
    <lightning-input type="text" label="Input1" value={val1} onchange={val1Change}></lightning-input>
    <lightning-input type="text" label="Input2" value={val2} onchange={val2Change}></lightning-input>
    <br/>
    <lightning-button variant="brand" label="Demo Promise Example" title="" onclick={executePromise} class="slds-m-left_x-small"></lightning-button>
    <div>Promise status : {status}</div>
</template>

promiseExample.js

/**
 * @description       : 
 * @author            : @tandonprateek
 * @group             : 
 * @last modified on  : 04-19-2022
 * @last modified by  : @tandonprateek
**/
import { LightningElement } from 'lwc';

export default class PromiseExample extends LightningElement {
    val1; 
    val2;
    status;

    val1Change(event) {
        this.val1= event.target.value;
    }

    val2Change(event) {
        this.val2= event.target.value;
    }
    
  promiseDemoExample(arg1, arg2) {
    return new Promise((resolve, reject) => {
      if (arg1 == arg2) resolve();
      else reject();
    });
  }

  executePromise() {
    this.promiseDemoExample(this.val1, this.val2)
      .then((result) => {
        this.status = "Resolved and Fulfilled";
      })
      .catch((result) => {
        this.status = "Rejected and Failed";
      });
  }
}

The promiseDemoExample method returns a Promise which will resolve in the future. When we call the promiseDemoExample method with 2 parameters, it will check if they are equal, if they are equal promise will resolve, or else it will reject the promise.

In executePromise method when a promise is resolved or rejected it will call either .then() method (when resolved) or .catch() method (when rejected).

Every time a promise is resolved it will go in .then() block and when a promise is rejected it will go into .catch() block. Along with it, you can also create .finally() block which will execute no matter what happens to promise.

In .then() or .catch() method you can chain other promise as well. Using chaining, you can execute the asynchronous method in sequential order.

For Example:

executePromise() {
    this.promiseDemoExample(this.val1, this.val2)
      .then((result) => {
        //do something or add new promise
      })
      .then((result) => {
        //do something or add new promise
      })
      .catch((result) => {
        //rejected
      });
  }

In the next post, I will discuss the Async/Await methods, as these methods are extensions of Promises. So stay tuned till then.

Dynamic Tree Structure with LWC and Apex

noreply@blogger.com (Prateek Tandon) — Thu, 14 Apr 2022 17:42:00 +0000

In this post, I am going to share a component that I built while playing with LWC(Lightning Web Components). This is a simple LWC component with most logic handled by Apex.

While playing, I decided to create a sample tree structure which I think is useful to get the proper hierarchy for the records having self-relationship or child relationships. In this example, I want to display a complete view of all Accounts as well as a hierarchy for accounts within a single tree itself.

With LWC, I am able to make this tree structure minimum lines of code in my HTML component by using <lightning-tree></lightning-tree>. With the help of this component, it displays the related contacts, and cases for an Account. I have also created a self lookup relationship on Account which will have a hierarchy of Accounts, and this hierarchy will be displayed in the same tree structure along with other relationships.

Below is the code:

 DynamicTreeStructureController.cls

    /**
 * @description       : 
 * @author            : @tandonprateek
 * @group             : 
 * @last modified on  : 04-13-2022
 * @last modified by  : @tandonprateek
**/
public with sharing class DynamicTreeStructureController {
    public DynamicTreeStructureController() {

    }

    private static Map<Id, TreeStructure> result;
    private static Map<Id, Id> childIdMap;

    /**
    Static Method to be fed in @wire for LWC
    */
    @AuraEnabled(cacheable=true)
    public static List<TreeStructure> getAccounts(){
        result = new Map<Id, TreeStructure>();
        childIdMap = new Map<Id, Id>();
        Map<Id, Account> accMap = new Map<Id, Account>([SELECT Id, Name FROM Account WHERE ParentId = null]);
        if(!accMap.isEmpty()){
            startFetchingAccountDetails(accMap);
        }
        System.debug(JSON.serialize(result));
        return result.values();
    }

    /**
    * Recursion method to get all levels of accounts and their related records
    */
    private static List<TreeStructure> startFetchingAccountDetails(Map<Id, Account> accMap){
        Map<Id, TreeStructure> parentStructure = gatherAllAccountInformation(accMap);

        //attach the first level to actual result and rest will auotmatically link
        //due to pass by reference way
        if(result == null || result.isEmpty()){
            result.putAll(parentStructure);
        }
        Map<Id, Account> childMap = new Map<Id, Account>([SELECT Id, Name, DemoLight12__Account__c FROM Account WHERE DemoLight12__Account__c =: accMap.keySet()]);
        if(childMap != null && !childMap.isEmpty() && childMap.size() > 0){
            Map<Id, Id> accChildIdMap = new Map<Id, Id>();
            for(Id childAccountId : childMap.keySet()){
                Account child = childMap.get(childAccountId);
                childIdMap.put(child.Id, child.DemoLight12__Account__c);
            }

            //run this method recursively to get all child levels.
            List<TreeStructure> childStructure = startFetchingAccountDetails(childMap);
            for(TreeStructure child : childStructure){
                TreeStructure parent = parentStructure.get(childIdMap.get(child.name));
                parent.items.add(child);
            }
        }
        return parentStructure.values();
    }

    /**
    * Method to gather all information for all accounts recieved
    */
    private static Map<Id, TreeStructure> gatherAllAccountInformation( Map<Id, Account> accMap){
        Map<Id, TreeStructure> result = new Map<Id, TreeStructure>();

        Map<Id, List<Contact>> accConMap = new  Map<Id, List<Contact>>();
        Map<Id, List<Opportunity>> accOppCMap = new Map<Id, List<Opportunity>>();
        Map<Id, List<Case>> conCaseCMap = new Map<Id, List<Case>>();

        //gather all contacts
        for(Contact con : [SELECT Id, Name, AccountId FROM Contact WHERE AccountId =: accMap.keySet()]){
            if(!accConMap.containsKey(con.AccountId)){
                accConMap.put(con.AccountId, new List<Contact>());
            }
             accConMap.get(con.AccountId).add(con);
        }

        //gather all cases
        for(Case cas : [SELECT Id, CaseNumber, ContactId FROM Case WHERE ContactId =: accConMap.keySet()]){
            if(!conCaseCMap.containsKey(cas.ContactId)){
                conCaseCMap.put(cas.ContactId, new List<Case>());
            }
            conCaseCMap.get(cas.ContactId).add(cas);
        }

        for(Id accountId : accMap.keySet()){
            Account acc = accMap.get(accountId);
            TreeStructure accStructure = new TreeStructure(acc.name, accountId, false, null);

            //add all contacts if present
            if(accConMap.containsKey(accountId)){
                TreeStructure conStructure = new TreeStructure('Contacts', 'Contacts', false, null);
                for(Contact con :  accConMap.get(accountId)){
                    conStructure.items.add( new TreeStructure(con.Name, con.Id, false, null));
                    if(conCaseCMap.containsKey(con.Id)){
                        TreeStructure caseStructure = new TreeStructure('Cases', 'Cases', false, null);
                        for(Case cas : conCaseCMap.get(con.Id)){
                            caseStructure.items.add( new TreeStructure(cas.CaseNumber, cas.Id, false, null));
                        }
                        conStructure.items.add(caseStructure);
                    }
                }
                accStructure.items.add(conStructure);
            }

            result.put(accountId, accStructure);
        }
        return result;
    }
}

  

 TreeStructure.cls

    /**
 * @description       : 
 * @author            : @tandonprateek
 * @group             : 
 * @last modified on  : 04-13-2022
 * @last modified by  : @tandonprateek
**/
public class TreeStructure{
    @AuraEnabled public String label;
    @AuraEnabled public String name;
    @AuraEnabled public Boolean expanded;
    @AuraEnabled public List<TreeStructure> items;
    public TreeStructure(String label, String name, Boolean expanded, List<TreeStructure> items){
        this.label = label;
        this.name = name;
        this.expanded = expanded;
        if(items != null && items.size() > 0){
            this.items = items;
        }else{
            this.items = new List<TreeStructure>();
        }
    }
}

  

  dynamicTreeStructure.html

      <!--
  @description       : 
  @author            : @tandonprateek
  @group             : 
  @last modified on  : 04-13-2022
  @last modified by  : @tandonprateek
-->
<template>
    <lightning-card title="Tree Components with mutliple nested Accounts and other child records of Accounts">
      <div class="slds-m-top_medium slds-m-bottom_x-large">
        <!-- Simple -->
        <template if:true={accounts.data}>
          <div class="slds-p-around_medium lgc-bg">
            <lightning-tree items={accounts.data} header="Accounts"></lightning-tree>
          </div>
        </template>
      </div>
    </lightning-card>
  </template>

    

 dynamicTreeStructure.js   

      /**
 * @description       : 
 * @author            : @tandonprateek
 * @group             : 
 * @last modified on  : 04-13-2022
 * @last modified by  : @tandonprateek
**/
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/DynamicTreeStructureController.getAccounts';

export default class Dynamic_Tree_Structure extends LightningElement {
  @wire(getAccounts) accounts;
}

    
Important: Above solution is tested with 4 level hierarchy of Accounts. We need to consider the governor limits and might need to modify the logic as per the requirements.

Let's Communicate !!! Lightning Message Service | Message Channel | Salesforce

noreply@blogger.com (Prateek Tandon) — Sat, 06 Jun 2020 05:39:00 +0000

Salesforce introduced a new feature Lightning Message Service (LMS) in Winter 20 and is generally available in Summer 20. This feature allows developers to easily communicate between VF and Lightning. This feature provides a quick channel to which consumers can consume and get both updates and convenient tags/modules, so developers don't have to worry about CometD resources and/or complicated Javascript.

In this blog, I will share with you how to create an LMS channel and then write code in LWC and VF both to send messages.

Use Case: I want to display selected account record details on the VF Page, I will select the account record on the LWC component and for that account, all information will be displayed on VF Page.

Before we start writing our code, we have to create a Message Channel. As of right now, the only way to leverage this is by using Metadata API.

How we can create Message Channel?

Message Channel can be created using VS Code. You need to follow the below steps to create Message Channel.

Create a folder under force-app/menu/default folder and the folder name will be "messageChannels"
Once you have created the folder, under that folder you need to create a file with naming convention as "SampleMessageChannel.messageChannel-meta.xml".
Once you have created the file we need to add some XML code into that file and will look something like below

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

<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
   <masterLabel>PassRecordId</masterLabel>
   <isExposed>true</isExposed>
   <description>This Lightning Message Channel sends information from LWC to VF.</description>
   <lightningMessageFields>
       <fieldName>recordIdToSend</fieldName>
       <description>Record Id to be send</description>
   </lightningMessageFields>
   <lightningMessageFields>
       <fieldName>objectName</fieldName>
       <description>Identifies for which object we are sending the record id</description>
   </lightningMessageFields>
</LightningMessageChannel>

Where the "lightningMessageFields" tag is used to create a parameter that we need to send via LMS. We can create as many fields as we want per requirement. In my case, I have created "recordIdToSend" as a parameter which will hold Account record Id and "objectName" will hold the object name as 'Account'.

4. Now, we need to add the entry for LMS in package.xml

<types>
        <members>*</members>
        <name>LightningMessageChannel</name>
    </types>

Let's create the LWC component and VF Page to publish and subscribe to the LMS.

VF Page code

To subscribe to the LMS on the VF page we use sforce.one API.

If you see in the below code I have subscribed the channel using sforce.one.subscribe method.

<!--
  @File Name          : LMS_AccountDetails.page
  @Description        : 
  @Author             : @tandonprateek
  @Group              : 
  @Last Modified By   : @tandonprateek
  @Last Modified On   : 6/6/2020, 7:52:36 AM
  @Modification Log   : 
  Ver       Date            Author      		    Modification
  1.0    6/6/2020   @tandonprateek     Initial Version
-->

<apex:page controller="LMS_AccountDetailsController">
    <script>
        var PASSRECORDID = "{!JSENCODE($MessageChannel.PassRecordId__c)}";
        var subscriptionToMC;
        if (!subscriptionToMC) {
            subscriptionToMC = sforce.one.subscribe(PASSRECORDID, onPublished, {scope: "APPLICATION"});
        }

        function onPublished(message) {
            console.log('recordId on VF page ==== ' + message.recordIdToSend);
            getAccountData(message.recordIdToSend);
        }
    </script>
    <apex:form>
        <apex:actionFunction name="getAccountData" action="{!fetchAccountDetailRecord}"  reRender="accountDetailsBlock">
            <apex:param name="recordId" value=""></apex:param>
        </apex:actionFunction>
        <apex:pageBlock id="accountDetailsBlock" title="VF Page Display Account Details">
            <apex:pageBlockSection id="accountSection">
                
                    <apex:outputField value="{!accDetailObject.Name}"></apex:outputField>
                    <apex:outputField value="{!accDetailObject.Phone}"></apex:outputField>
                
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Class

/**
 * @File Name          : LMS_AccountDetailsController.cls
 * @Description        : 
 * @Author             : @tandonprateek
 * @Group              : 
 * @Last Modified By   : @tandonprateek
 * @Last Modified On   : 6/6/2020, 7:53:48 AM
 * @Modification Log   : 
 * Ver       Date            Author      		    Modification
 * 1.0    6/6/2020   @tandonprateek     Initial Version
**/

public with sharing class LMS_AccountDetailsController {

    public Account accDetailObject {get;set;}

    
    /**
    * @description 
    * @author @tandonprateek | 6/6/2020 
    * @return Pagereference 
    **/
    public Pagereference fetchAccountDetailRecord(){
        String accId = Apexpages.currentPage().getParameters().get('recordId');
        accDetailObject = [Select Id, Name, Phone from Account where Id =: accId];
        return null;
    }
}

LWC Component code

<!--
   @File Name          : accountInfoComponent.html
   @Description        : 
   @Author             : @tandonprateek
   @Group              : 
   @Last Modified By   : @tandonprateek
   @Last Modified On   : 6/6/2020, 7:51:35 AM
   @Modification Log   : 
   Ver       Date            Author      		    Modification
   1.0    6/6/2020   @tandonprateek     Initial Version
   -->
<template>
   <div class="slds-page-header">
      <div class="slds-grid">
         <div class="slds-col slds-has-flexi-truncate">
            <p class="slds-text-title_caps slds-line-height_reset">LWC Component Account Info</p>
            <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate"  title="AccountInfo">Acount Info</h1>
         </div>
      </div>
   </div>
   <lightning-button label="Get All Accounts" onclick={handleClick}></lightning-button>
   <lightning-card title="Account Result Data" icon-name="custom:custom3">
      <div class="slds-m-around_medium">
         <ul>
            <template for:each={finalData} for:item="acc">
               <li key={acc.Id} >
                  <a hrefv="javascript:void(0);" data-record-id={acc.Id} onclick={handleClickonAccountName}>{acc.Name}</a>
               </li>
            </template>
         </ul>
      </div>
   </lightning-card>
</template>

To use LMS in LWC we need to first import the methods from lightning/MessageChannel library and import the message channel, in my case, I need to add the below code to my LWC js file.

import { publish,createMessageContext,releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import PassRecordId from "@salesforce/messageChannel/PassRecordId__c";

Below is my LWC js file

/**
 * @File Name          : accountInfoComponent.js
 * @Description        : 
 * @Author             : @tandonprateek
 * @Group              : 
 * @Last Modified By   : @tandonprateek
 * @Last Modified On   : 6/6/2020, 7:51:50 AM
 * @Modification Log   : 
 * Ver       Date            Author             Modification
 * 1.0    6/6/2020   @tandonprateek     Initial Version
**/
import { LightningElement, track } from "lwc";
import { searchAccountByName, searchAccountById, searchAccountsByIds, fetchAccounts, fetchAllAccounts } from "c/accountService";
import { publish,createMessageContext,releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import PassRecordId from "@salesforce/messageChannel/PassRecordId__c";

export default class AccountInfoComponent extends LightningElement {
    searchKey = '';
    searchKeyText = '';
    data = [];
    context = createMessageContext();

    handleClick() {
        fetchAllAccounts()
            .then(result => {
                this.data = result;
                console.log(result);
            })
            .catch(error => {
                console.log(error.message);
            });
    }

    get finalData(){
        return this.data;
    }

    handleClickonAccountName(event){
        //let recordId = event.currentTarget.getAttribute('key');
        //let recordId = event.target.value;
        let recordId = event.target.dataset.recordId;
        console.log('recordId ==== ' + recordId);
        const payload = {
            recordIdToSend: recordId,
            objectName: 'Account'
        };

        publish(this.context, PassRecordId, payload);
    }

}

Here I have used Service Components to get the account records, you can refer to my previous blog about Service Component in LWC.

Now, to publish the LMS I need to call the publish method to call the LMS channel and pass the payload to the channel.

Below is the demo:

In summary, LMS provides us a very easy and quick way to move complex data across the DOM between LWC and VF Page, allowing for better interoperability.

References:

https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_message_channel.htm

https://newstechnologystuff.com/2020/03/22/lightning-message-service-quick-demo/

Useful VS Code Extensions

noreply@blogger.com (Prateek Tandon) — Sat, 30 May 2020 18:32:00 +0000

I, like many others, are fans of extensions which helps in boosting productivity while coding. I am constantly looking for such plugins, settings, themes, and productive tips to enhance my coding experience.

Since I started using VS Code for Salesforce development I was looking for some cool plugins which increase my productivity and also help me to gain my coding experience.

I am guessing most people are already aware of some extensions or maybe using on a daily basis because these extensions are useable.

Therefore, I decided to create a list with some of my favorite or maybe useful VS Code extensions. So without further ado lets list out the extensions.

1. Salesforce Extension Pack

This extension is very important if you are doing Salesforce development. This tool will provide features for working with development orgs (scratch orgs, sandboxes and DE orgs), Apex, Aura components, Lightning Web Components, Visualforce.

2. Salesforce Documenter

This extension helps in facilitating proper and structured code documenting for Salesforce related files. This tool is very useful for the developers as it makes the code more readable and easy to understand by automating tasks such as adding File headers as well as Method headers. Also, this tool is very useful for lazy 😴 developers like me who usually add one-liners as method headers.

After installing this extension to VS Code, go to any Apex class and select method and right-click you will see the option as 'Generate Apex Method Header', click on it and you will get the header added automatically on the method.

Also, if you see there is another option available as 'Insert File Header', this will add the headers on the Apex class.

3. Salesforce Package.xml Generator

This extension provides a User Interface to choose metadata components for the Package.xml file for development against sandboxes or DE orgs. This is similar to the Eclipse Force.com IDE Add/Remove Metadata Components option.

4. Local History

A visual code extension for maintaining the local history of files. This extension is a savior for me many times.

This extension will help you out when you change a file or delete the file by accident 😈. Every time you make changes to a file, a copy of the old content of that file is stored in local history. With the help of this tool, at any time you can compare the existing code with any older version of the file from history.

5. Highlight Matching Tag

As the name suggests this extension highlights the matching closing tags, be it on the same line or far down the editor. This is especially useful when you have nested tags and several lines of codes to read.

In the above image as you can see this tool highlighted the start and end 'div' tag.

6. Indented Block Highlighting

This one is my most favorite extension as it exactly does the same thing as the name suggests. This tool highlights the indented block which you are working with. In my case, it highlights the block within if

So this is my list of VS Code extensions that I use on a daily basis. Some of the extensions are not that popular but they got the job done.

Lightning Web Component : What are Service Components & How are they Useful?

noreply@blogger.com (Prateek Tandon) — Sun, 24 May 2020 18:23:00 +0000

As we keep working on complex LWC applications, it’s inevitable that complexity will increase. With increased complexity in code, we will need to write a modular reusable code. In this blog, I will try to explain how we can create a reusable LWC code using Service Components.

Let's try to define What is Service Components?

A service component is a component that provides a set of functionalities in a single component. Ideally, the service should be specialized, generic, and reusable. Also, this component does not have a markup, i.e. this is not visible by default.

This helps in reducing code duplication and simplifies the component's code. This, in turn, makes the code more robust and easier to maintain.

How we can Create a Service Component?

I have taken an Account object for my example and I will be creating a service component for my Account object.

AccountService.cls as Apex Class:

public with sharing class AccountService {
    
    public AccountService() {

    }

    @AuraEnabled
    public static List<Account> searchAccountByName(String accountName) {
        List<Account> accounts = [SELECT Id, Name FROM Account WHERE Name=:accountName];
        if (accounts.size() > 0) {
            return accounts;
        }
        return null;
    }

    @AuraEnabled
    public static List<Account> fetchAccountById(String accountId) {
        List<Account> accounts = [SELECT Id, Name FROM Account WHERE Id=:accountId];
        if (accounts.size() > 0) {
            return accounts;
        }
        return null;
    }

    @AuraEnabled
    public static List<Account> fetchAccountsByIds(List<Id> accountIds) {
        List<Account> accounts = [SELECT Id, Name FROM Account WHERE Id in: accountIds];
        if (accounts.size() > 0) {
            return accounts;
        }
        return null;
    }

    @AuraEnabled
    public static List<Account> searchAccounts(String accountName) {
        String query = 'Select Id, Name from Account where Name like ' + '\'%' + accountName + '%\'';
        List<Account> accounts = Database.query(query);
        if (accounts.size() > 0) {
            return accounts;
        }
        return null;
    }

    @AuraEnabled
    public static List<Account> fetchAllAccounts(List<Id> accountIds) {
        List<Account> accounts = [SELECT Id, Name FROM Account LIMIT 10];
        if (accounts.size() > 0) {
            return accounts;
        }
        return null;
    }
}

accountService as Service Component:

import getAccountByName from "@salesforce/apex/AccountService.searchAccountByName";
import getAccountById from "@salesforce/apex/AccountService.fetchAccountById";
import getAccountsByIds from "@salesforce/apex/AccountService.fetchAccountsByIds";
import getAccounts from "@salesforce/apex/AccountService.searchAccounts";
import getAllAccounts from "@salesforce/apex/AccountService.fetchAllAccounts";

const searchAccountByName = async accountName => {
   const response = await getAccountByName({ accountName: accountName });
   return response;
};

const searchAccountById = async accountId => {
    const response = await getAccountById({ accountId: accountId });
    return response;
};

const searchAccountsByIds = async accountIds => {
    const response = await getAccountsByIds({ accountIds: accountIds });
    return response;
};

const fetchAccounts = async accountName => {
    const response = await getAccounts({ accountName: accountName });
    return response;
 };

const fetchAllAccounts = () => {
   return new Promise(resolve => {
    getAllAccounts()
         .then(data => {
            resolve(data);
         })
         .catch(error => {
            resolve(error);
         });
   });
};

export { searchAccountByName, searchAccountById, searchAccountsByIds, fetchAccounts, fetchAllAccounts };

In the above component, I have exposed the below services

searchAccountByName: it accepts the search key as accountName and will return the account record with the exact account name
searchAccountById: it accepts the search key as accountId and will return the account with the exact account id
searchAccountsByIds: it accepts the set of account ids and will return the list of account
fetchAccounts: it accepts the search key as accountName and will return the list of Account records which contains name as search keyword.
fetchAllAccounts: this returns the list of accounts.

You will also notice that I have followed the Singleton pattern to develop this component i.e. this component has only one instance.

Now to use the above services, I have created one component which will consume these services.

accountInfo as LWC Component:

accountInfoComponent.html

<template>
        <lightning-button label="Get All Accounts" onclick={handleClick}></lightning-button>
      
        <lightning-layout vertical-align="end" class="slds-m-bottom_small">
            <lightning-layout-item flexibility="grow">
                <lightning-input type="search" onchange={handleKeyChange} label="Search By Exact Name" value={searchKey} ></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item class="slds-p-left_xx-small">
                <lightning-button label="Search By Exact Name" onclick={handleSearchAccountByName}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>

        <lightning-layout vertical-align="end" class="slds-m-bottom_small">
            <lightning-layout-item flexibility="grow">
                <lightning-input type="search" onchange ={handleKeyTextChange} label="Filter By Name" value={searchKeyText} ></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item class="slds-p-left_xx-small">
                <lightning-button label="Filter By Name" onclick={handleSearchAccountsByName}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>

        
            <lightning-card title="Account Result Data" icon-name="custom:custom3">
                <div class="slds-m-around_medium">
                        <ul>
                            <template for:each={finalData} for:item="acc">
                                <li key={acc.Id}>{acc.Name}
                                    
                                </li>
                            </template>
                        </ul>
                </div>
            </lightning-card>

        
      </template>

accountInfoComponent.js

import { LightningElement, track } from "lwc";
import { searchAccountByName, searchAccountById, searchAccountsByIds, fetchAccounts, fetchAllAccounts } from "c/accountService";


export default class AccountInfoComponent extends LightningElement {
    searchKey = '';
    searchKeyText = '';
    data = [];


    handleKeyChange(event) {
        this.searchKey = event.target.value;
    }

    //get all the accounts
    handleClick() {
        fetchAllAccounts()
            .then(result => {
                this.data = result;
                console.log(result);
            })
            .catch(error => {
                console.log(error.message);
            });
    }

    //get Account by Name
    handleSearchAccountByName() {
        this.fetchAccountByName(this.searchKey);
    }

    async fetchAccountByName(accountName) {
        try {
            let account = await searchAccountByName(accountName);
            this.data = account;
        } catch (err) {
            console.log(err);
        }
    }

    //get Account by Id
    handleSearchAccountById() {
        this.fetchAccountById(this.accountId);
    }

    async fetchAccountById(accountId) {
        try {
            let account = await searchAccountById(accountId);
            this.data = account;
        } catch (err) {
            console.log(err);
        }
    }

    //get Accounts by Ids
    handleSearchAccountsByIds() {
        this.fetchAccountsByIds(this.accountIds);
    }

    async fetchAccountsByIds(accountIds) {
        try {
            let accounts = await searchAccountsByIds(accountIds);
            this.data = accounts;
        } catch (err) {
            console.log(err);
        }
    }

    handleKeyTextChange(event){
        this.searchKeyText = event.target.value;
    }

    //get accounts by name with a search text on name
    handleSearchAccountsByName() {
        this.fetchAccountsByName(this.searchKeyText);
    }

    async fetchAccountsByName(accountName) {
        try {
            let accounts = await fetchAccounts(accountName);
            this.data = accounts;
        } catch (err) {
            console.log(err);
        }
    }

    get finalData(){
        console.log('wwww ' + JSON.stringify(this.data))    ;
        return this.data;
    }

}

accountInfoComponent.js-met.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>
    </targets>
</LightningComponentBundle>

References: https://developer.salesforce.com/blogs/2019/05/lightning-web-components-service-components.html

Part II : Change Data Capture ... Learn How To Subscribe Change Data Capture to External Source

noreply@blogger.com (Prateek Tandon) — Wed, 20 May 2020 12:48:00 +0000

In my previous blog, I have discussed Salesforce Change Data Capture and how this feature helps to publish change events that represent changes to records. I have taken an example to display change event records or messages on the Lightning Web Component using Platform Events. If your interested to have a look at my previous blog, please feel free to visit on below link:

Understanding Change Data Capture using Asynchronous Apex Triggers and Handling Platform Event in Lightning Web Components

In this blog, we will discuss how we can subscribe to Change Data Capture events and get the changed records that we can easily import to the external source.

To explain this I will be taking MuleSoft as a middleware tool that receives the message from the Subscribe Channel from salesforce and convert the message to the required format of another tool, so I will be passing change event records to MuleSoft using Subscription Channel and I will be fetching all the changed Case records in MuleSoft.

First, we need to set up the Change Data Capture and select the object for which we need to receive notifications for record changes. For my example, I will be selecting the Case object.

Once you have selected the object and saved it, salesforce will create a Subscription Channel with a name as CaseChangeEvent. To understand more on Subscription Channel, please click here. Also, in the previous blog, I have discussed little regarding Subscription Channel and naming conventions.

We are all done from the Salesforce side, now we need to move to the Mule platform and see how we can subscribe to the streaming channel provided by Salesforce.

So, in MuleSoft we will be selecting Salesforce connector and we will be using the Subscription Channel component, to receive events from Salesforce.

We will do the required Connector Configuration and provide the Streaming channel name. In this example, I have used the 'Basic Username and Password' connection and the channel name will be '/data/CaseChangeEvent'.

Below will be the MuleSoft flow:

Configuration for Subscriber Channel component and Salesforce Connector:

Now to read the response from the subscribed channel we will be using the Transform Message component and Logger component to generate the log for the payload which we have received from the channel.

Here, you can transform the payload into JSON object or Array of an object as per your convenience or whatever format is supported by another tool where you want to import the data.

Finally, its time to see the payload which we have got in the logger.

If you see the payload carefully which we have received it gives the complete information about the record that is changed in salesforce. Please refer to the change event message structure.

{
  "data": {
    "schema": "<schema_ID>", 
    "payload": {
      "ChangeEventHeader": {
         "entityName" : "...",
         "recordIds" : "...",
         "changeType" : "...",
         "changedFields": [...],
         "changeOrigin" : "...",
         "transactionKey" : "...",
         "sequenceNumber" : "...",
         "commitTimestamp" : "...",
         "commitUser" : "...",
         "commitNumber" : "..."
      }, 
     "field1":"...",
     "field2":"...",
     . . .
    }, 
    "event": {
      "replayId": <replayID>
    }
  }, 
  "channel": "/data/<channel>"
}

Please check out the descriptions of the fields which change event message contains from the below link:
Change Event Message Structure

So instead of doing periodic exports or imports of data or repeated API, we can easily make use of Change Data Capture to update in the external system. Capturing changes with Change Data Capture event notifications ensures that your external data can be updated in real-time and stays fresh.

I hope this will help to understand how we can subscribe to the change events from Salesforce using Change Data Capture to External Source.

References:

Looking forward to everyone's suggestions and comments!!!

Part I : Understanding Change Data Capture using Asynchronous Apex Triggers and Handling Platform Event in Lightning Web Components

noreply@blogger.com (Prateek Tandon) — Mon, 18 May 2020 08:53:00 +0000

Salesforce introduced Change Data Capture and Asynchronous Apex Triggers in Summer 19 release. Change Data Capture publishes change events, which represents changes to Salesforce records. Changes include the creation of a new record, updates to an existing record, deletion of a record, and undeletion of a record.

Available in: both Salesforce Classic and Lightning Experience
Available in: Enterprise, Performance, Unlimited, and Developer editions

Use of Change Data Capture events to:

Receive notifications of Salesforce record changes, including create, update, delete, and undelete operations.
Capture field changes for all records.
Get broad access to all data regardless of sharing rules.
Get information about the change in the event header, such as the origin of the change, which allows ignoring changes that your client generates.
Perform data updates using transaction boundaries.
Use a versioned event schema.
Subscribe to mass changes in a scalable way.
Get access to retained events for up to three days

Supported Objects

Change events are available for all custom objects defined in your Salesforce org and a subset of standard objects. To see the complete list of supported standard objects, please click here.

Understanding the Flow for Change Data Capture

So when a record is created or updated, Change Data Capture publishes an event and a change event trigger can then process that event asynchronously. Above is a simple example to understand the flow better. Once any record completes its execution then change data publish an event and then Asynchronous Apex Trigger starts processing.

Setup Change Data Capture

First, we need to enable Change Data Capture for the object. In Setup Search for Change data Capture and open it.

Once we have enabled it, we need to subscribe to the change events. To subscribe to the change events we will be using Subscribe with Apex Triggers. But before diving to apex triggers we need to understand the naming conventions for the channels which will be subscribing to the change.

Subscription Channels

Use the subscription channel that corresponds to the change notifications you want to receive. The channel name is case-sensitive.

All Change Events

/data/ChangeEvents

A Standard Object

/data/(Standar Object Name)ChangeEvent

For example, the channel to subscribe to change events for Case records is:
/data/CaseChangeEvent

A Custom Object

/data/(Custom Object Name)__ChangeEvent

For example, the channel to subscribe to change events for Candidate__c custom object records is:
/data/Candidate__ChangeEvent

If you want to learn more about Change Data Capture, please click here.

Subscription Using Apex Triggers

The change event trigger fires when one or a batch of change events is received. The change event trigger is not like object triggers, it runs asynchronously after the database transaction is completed. The asynchronous execution makes change event triggers ideal for processing resource-intensive business logic while keeping transaction-based logic in the object trigger. Change event triggers can help reduce transaction processing time.

Below is the example:

trigger CaseChangeEventTrigger on CaseChangeEvent (after insert) {

    List<CaseChangeEvent> changes = Trigger.new;
    
    Set<String> caseIds = new Set<String>();
    
    for (CaseChangeEvent change : changes) {
        // Get all Record Ids for this change and add to the set
        List<String> recordIds = change.ChangeEventHeader.getRecordIds();
        caseIds.addAll(recordIds);
    }
    
    // Publish platform events for predicted red accounts
    List<DemoLight12__Case_Change_Event__e> caseChangeEvents = new List<DemoLight12__Case_Change_Event__e>();
    for (Case caseObj : [Select Id,CaseNumber from Case where Id in: caseIds]) {
        caseChangeEvents.add(new DemoLight12__Case_Change_Event__e(DemoLight12__CaseNumber__c=caseObj.CaseNumber));
    }
    
    System.debug('RED_ACCT: ' + caseChangeEvents);
    if (caseChangeEvents.size() > 0) {
        EventBus.publish(caseChangeEvents);
    }
}

In the above code, I have created a platform event as Case_Change_Event__e, and by using EventBus.publish method I have published an event message.

If you want to learn more about Platform Events, please click here.

Handling Platform Events in Lightning Components

The lightning/empApi module provides access to methods for subscribing to a streaming channel and listening to event messages. All streaming channels are supported, including channels for platform events, PushTopic events, generic events, and Change Data Capture events.

Note:

This component is available in the 44.0 API version or later.
This is available in Lightning Experience and only supported in desktop browsers.

Use case: I want to display a message on the Case Detail record page that particular case has been updated by others and the logged-in person is working on different cases, so on the case detail page logged in person will get a message displayed at the top which case has been updated. Below are the components I have used to achieve my use case:

Setup Change Data Capture on Case object explained above.
Create a Platform Event as Case_Change_Event__e and one custom field as Casenumber__c within the platform event object to store the CaseNumber which got updated.
Create an Async Apex trigger as CaseChangeEventTrigger (explained above) to publish the platform event.
Custom LWC component as caseChangeEvent which will subscribe to the platform event and will update the message on UI.

Below is the code for the LWC component which will be added on the Case Detail record page and will subscribe to the platform event and display the message of any records got updated.

caseChangeEvent.html

<template>
    <lightning-card title="Pinned Updates on Cases" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            {finalMessage}
        </div>
        
    </lightning-card>
</template>

caseChangeEvent.js

import { LightningElement, api } from 'lwc';
import { subscribe, unsubscribe, onError, setDebugFlag, isEmpEnabled } from 'lightning/empApi';

export default class EmpApiLWC extends LightningElement {
    channelName = '/event/DemoLight12__Case_Change_Event__e';
    isSubscribeDisabled = false;
    isUnsubscribeDisabled = !this.isSubscribeDisabled;

    message;

    renderedCallback() {
        const messageCallback = (response) => {
            console.log('New message received : ', JSON.stringify(response));
            // Response contains the payload of the new message received
            console.log('New message received : ', response.data.payload.DemoLight12__CaseNumber__c);
            this.message = 'Case ' + response.data.payload.DemoLight12__CaseNumber__c + ' has been updated';
        };

        // Invoke subscribe method of empApi. Pass reference to messageCallback
        subscribe(this.channelName, -1, messageCallback).then(response => {
            // Response contains the subscription information on successful subscribe call
            console.log('response === ' + JSON.stringify(response));
            console.log('Successfully subscribed to : ', JSON.stringify(response.channel));
        })
    }

    registerErrorListener() {
        // Invoke onError empApi method
        onError(error => {
            console.log('Received error from server: ', JSON.stringify(error));
            // Error contains the server-side error
        });
    }

    get finalMessage(){
        return this.message;
    }
}

If you observe in the above code I have imported lightning/empApi which provides below method

subscribe - Subscribes to a given channel
unsubscribe - Unsubscribes from the channel using the given subscription object
onError - Registers a listener to errors that the server returns.
setDebugFlag - Set to true or false to turn console logging on or off respectively.
isEmpEnabled - Returns a promise that holds a Boolean value. The value is true if the EmpJs Streaming API library can be used in this context; otherwise false.

To learn more about lightning/empApi, please click here.

caseChangeEvent.js-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__RecordPage</target>
   </targets>
</LightningComponentBundle>

Live Demo:

I hope this will help to understand platform events handling in lightning components.

Looking forward to everyone's suggestions and comments!!!

LWC : Calling Apex Method, Pagination, Fetching Child Records and Use of Child Templates

noreply@blogger.com (Prateek Tandon) — Mon, 29 Apr 2019 18:15:00 +0000

Hello guys, I am back with some new features of LWC. In this blog I will be covering the major features of LWC which we use on daily basis when we are coding with Visualforce or Aura components.

In this blog I will be explaining how to display list of Accounts with Pagination and also I will be explaining how to display child records like Contacts related to respective Account. I will also explain how we can do insert operation on Account object.

Let us start developing with lightning speed.

First we will be creating a controller class.

AccountController

1:  public class AccountController {  
2:       @AuraEnabled(cacheable=true)  
3:    public static PagedResult getAccountList(Integer pageNumber) {  
4:      Integer pageSize = 3;  
5:      Integer offset = (pageNumber - 1) * pageSize;  
6:      PagedResult result = new PagedResult();  
7:      result.pageSize = pageSize;  
8:      result.pageNumber = pageNumber;  
9:      result.totalItemCount = Database.countQuery('SELECT count() from Account');  
10:      result.records = Database.query('SELECT Id, Name, AccountNumber, Phone, '+  
11:                  '(Select Id,Name from Contacts) contacts FROM Account' +   
12:                  ' ORDER BY Name LIMIT :pageSize OFFSET :offset');  
13:      return result;  
14:    }  
15:    @AuraEnabled(cacheable=true)  
16:    public static List<Contact> getContactRecords(String accId){  
17:      return [Select Id,Name from Contact where AccountId =: accId];  
18:    }  
19:  }

In the above code you guys must have noticed that I have used a wrapper class as 'PagedResult'. This wrapper class is used to hold list of Account records and pageNumber, pageSize etc.

'PagedResult' Wrapper class

1:  public class PagedResult {  
2:    @AuraEnabled  
3:    public Integer pageSize { get;set; }  
4:    @AuraEnabled  
5:    public Integer pageNumber { get;set; }  
6:    @AuraEnabled  
7:    public Integer totalItemCount { get;set; }  
8:    @AuraEnabled  
9:    public Object[] records { get;set; }  
10:  }

Next, we will be creating LWC component to display list of Account records and pagination.

accountList.html

1:  <template>  
2:    <lightning-card title="Account List" icon-name="custom:custom63">  
3:      <div class="slds-m-around_medium">  
4:        <template if:true={listMode}>  
5:          <template if:true={accounts.data}>  
6:            <table border="1">  
7:              <thead>  
8:                <tr>  
9:                  <th>  
10:                    Name  
11:                  </th>  
12:                  <th>  
13:                    Number  
14:                  </th>  
15:                  <th>  
16:                    Phone  
17:                  </th>  
18:                  <th>  
19:                    Number of Contacts  
20:                  </th>  
21:                </tr>  
22:              </thead>  
23:              <tbody>  
24:                <template for:each={accounts.data.records} for:item="acc">  
25:                  <tr key={acc.Id}>  
26:                    <td>{acc.Name}</td>  
27:                    <td>{acc.AccountNumber}</td>  
28:                    <td>{acc.Phone}</td>  
29:                    <td>  
30:                      <c-numbercontactslink accountobj={acc} data-id={acc.Id} onclick={getAllContacts}></c-numbercontactslink>  
31:                      <!-- lightning-button variant="base" label={acc.Contacts.length} title="Number of Contacts" data-id={acc.Id} onclick={getAllContacts}></lightning-button -->  
32:                    </td>  
33:                  </tr>  
34:                </template>  
35:              </tbody>  
36:            </table>  
37:            <c-pagination page-number={pageNumber} page-size={accounts.data.pageSize} total-item-count={accounts.data.totalItemCount}  
38:            onprevious={handlePreviousPage} onnext={handleNextPage}></c-pagination>  
39:            <lightning-button label="Create Account" title="Create Account Record" onclick={createAccount}></lightning-button>  
40:          </template>  
41:        </template>  
42:        <template if:true={createMode}>  
43:            <lightning-input label="Id" disabled value={accountId}></lightning-input>  
44:            <lightning-input label="Name" onchange={handleNameChange} class="slds-m-bottom_x-small"></lightning-input>  
45:            <lightning-button label="Save Record" variant="brand" onclick={saveAccount}></lightning-button>  
46:            <lightning-button label="Cancel Record" variant="brand" onclick={cancelAccount}></lightning-button>  
47:        </template>  
48:        <template if:true={showContacts}>  
49:          <lightning-card title="Related Contact List" icon-name="custom:custom63">  
50:          <table>  
51:              <thead>  
52:                <tr>  
53:                  <th>  
54:                    Name  
55:                  </th>  
56:                </tr>  
57:              </thead>  
58:              <tbody>  
59:                <template for:each={contacts} for:item="con">  
60:                  <tr key={con.Id}>  
61:                    <td>{con.Name}</td>  
62:                  </tr>  
63:                </template>  
64:              </tbody>  
65:            </table>  
66:          </lightning-card>  
67:        </template>  
68:      </div>  
69:    </lightning-card>  
70:  </template>

accountList.js

1:  import { LightningElement, wire, track} from 'lwc';  
2:  import { createRecord } from 'lightning/uiRecordApi';  
3:  import { ShowToastEvent } from 'lightning/platformShowToastEvent';  
4:  import { refreshApex } from '@salesforce/apex';  
5:  import ACCOUNT_OBJECT from '@salesforce/schema/Account';  
6:  import NAME_FIELD from '@salesforce/schema/Account.Name';  
7:  import ACCNUMBER_FIELD from '@salesforce/schema/Account.AccountNumber';  
8:  import getAccountList from '@salesforce/apex/AccountController.getAccountList';  
9:  import getContactRecords from '@salesforce/apex/AccountController.getContactRecords';  
10:  const CONTACT_FIELDS = [  
11:    'Contact.Name',  
12:    'Contact.Title',  
13:    'Contact.Phone',  
14:    'Contact.Email',  
15:  ];  
16:  export default class AccountListFunctionality extends LightningElement {  
17:    /** Current page in the account list. */  
18:    @track pageNumber = 1;  
19:    /** The number of items on a page. */  
20:    @track pageSize;  
21:    /** The total number of items matching the selection. */  
22:    @track totalItemCount = 0;  
23:    @wire(getAccountList, { pageNumber: '$pageNumber' })  
24:    accounts;  
25:    @track mode = 'list';  
26:    @track showContacts = false;  
27:    @track contacts;  
28:    createAccount(){  
29:      this.mode = 'create';  
30:    }  
31:    cancelAccount(){  
32:      this.mode = 'list';  
33:    }  
34:    handleNameChange(event) {  
35:      this.accountId = undefined;  
36:      this.name = event.target.value;  
37:      this.accnumber = event.target.value;  
38:    }  
39:    get listString() {  
40:      return JSON.stringify(this.accounts);  
41:    }  
42:    saveAccount() {  
43:      const fields = {};  
44:      fields[NAME_FIELD.fieldApiName] = this.name;  
45:      fields[ACCNUMBER_FIELD.fieldApiName] = this.accnumber;  
46:      const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };  
47:      createRecord(recordInput)  
48:        .then(account => {  
49:          this.accountId = account.id;  
50:          this.mode = 'list';  
51:          this.dispatchEvent(  
52:            new ShowToastEvent({  
53:              title: 'Success',  
54:              message: 'Account created',  
55:              variant: 'success',  
56:            }),  
57:          );  
58:        }).then(() => {  
59:          return refreshApex(this.accounts);  
60:        })  
61:        .catch(error => {  
62:          this.dispatchEvent(  
63:            new ShowToastEvent({  
64:              title: 'Error creating record',  
65:              message: error.message,  
66:              variant: 'error',  
67:            }),  
68:          );  
69:        });  
70:    }  
71:    get listMode(){  
72:      if(this.mode === 'list'){  
73:        return true;  
74:      }  
75:      return false;  
76:    }  
77:    get createMode(){  
78:      if(this.mode === 'create'){  
79:        return true;  
80:      }  
81:      return false;  
82:    }  
83:    handlePreviousPage() {  
84:      this.pageNumber = this.pageNumber - 1;  
85:    }  
86:    handleNextPage() {  
87:      this.pageNumber = this.pageNumber + 1;  
88:    }  
89:    getAllContacts(event){  
90:      this.showContacts = true;  
91:      let accId = event.target.getAttribute('data-id');  
92:      console.log('acc id ==== ' + accId);  
93:      getContactRecords({accId})  
94:        .then(result => {  
95:          this.contacts = result;  
96:        })  
97:        .catch(error => {  
98:          this.error = error;  
99:        });  
100:    }   
101:  }

'pagination.html' LWC Component

1:  <template>  
2:    <lightning-layout vertical-align="center" class="slds-m-horizontal_x-small">  
3:      <lightning-layout-item size="2">  
4:        <template if:false={isFirstPage}>  
5:          <lightning-button-icon icon-name="utility:chevronleft" onclick={handlePrevious}></lightning-button-icon>  
6:        </template>    
7:      </lightning-layout-item>  
8:      <lightning-layout-item size="8" class="nav-info">  
9:        {totalItemCount} items • page {currentPageNumber} of {totalPages}  
10:      </lightning-layout-item>  
11:      <lightning-layout-item size="2" class="nav-next">  
12:        <template if:false={isLastPage}>  
13:          <lightning-button-icon icon-name="utility:chevronright" onclick={handleNext}></lightning-button-icon>  
14:        </template>  
15:      </lightning-layout-item>  
16:    </lightning-layout>  
17:  </template>

'pagination.js'

1:  import { LightningElement, api } from 'lwc';  
2:  export default class Paginator extends LightningElement {  
3:    /** The current page number. */  
4:    @api pageNumber;  
5:    /** The number of items on a page. */  
6:    @api pageSize;  
7:    /** The total number of items in the list. */  
8:    @api totalItemCount;  
9:    handlePrevious() {  
10:      this.dispatchEvent(new CustomEvent('previous'));  
11:    }  
12:    handleNext() {  
13:      this.dispatchEvent(new CustomEvent('next'));  
14:    }  
15:    get currentPageNumber() {  
16:      return this.totalItemCount === 0 ? 0 : this.pageNumber;  
17:    }  
18:    get isFirstPage() {  
19:      return this.pageNumber === 1;  
20:    }  
21:    get isLastPage() {  
22:      return this.pageNumber >= this.totalPages;  
23:    }  
24:    get totalPages() {  
25:      return Math.ceil(this.totalItemCount / this.pageSize);  
26:    }  
27:  }

'numberconatctslink.html' LWC Component

1:  <template>  
2:      <lightning-button variant="base" label={labelName} title="Number of Contacts"></lightning-button>  
3:    </template>

numbercontactslink.js

1:  import { LightningElement, track, api } from 'lwc';  
2:  export default class Numbercontactslink extends LightningElement {  
3:    @api labelName;  
4:    @api accountRec;  
5:    @api  
6:    get accountobj() {  
7:      return this.accountRec;  
8:    }  
9:    set accountobj(value){  
10:      this.accountRec = value;  
11:      if(this.accountRec.Contacts != undefined){  
12:        this.labelName = this.accountRec.Contacts.length;  
13:      }else{  
14:        this.labelName = 0;  
15:      }  
16:    }  
17:  }

Working Demo:

Lightning Web Component : My First Web Component

noreply@blogger.com (Prateek Tandon) — Sat, 26 Jan 2019 18:50:00 +0000

What are Lightning Web Components?

Now you can build Lightning components using two programming models: Lightning Web Components (LWC), and the original model, Aura Components. Lightning web components (LWC) are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Lightning Web Components (LWC) uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

Is it necessary to learn Lightning Component before we start with LWC?

Not necessary, knowledge of Lightning Component will be an add-on to understand LWC easily but it is not mandatory. We can directly start learning LWC with the help of Lightning Web Component Library provided by Salesforce.

How to create a Lightning Web Component?

We cannot create LWC directly from our developer console. We need to have SFDX to create our own LWC. Other prerequisite to create LWC are as follows:

VS Code Editor
Salesforce Extension Pack (Extension for VS Code)
Lightning Web Components (Extension for VS Code)
Salesforce CLI Command Tool
SFDX

Creating first Component: Temperature Calculation

I have tried to create a simple component which calculates temperature calculation centigrade to fahrenheit or vice versa. Please ignore bad UI representation I am not good into CSS and UI representation.

TempConverter.html

<template>

<lightning-card title="Temperature Converter" icon-name="standard:formula">

<lightning-layout multiple-rows="true">

<lightning-layout-item size="12" padding="around-small">

<lightning-input type="number" label="In Centigrade"

name="centigrade" onchange={onNumberChange}></lightning-input>

</lightning-layout-item>

<lightning-layout-item size="12" padding="around-small">

<p class="slds-m-top_medium" style="color:blue; font-weight:bold;">{

finalFahrenheitresult}</p>

</lightning-layout-item>

<lightning-layout-item size="12" padding="around-small">

<lightning-input type="number" label="In Fahrenheit"

name="fahrenheit" onchange={onNumberChange}></lightning-input>

</lightning-layout-item>

<lightning-layout-item size="12" padding="around-small">

<p class="slds-m-top_medium" style="color:blue; font-weight:bold;">

{finalCentigraderesult}</p>

</lightning-layout-item>

</lightning-layout>

</lightning-card>

</template>

TempConverter.js

import { LightningElement, track } from 'lwc';

export default class TempConverter extends LightningElement {

@track centigradeValue;

@track fahrenheitValue;

@track centigradeResult;

@track fahrenheitResult;

/**

* This method will be called when either centrigade or fahrenheit value

* is changed

* Accordingly it will set the centrigade or fahrenheit property in

* javascript

* @author Prateek Tandon

* @param {} event

*/

onNumberChange(event){

const tagName = event.target.name;

if(tagName === "centigrade"){

this.centigradeValue = event.target.value;

if(this.centigradeValue !== ''){

this.fahrenheitResult = (this.centigradeValue * 1.8)+32;

}else{

this.fahrenheitResult = '';

}

}else{

this.fahrenheitValue = event.target.value;

if(this.fahrenheitValue !== ''){

this.centigradeResult = (this.fahrenheitValue-32)*0.55;

}else{

this.centigradeResult = '';

}

}

}

/**

* Property getter

* This method will automatically be called when fahrenheitResult value

* is changed. This getter method can be easily accessed in template using

* {finalFahrenheitresult}

* @author Prateek Tandon

*/

get finalFahrenheitresult(){

if(this.fahrenheitResult === 0 || this.fahrenheitResult){

return 'Value in Fahrenheit ' + this.fahrenheitResult;

}

return '';

}

/**

* Property getter

* This method will automatically be called when centigradeResult value

* is changed. This getter method can be easily accessed in template using

* {finalCentigraderesult}

* @author Prateek Tandon

*/

get finalCentigraderesult(){

if(this.centigradeResult === 0 || this.centigradeResult){

return 'Value in Fahrenheit ' + this.centigradeResult;

}

return '';

}

}

TempConverter.js-meta.xml

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

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

fqn="TempConverter">

<apiVersion>45.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

Output:

This is the simplest Lightning Web Component that I have created. Please let me know if you find any scope of improvement and I am still learning LWC components.

Case Teams

noreply@blogger.com (Prateek Tandon) — Tue, 15 Jan 2019 17:38:00 +0000

What are Case Teams?

A case team is a group of people that work together to solve cases. They provide a clear way to document the roles of multiple users in the management of a single case. They also extend record access to team members (which can include community users). For example, a case team can include support agents, support managers, and product managers.

Configuring Case Teams

1. Define Team Roles Mo

Navigate to Setup -> Customize -> Cases -> Case Teams -> Case Team Roles

2. Modification on Case Page Layout

Navigate to Setup -> Customize -> Cases -> Page Layouts

Add the Case Team related list to each case page layout:

Predefined Case Teams

There is one more great feature provided by salesforce through which we can predefine case teams so that support agents can quickly add people who they frequently work with cases.

Navigate to Setup -> Customize -> Cases -> Case Teams -> Predefined Case Teams

Above we have seen how we can set up or manage Case Teams using point and click. Now let us see if the developer has to manage Case Teams through code so what all objects will be included.

Below are the objects which are included to manage the Case Teams functionality

To manage Predefined Case Team functionality CaseTeamTemplate, CaseTeamTemplateMember, and CaseTeamTemplateRecord objects are used.

CaseTeamTemplateRecord object works as a linking object between Case and CaseTeamTemplate objects.

Below is the sample code which helps to understand the relationship for Predefined Case Team functionality:

CaseTeamTemplate cttObj = new CaseTeamTemplate(Description = 'Group of agents to which case can be assigned.',Name = 'Support Agent');

insert cttObj;

List<CaseTeamTemplateMember> cttmList = new List<CaseTeamTemplateMember>();

cttmList.add(new CaseTeamTemplateMember(MemberId = '005XXXXXXXXXXXX',TeamRoleId = '0B7XXXXXXXXXXXX',TeamTemplateId = cttObj.Id));

cttmList.add(new CaseTeamTemplateMember(MemberId = '005YYYYYYYYYYYY',TeamRoleId = '0B7YYYYYYYYYYYY',TeamTemplateId = cttObj.Id));

insert cttmList;

//Run below lines after executing above lines because it gives MIXED_DML error when executed simultaneously

//CaseTeamTemplateRecord is a juntion object between Case and CaseTeamTemplate

List<CaseTeamTemplate> cttlist = [Select Id from CaseTeamTemplate where Name = 'Admin'];

CaseTeamTemplateRecord cttrObj = new CaseTeamTemplateRecord(ParentId = '500ZZZZZZZZZZZZ',TeamTemplateId = cttlist[0].Id);

insert cttrObj;