Salesforce recently released a new Barcode API which now supports barcode scanning natively on LWC for mobile devices. As it’s supported natively, we don’t need to worry about maintaining 3rd party Javascripts, Locker services, performance issues, etc.

At the time of writing this blog post, around 10 different types of barcodes are supported.

Below source code demonstrate how simple it is to use in LWC.

• import lightning/mobileCapabilities
• initiate scanner variable using method getBarcodeScanner()
• set configuration suggesting which barcodes are supported
• use begineCapture() method top launch mobile camera
• read the result or handle error

Resources :

• Supported QR Code Types
• QR Code Generator
• Barcode Generator

Salesforce decorator @track is reactive , which means if value in JavaScript changes, equivalent HTML UI would also change. You don’t need to mark primitive data types as track, as its enabled by default for them. However for complex structure / object we need to mark variable as @track.

Whenever any JavaScript object marked as @track, Salesforce wraps that object resulting in proxy object. If you try to print that on console, you would not be able to see its value.

That being said, there is no change in way you access it, it’s exactly like any other Javascript object we use. So, if you want to see content of proxy object, just call below method and pass your proxy object.

//Get Javascript object equivalent to Proxy
    proxyToObj(obj){
        return JSON.parse(JSON.stringify(obj));
    }

Another way is, just keep another variable without @track decorator to see content. However problem would be – you need to make sure to keep it in sync every time content of original @track object changes.

Fixing error – Cannot assign to read only property

Above error occurs when we try to change public property on LWC marked as @api

@api someVar
.... some code

somemethod(event){
    //error on below line - Cannot assign to read only property
     someVar.isSelected = true;
}

Above code block would throw an error as we are trying. to change property on object declared by @api

@api someVar
.... some code

somemethod(event){
    //clone @api variable using method we just created
    let tmpObj = this.proxyToObj(someVar);
     tmpObj.isSelected = true;
    //now assign this tmp variable back to original
   someVar = tmpObj;
}

To fix above error, use can do something like

If we want to change background color of these icons then only colors we have are green, yellow, red or gray as per their variant success, warning , error or inverse.

If you ever try to change color of these icons using fill property, you would be disappointed. Lightning Web Component used shadow DOM to encapsulate components from outer world, same principal here restricts us changing icon background color.

Try yourself [Not Working]

This is what I tried that didn’t worked

<template>
    <lightning-icon class='redColor' icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse" size="large"
            title="large size"></lightning-icon>
</template>

CSS File

.redColor{
    fill : #FF0000;
}

Solution – Custom Background Color for LWC Icons

Step 1 :

Right click on Icon where you want to change background color and click on inspect

Step 2 :

Copy svg tag and paste in your editor and add css. DOnt forget to add div tag as parent to control icons size.

<template>
    <div class="iconContainer redColor">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="connected_apps">
        <path d="M11 14.4l-1.8 8.1c-.1.5.5.8.8.4l9.7-12c.3-.3.1-.7-.3-.7h-5.2c-.4 0-.6-.5-.4-.7L18.4 2c.2-.5-.1-1.1-.6-1.1H9.6c-.5 0-.9.3-1.1.8L4.7 12.9c-.2.5.1.9.6.9h5.3c.2 0 .5.3.4.6z">
        </path></svg>
    </div> 
</template>

and CSS File

.redColor{
    fill : #FF0000;
}
.iconContainer{
    width : 50px;
    height:50px;
    display:inline-block;
}

Try Yourself – Working Playground URL

Conclusion :

It may not be exactly that you are looking for, however you can do almost any operation that lightning-icon or button-icon can do, just add onclick event handler, css properties etc and you are good to go.

If you are looking for basics of LWC or how to use LWC in flow, Lightning Message Service, how to call Apex then follow this link.

In this post, you would learn

• How to call Apex in LWC using @wire
• How to call Apex in LWC by Imperative approach
• How to call Apex on component load event equivalent to init in Aura
• Why would you choose to call Apex either by @wire or Imperative Apex approach
• How to bind wrapper class in Lightning-datatable component
• How to enable infinite scrolling in Lightning-datatable by making server call

Lets start with building demo lightning-datatable component with infinite scroll effect , below code is self explanatory so I would skip code explanation part. Click here for live demo of this component and test end result yourself.

Initially , it seems everything working as expected, however after some scroll , try to search any employee name. You would observe that Salesforce never made 2nd Apex call as cacheable=true was mentioned in Apex. Salesforce is trying to save resources. You cannot use wire method if cacheable is not true. This is great caching feature, unfortunately it didn’t sufficed our need.

