Mobile and Offline Developer Guide

Mobile App Development with Lightning Web Components and LWC Offline
Create Mobile-Ready Components
Understand Mobile Development
Use Built-In Mobile Tools and Features
Minimize Bandwidth Usage
Create Responsive Layouts
Follow Accessible Mobile Design Guidelines
Disable Pull-to-Refresh in the Salesforce Mobile App
Use Mobile Device Features in Mobile Apps
Offline Considerations and Limitations
Offline Environment Details
Use Salesforce Features While Offline
Development Tools and Processes
Quick Start Tutorials
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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:
Then fire the 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.

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.

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.