The Visual Builder Cloud Service Blog

Adding Pull to Refresh Behavior in Mobile Apps

Shay Shmeltzer
Director of Product Management - Oracle

Pull to Refresh is a common touch interaction pattern in mobile apps where by placing your finger on the device and dragging down you get an updated set of data onto your device. In this blog we show how to add this user interaction to your mobile Visual Builder app using a component from the Visual Builder component exchange.

The component exchange in Visual Builder contains various components that you can add to your development environment and apps. To add a component simply click the "Get Component" in the component palette, find the component your are after and choose "Install". The component will be added to your visual editor's component palette. In the demo below we are adding a "Pull to Refresh" component - this is a component that implement the user interaction. Inside the component, you place other UI component that you want to refresh. In our example we place a listView component into the default container of the pull to refresh component.

The component exposes an ojRefresh event, which we use to hook an action chain to. In the action chain we can execute the logic that will implement the refresh. In the demo we simply use the fire data provider event of type refresh on the ServiceDataProvider that populates our list component. 

We then notify the component that we are done with the refresh, which we do by calling the component method for refreshComplete. (Make sure your pull to refresh component has an ID property set, to be able to pick it up in the action properties).

The last step is to set the list, the pull to refresh component, and the parent component height to 100% through the style attribute. This helps VB distinguish between a scroll event and a pull to refresh event on the list component.

Here's an end to end demo:

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.