force:refreshView (getRecordNotifyChange) in Lightning web component

hamza — Thu, 17 Jun 2021 13:25:10 +0000

We’re kind of in love with the lightning UI and the aura feature (e.force:refreshview) which updated the data on the current lightning page/record/component. We missed the feature in LWC and I saw many using the workaround to use a combination of AURA and LWC to just have this functionality.

Starting Winter ’21, there is a new function in town !

Using it is as simple as what we’ve been used to in Aura. You’ll just need to import it
(import { getRecordNotifyChange } from 'lightning/uiRecordApi';), and then call it with a list of record Ids
(getRecordNotifyChange([{recordId: this.recordId}]);).

Full sample code looks like this:

This implies one change though: force:refreshView was refreshing the whole page, whereas getRecordNotifyChange() is only refreshing the records you ask him to refresh. So if your Apex code is for instance updated the current Account, but also some child Contacts, you may have to pass to getRecordNotifyChange() all the Ids updated by your Apex method.

Credits: https://blog.texei.com/refresh-a-record-page-from-a-lightning-web-component-14a5874ff68e

LWC Best Practices & Considerations

hamza — Sun, 23 May 2021 02:11:00 +0000

Hi again! This blog post is going to be a different one as I’ll keep updating this post with all the latest findings.

In this blog post, I am going to share all the best practices and considerations regarding LWC for not just by the Salesforce but even with personal experience.

First, let’s start with FOR LOOP,

1- FOR LOOP

JS ES6 bring a different kind of FOR LOOPS (click here to have a look in details) but in LWC – make sure to use the one which doesn’t conflict with lwc architecture.

For example, if you’re going to use forEach,

this.lstAccounts.forEach(function(acc){
    console.log(acc.Name);
});

You won’t be able to access THIS.VARIABLE inside this loop. Here is a demonstration,

this.lstAccounts.forEach(function(acc){
    console.log(acc.Name);
    console.log(this.someBooleanval); //THIS VALUE WILL BE NULL
});

The reason is that such kind of loop also uses THIS. and looks for the value inside a loop where such variable is not assigned hence – NULL.

SO what should you do ? Use another kind of FOR LOOP – like:

for(let acc of this.lstAccounts){
    console.log(acc.Name);
   console.log(this.someBooleanval); //VALUE WILL BE ACCESSIBLE HERE
}

2- Dealing with Time field

The number you are getting is in milliseconds “65700000”. We need to convert it to time format in js itself. I used the below method to do so.

// Convert milliseconds into 'h:mm a' time format
    msToTime(s){
        let ms = s % 1000;
        s = (s - ms) / 1000;
        let secs = s % 60;
        s = (s - secs) / 60;
        let mins = s % 60;
        let hrs = (s - mins) / 60;
        hrs = hrs < 10 ? '0' + hrs : hrs;
        mins = mins < 10 ? '0' + mins : mins;
        console.log(hrs + '  ' + mins);
        return hrs+':' + mins + ':00.000Z';
    }

3- setInterval Binding

setInterval runs on different browser subthread thingy… That is it doesn’t maintain the context of what happens after.

Take this code for eg.

var count = 0;
var intervalID = setInterval(function (){
  this.count++;
  console.log(this.count);     // prints number from 0 to percentage
  if (this.count === this.percentage) {
    clearInterval(intervalID);
  }
},10)
console.log(this.count);       // prints 0

The second console prints ‘0′, which explains the fact that context is not maintained. To make that happen we bind the context to each anonymous function call that is made.

Just use

.bind(this) // 'this' is the context

So the JS becomes,

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
  @track count = 0;
  @track percentage = 99;
  
  connectedCallback() {
    var intervalID = setInterval(function (){
      this.count++;
      if (this.count === this.percentage) {
        clearInterval(intervalID);
      }
    }.bind(this),10);
  }
}

I hope this will help you at some point – I’ll keep updating this post with latest updates.

Happy Coding!

Dynamic Toggle Class in LWC

hamza — Wed, 08 Jul 2020 14:36:02 +0000

This is a very simple scenario where you need to hide/show some div but you can’t use

lwc – Hamza Siddiqui

force:refreshView (getRecordNotifyChange) in Lightning web component

LWC Best Practices & Considerations

Dynamic Toggle Class in LWC

Toggle Class (Simple Approach)

Toggle (classList Approach)

Checkbox label with URL in AURA/LWC

AURA

LWC

Custom validation in Lightning web component

Usage Of lightning-record-form

Modes

Creating a Record

Editing a Record

Viewing a Record Read-Only

Using Record types

Error Message

Apex Calling Methods In Lightning web components

Import Syntax

Create Apex Class

Wire an Apex Method to a Property

Wire an Apex Method to a Function

Call an Apex Method Imperatively

Call an Apex Method with Parameters