Disable Pull-to-Refresh in the Salesforce Mobile App

Disable pull-to-refresh on pages where accidentally triggering it can cause loss of data in the Salesforce mobile app. Disabling pull-to-refresh is as simple as firing a CustomEvent. Fire this event in your own components, or create a component you can use throughout your Salesforce org.

Pull-to-refresh is a long-established convention in mobile apps as a way to reload data appearing on a mobile app screen. It’s the default behavior for nearly all screens in the Salesforce mobile app. However, triggering pull-to-refresh while entering data into a form causes the form to refresh, losing values entered into the form. A custom event lets you disable pull-to-refresh on any screen from within a Lightning web component.

First, create a CustomEvent with the name updateScrollSettings, and a data payload as illustrated here:

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

Then fire the event:

1this.dispatchEvent(disable_ptr_event);

This event has no effect outside the Salesforce mobile app. You can include it on pages that are shared between desktop and mobile without affecting the behavior of Salesforce for your desktop users.

Faceless DisablePullToRefresh Component

The following example code shows a component that does only one thing: disable pull-to-refresh on any page that includes it in the Salesforce mobile app. This component is “faceless”, in that it doesn’t have a user interface, or any visual effect at all on pages that include it.

Create the component in your org, and then use it anywhere you need to disable pull-to-refresh. You can add it to Lightning Pages, flows, and record pages just by adding this component to your page or layout. You can also add it as a child component to any custom component you create where pull-to-refresh could interfere with your component’s intended behavior.

Component Metadata

Adding the correct targets to the component metadata allows it to be used in all contexts where it’s useful.

1<?xml version="1.0" encoding="UTF-8"?>
2<!-- disablePullToRefresh.js-meta.xml -->
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4    <masterLabel>Disable Pull-to-Refresh (No UI)</masterLabel>
5    <description>This component disables "pull to refresh" behavior in the Salesforce Mobile app. 
6    Add it to a page, or as a child component in your component. This component has no user 
7    interface, and has no effect outside supported mobile apps.</description>
8    <apiVersion>54.0</apiVersion>
9    <isExposed>true</isExposed>
10    <targets>
11        <target>lightning__AppPage</target>
12        <target>lightning__FlowScreen</target>
13        <target>lightning__HomePage</target>
14        <target>lightning__RecordAction</target>
15        <target>lightning__RecordPage</target>
16        <target>lightning__Tab</target>
17    </targets>
18</LightningComponentBundle>

Component Template

This component has no user interface. Its only purpose is to fire the event that disables pull-to-refresh. As such, the component template is empty.

1<!-- disablePullToRefresh.html -->
2<template>
3    <!-- This component has no user interface -->
4    <!-- It just fires its event, and is done -->
5</template>

Component Implementation

The component does one thing: fire the event that disables pull-to-refresh as soon as it’s loaded. It defines a function that fires the event, and calls that function in the connectedCallback lifecycle hook.

1// disablePullToRefresh.js
2import { LightningElement } from 'lwc';
3
4export default class DocDisablePullToRefresh extends LightningElement {
5
6    // Trigger this component's effect when the component loads
7    connectedCallback() {
8        this.disablePullToRefresh();
9    }
10
11    // Fire the event to disable pull-to-refresh on this page
12    // This has an effect only in the Salesforce Mobile and 
13    // Mobile Publisher apps
14    disablePullToRefresh () {
15        // CustomEvent is standard JavaScript. See:
16        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
17        const disable_ptr_event = new CustomEvent("updateScrollSettings", {
18            detail: {
19                isPullToRefreshEnabled: false
20            },
21            bubbles: true,
22            composed: true
23        });
24        this.dispatchEvent(disable_ptr_event);
25    }
26}

Mobile and Offline Developer Guide

Disable Pull-to-Refresh in the Salesforce Mobile App

Faceless DisablePullToRefresh Component

See Also