Disable Pull to Refresh in Lightning Web and Aura Components | Salesforce Mobile Application | LWC Stack ☁️⚡️

Kapil July 09, 2022

 If you ever had that annoying situation where you are filling up a form in the mobile app or checking some important document and by mistake triggers Pull-to-Refresh functionality.

Pull to refresh will reload that page and the data in the form will be reloaded again. This blog is all about how you may disable that pull to refresh functionality in your Lightning Web and Aura Components.

This is basically a default behaviour in the mobile application form a long time, recently salesforce has introduced a custom event that lets you disable pull to refresh functionality in any screen from within a Lightning Web Component.

You can simply create a custom event with the name updateScrollSettings and add the data payload and fire it as shown below -

1
2
3
4
5
6
7
8
 const disableRefresh = new CustomEvent("updateScrollSettings", {
      detail: {
        isPullToRefreshEnabled: false
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(disableRefresh);


You may use it in the connected call back of your component so that it can be fired when it gets loaded. But what if you need this functionality in multiple components.

It won't be a good idea to use same code in all the components as LWC is all about reusability. The good news is if you will add this event in a child component and include it in the component where you want to disable the pull to refresh functionality it will do the same trick.

Please check below example

PullToRefresh.html

1
2
3
<template>
  <!-- No need of any UI -->
</template>


PullToRefresh.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { LightningElement } from "lwc";

export default class PullToRefresh extends LightningElement {
  connectedCallback() {
    this.disablePullToRefresh();
  }
  disablePullToRefresh() {
    const disableRefresh = new CustomEvent("updateScrollSettings", {
      detail: {
        isPullToRefreshEnabled: false
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(disableRefresh);
  }
}


PullToRefresh.js-meta.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
       <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__FlowScreen</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordAction</target>
        <target>lightning__RecordPage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Now in your parent component you just have to add it as a child component as shown below - 

Parent.html

1
2
3
4
5
<template>
  <lightning-card title="Parent Component">
    <c-pull-to-refresh></c-pull-to-refresh>
  </lightning-card>
</template>


Output


Checkout Complete Video Tutorial Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

1 Comments

  1. seveeeenFebruary 5, 2023 at 5:40 AM

    Is this method available for Lightning page? I tried it, but it did not resolve the issue.

    ReplyDelete