Fix Error “Cannot assign to read only property” and print Proxy Object of LWC

Quick code snippet to read content of Proxy object in Lightning web component & resolve error Cannot assign to read only property

As its code-snippet post, its going to be very short but frequently used.

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

Change Icon Color in Lightning Web Component

Why fill css property not working for LWC Icon

Lightning Web Component provides hundreds of standard icon to choose from this list. And Lightning Web Components like lightning-icon or button-icon can be used to choose these icons.

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]

Continue reading “Change Icon Color in Lightning Web Component”

Implement Infinite Scrolling for lightning-datatable

When to use wire vs Imperative approach to call Apex in Lightning Web Component

If you are thinking this post is about implementing infinite scrolling behavior for lightning-datatable component, then you only got half part right. Main purpose of this blog post is to compare side by side @wire vs Imperative way of calling Apex and decide which one to use when?

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
Continue reading “Implement Infinite Scrolling for lightning-datatable”

Share JavaScript Code in Lightning Web Component to Read URL Parameters

Building Reusable LWC Component to read query string from URL

In this post, we would create a Lightning Web Component that can be shared across other LWC as a JavaScript library.

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

Continue reading “Share JavaScript Code in Lightning Web Component to Read URL Parameters”

Gravatar – Reusable Lightning Web Component

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with Leave a comment on Gravatar – Reusable Lightning Web Component

Avoid asking your users to upload pictures – Use Globally Recognized Avatar , Reusable Lightning Web Component

Wouldn’t it would be great if we can use existing avatar of user on basis of email id instead of asking user to upload their profile pic ?

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

Continue reading “Gravatar – Reusable Lightning Web Component”

Using Custom Label in Lightning Web Components – LWC

Quick Code Snippet on how to use custom label in Lightning Web Components – LWC

Below is code snippet on using custom labels in Lightning Web Components.

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 :

Use Lightning Web Components in Flow

Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)

As part of Winter 20, we can embed Lightning Web Components in Flow. Imagine, endless possibilities for Rapid Application Development (RAD) and ease of maintaining application.

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.

Continue reading “Use Lightning Web Components in Flow”

Event Handling between Aura, Lightning Web Components (LWC) and Visualforce

How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce

Few months back, I wrote an article on how pub sub model can be used to communicate between Lightning Web Components. In that blog post, we used external library to pass event from child to Lightning Web Components.

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.

Continue reading “Event Handling between Aura, Lightning Web Components (LWC) and Visualforce”

Lightning Web Component Event Handling – Pub Sub

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with 1 Comment on Lightning Web Component Event Handling – Pub Sub

How to handle events in Lightning Web Components between nested and non nested Components

It is very common to come across use case of communicating between Lightning Web Components.

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.

Continue reading “Lightning Web Component Event Handling – Pub Sub”

Getting Started with Lightning Web Component

Before starting with Lightning Web Component, I would suggest to read this introduction post first.

If you enjoy watching video then you might enjoy below video where I conducted Live coding explaining basics of Lightning Web Component.

In this post, we are going to Show loading image on initial load of LWC. In background we would be calling Apex class to take decision if loading image should be hided or redirect user to some other page.

Continue reading “Getting Started with Lightning Web Component”