Let’s do one more attempt, this time we would use Imperative approach and use connectedCallback method to make Apex call on component load. @wire decorator did this automatically on component load, this time we have to make explicit call. Another change , we have done is, we marked method as cacheable=false. Click here for live demo of this component and test end result yourself.

Use below code to wrap both approach in single component

Problem – It is making continuous server calls even when no one is scrolling

Cause 1 : Parent component needs to restrict height. If parent Div does not have height in pixel then it will keep calling Apex method. Read more about issue here

Cause 2 : Let’s say height is 300px but we have less component that does not fit 300px then this component would still make server call continuously. In that case height needs to be automatically adjusted or disable infinite scrolling if total record in component is not enough to fill height.

We are going to create LWC Component to acts as a utility method to read query parameter , as shown below

As you can see in above code, we just need to create a JavaScript file & meta file for LWC to act as Javascript library. Also, note how function is defined using keyword export. You can have multiple export methods in same LWC that would be used as library in your project.

To use above method in any LWC component, follow below syntax

Gravatar is Globally recognized avatar used by millions of user and many websites like WordPress, github, stackoverflow etc.

Click here for Live Demo – Gravatar Component on public community

In this post, we would create a reusable lightning component which would receive below three parameters to construct avatar

1. Email address to render avatar
2. Size of avatar
3. Should image be rendered as rounded corner

Gravatar would need MD5 equivalent of email address. There is no native Javascript library to compute MD5 hash, either we have to use Javascript library or we can use Apex to compute MD5 using crypto class. I preferred Apex class instead of any other library a shown below

Apex Class – Using Crypto class to generate MD5 digest equivalent to email

Lightning Web Component [LWC] for Gravatar

Setting properties on Lightning Web Component to be used on App builder or Community

Make sure to add target lightningCommunity__Default along with lightningCommunity__Page if this LWC is supposed to be used on Community. Otherwise you would receive below error

The ‘property’ tag isn’t supported for lightningCommunity__Page

use lightningCommunity__Default to allow setting up property in Community

Also, if above LWC is supposed to be used on Lightning community, we need to add Gravatar host in Content Security Policy trusted website otherwise we would get error

Access to resources from an unapproved, external host violates your Content Security Policy (CSP). To get access to these resources, try whitelisting the host in CSP Trusted Sites in Salesforce Setup

Demo Component to showcase how to use Gravatar

You would not need demo component as advance as this. I’ve created this component to showcase

1. Live preview of LWC Component
2. How binding works in LWC [Hint – its not as easy as aura, you would need events]]

Assume, we have custom label named welcomeText and exitText

In Javascript file of LWC, we have to follow below syntax

// CustomlabelExample.js
import { LightningElement } from 'lwc';
 
// Import custom labels
import welcomeText from '@salesforce/label/c.welcomeText';
import exitText from '@salesforce/label/c.exitText';


export default class CustomLabelExample extends LightningElement { 

    // Expose the labels to use in the template.
    label = {
        welcomeText,
        exitText
    };
}

Notice, how we imported label and used c. if there is no namespace.

import welcomeText from '@salesforce/label/c.welcomeText';

<!-- CustomlabelExample.html -->
<template>
    Hi , {label.welcomeText} !!! 
   <!-- some more code --> 
   Sorry to see you going, {label.exitText}
</template>

Reference :

• Official Documentation

Few examples where this could come handy are like embedding lookup components (no more workaround), showing data table, capturing signature, slide shows and so on.

It’s time to jump into water. In this blog post, I would be creating Simple Lightning Web Component (LWC). This LWC Component would be able to get value from flow, pass value to flow, navigate to Next screen and hookup into flow validation engine to restrict next page navigation if there is error in LWC input.

Note : Read this blog post to learn how to embed Aura Component in Flow.

Below LWC component, only has one text box

<template>
    <lightning-card title="Lightning Web Component For Flow" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
                <lightning-input label="Message To Send" type="text" value={_txtBoxVal} onchange={handleChange}></lightning-input>
                <br /> 
                <lightning-button label="Publish Attribute" onclick={handleClick}></lightning-button>
                <lightning-button label="Navigate to Next" variant="brand" onclick={handleNext} ></lightning-button> 
        </div>
    </lightning-card>
</template>

Javascript of LWC component looks like

import { LightningElement , track, api} from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent} from 'lightning/flowSupport';
  

export default class Lwc_TextBox extends LightningElement {
   @track _txtBoxVal = '';
   @api availableActions = [];
    

    @api 
    get txtBoxVal(){
        return this._txtBoxVal;
    }

    set txtBoxVal(val){
        this._txtBoxVal = val;
    }

    handleChange(event) { 
        this._txtBoxVal = event.target.value; 
    }

