HomeBlogsAPEXPull Down Page Refresh in APEX

Pull Down Page Refresh in APEX

  • February 12, 2021
  • Posted by: Sibi Elamparithi
  • Category: APEX
No Comments

In Oracle APEX, a page can be refreshed by using F5 or any other browser control. But what if you want to refresh a page in an APEX mobile app. We need an exclusive refresh button in all pages to do a refresh. But instead, we can implement a “Pull Down Page  Refresh”, which is more user friendly for the app users.

A sample of what we are going to build,

pull-down-page-refresh

This pull-down page refresh can be achieved in different methods of Javascript or jQuery. In this example, I will be using a custom JS library – pulltorefresh.js

First, we need to add the custom library to our application. Add the below URL under Javascript File URLs Section of the Page.

https://cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.21/index.umd.min.js

Next, add the below code to Execute when Page Load section of the Page

PullToRefresh.init({

  mainElement: ‘#main’, //Your Region ID

  onRefresh: function (done) {

    setTimeout(function () {

      done();

    }, 1500);

  } });

pull-down-page-refresh_2

In the above code, value for mainElement would be your page element. You can either specify a Region ID or page ID , whichever you want to refresh. In my case , I have created an Interactive Report with an ID – “main” and I have provided the same in the code.

Save and Run the page.

Please feel free to reach Cittabase for more information. Thanks for checking my blog …Have a nice day !!!!