    //Change attribute on Flow
    handleClick(event) {   
        const attributeChangeEvent = new FlowAttributeChangeEvent('txtBoxVal', this._txtBoxVal); 
        this.dispatchEvent(attributeChangeEvent);   
    }

    //Hook to Flow's Validation engine
    @api
    validate() {
        if(!this._txtBoxVal.includes('oracle')) { 
            return { isValid: true }; 
            }  
        //If the component is invalid, return the isValid parameter as false and return an error message. 
        return { 
            isValid: false, 
            errorMessage:  'You cannot have string oracle in String' 
            };  
    }

     //Go to Next screen of Flow
    handleNext(event){ 
       const nextNavigationEvent = new FlowNavigationNextEvent();
       this.dispatchEvent(nextNavigationEvent); 
    } 
}

In above Javascript, one method informs parent Flow that attribute changed. Another Javascript method navigates to next page. There is another Javascript method, which hooks up to flow validation engine saying that text box cannot have word ‘Oracle’.

Metadata file of LWC component looks like

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwc_TextBox">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="txtBoxVal" type="String"  /> 
        </targetConfig>
    </targetConfigs>

</LightningComponentBundle>

In LWC metadata, we are informing Salesforce platform that this component can be used in flow.

Its time to create Flow in Salesforce , below image shows how final flow will look like

Screen 1 would look like

In above screen, we are simply showing current value in variables and then changing those variables via text components. Next Assignment components are reading text box and assigning values in variable.

Next Screen contains LWC component and setting informing flow that which flow variable needs to be updated if attribute in flow changes

Output : Screen 1

Output : Screen 2

Resources :

LWC attributes for Flow

Using LWC in Flow

Lightning Message Service

In Winter 20, Salesforce released Lightning Message Service which can be used to exchange data between Visualforce, Aura Component and Lightning Web Components. Unlike previous process, we don’t need to import any external library like pub or sub.

In this blog post, I would be creating Visualforce, Aura Component and Lightning Message Service and exchanging message between all of them using Lightning Message Service.

Lightning Message Channel

At the heart of Lightning Message Service, we have Lightning Message Channel. Its basically name of Schema which will hold actual message. For sake of this blog post, create file LMSDemoWin.messageChannel-meta.xml in folder messageChannels.

<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
   <masterLabel>LMS Demo</masterLabel>
   <isExposed>true</isExposed>
   <description>Winter 20 - LMS Demo.</description> 
</LightningMessageChannel>

Deploy Lightning Message Channel

Run below SFDX command to deploy this message channel on your Salesforce Org, run push command to deploy message channel on Scratch Orgs.

sfdx force:source:deploy -p "force-app/main/default/messageChannels/"

Once, Lightning Message Channel created, let’s start by creating our components and first we will create below Visualforce Page.

<apex:page>
    <!-- Begin Default Content REMOVE THIS -->
    <h1>Lightning Message Services - Demo - Winter 20</h1>
    <div>
        <p>Message To Send</p>
        <input type="text" id="vfMessage" />
        <button onclick="publishMessage()">Publish</button> 
        <br/> 
        <button onclick="subscribeMC()">Subscribe</button> 
        <button onclick="unsubscribeMC()">Unsubscribe</button> 
        <br/>
        <p>Messages Received:</p>
        <textarea id="txtMessages" rows="2" style=" width:100%;" />
    </div>
    <script> 
        // Load the MessageChannel token in a variable
        var lmsDemoChannel = "{!$MessageChannel.LMSDemoWin__c}";
        var subscriptionToMC;
       function publishMessage() {
            const payload = {
                source: "Visualforce",
                messageBody: document.getElementById('vfMessage').value
            };
            sforce.one.publish(lmsDemoChannel, payload);
        }
        function subscribeMC() {
            if (!subscriptionToMC) {
                subscriptionToMC = sforce.one.subscribe(lmsDemoChannel, onMCPublished);
            }
        }
        function unsubscribeMC() {
            if (subscriptionToMC) {
                sforce.one.unsubscribe(subscriptionToMC);
                subscriptionToMC = null;
            }
        }
        function onMCPublished(message) {
            var textArea = document.querySelector("#txtMessages");
            textArea.innerHTML = message ? 'Message: ' + message.messageBody + ' From: ' + message.source : 'no message payload';
        } 
    </script>
</apex:page>

In above code, we have few functions to subscribe , Unsubscribe and publish Lightning Message Channel. We can follow any schema for payload however that has to be followed by all clients as well. In our case, we are passing source and actual message body.

Next component we would build would be Aura Component

<aura:component description="testMessageAura" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute type="String" name="myMessage"/>
    <aura:attribute type="String" name="receivedMessage"/>
    <lightning:messageChannel type="LMSDemoWin__c" aura:id="lmsDemohannel" onMessage="{!c.handleReceiveMessage}"/>

    <lightning:card title="Aura Component" iconName="custom:custom18">
        <div class="slds-m-around_medium">
            <lightning:input type="text" value="{!v.myMessage}" label="Message To Send"/>
            <lightning:button label="Publish" onclick="{! c.handleClick}"/>
            <br/>
            <br/>
            <p>Latest Received Message</p>
            <lightning:formattedText value="{!v.receivedMessage}"/>
        </div>
    </lightning:card>
</aura:component>	

Controller of Aura Component

({
    handleClick: function(component, event, helper) {
        let myMessage = component.get("v.myMessage");
        const payload = {
            source: "Aura Component",
            messageBody: myMessage
        };
        component.find("lmsDemohannel").publish(payload);
    },
    handleReceiveMessage: function (component, event, helper) {
        if (event != null) {
            const message = event.getParam('messageBody');
            const source = event.getParam('source');

            component.set("v.receivedMessage", 'Message: ' + message + '. Sent From: ' + source);
        }
    }
});

As you can see in above Aura Component, we are not doing anything special to subscribe or unsubscribe Lightning Message Channel. Aura Component by default handles those operations once we declare them.

Last component we would be creating is Lightning Web Component

<template>
    <lightning-card title="LWC" icon-name="custom:custom18">
        <div class="slds-m-around_medium">
            <lightning-input label="Message To Send" type="text" value={_msg} onchange={handleChange}></lightning-input>
            <lightning-button label="Publish" onclick={handleClick}></lightning-button>
            <br>
            <lightning-button label="Subscribe" onclick={handleSubscribe}></lightning-button>
            <lightning-button label="Unsubscribe" onclick={handleUnsubscribe}></lightning-button>
            <p> Message Received</p>
            <lightning-formatted-text value={receivedMessage}></lightning-formatted-text>
        </div>
    </lightning-card>
</template>

Javascript of LWC

import { LightningElement, track} from 'lwc';
import { publish,createMessageContext,releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import lmsDemoMC from "@salesforce/messageChannel/LMSDemoWin__c";
export default class LMS_MessageSenderReceiverLWC extends LightningElement {
    @track _msg = '';
    @track receivedMessage = '';
    channel;
    context = createMessageContext();

    constructor() {
        super();
    }
   
    handleSubscribe() {
        const parentPage = this;
        this.channel = subscribe(this.context, lmsDemoMC, function (event){
            if (event != null) {
                const message = event.messageBody;
                const source = event.source;
                parentPage.receivedMessage = 'Message: ' + message + '. Sent From: ' + source;
            }
        });
    }

    handleUnsubscribe() {
        unsubscribe(this.channel);
    }

    handleChange(event) { 
        this._msg = event.target.value;
    }

    handleClick() {  
        const payload = {
            source: "Lightnign Web Component",
            messageBody: this._msg
        }; 
        publish(this.context, lmsDemoMC, payload);
    } 

    disconnectedCallback() {
        releaseMessageContext(this.context);
    }
}

Once we embed all three components (Visualforce, Aura and Lightning Web Components), we would be able to see Lightning Message Service in action as shown in below image :

If you are not interested on code explanation and directly want to jump on live demo , check this playground.

Communicate between Nested Lightning Web Components

This is one of most simplest and common use case, where parent LWC wants to react on event produced by child LWC.

In above image, Model 3 is child (nested component) of Tesla.

In above, Model 3 component, custom event modelclick is raised using class CustomEvent.

Lets, see how Parent Component Tesla is defined.

In above parent component tesla, event raised by child component is handled just like any other events in Javascript (bubble event). In onmodelclick function , Tesla is also raising new event with same name – modelclick.

That concludes, how communication happens between Parent child Lightning Web Components.

Lightning Web Component Event handling – Pub Sub Library

In above image, if we want Tesla event to be handled by Honda Component, traditional bubble based event handling will not work.

You can either use Salesforce library of Pub Sub, or Simple Library produced by Vishnu.

I’m going to use library created by Vishnu. Below is Javascript code for pub-sub library

Now, we have added above javascript as part of LWC, lets create a Lightning Web Component named Vehicle which will fire pub-sub event.

Note, how pubsub js is imported on line 2 of Vehicle.js. On line 7, we are firing event using pub-sub library.

Lets create a Lightning Web Component which will handle event generated by pub sub library.

As seen in above code, register method is used to handle event. Also note, how unique event identifier is used to fire and register event.

Feel free to comment and share your feedback. Happy coding !!!