Mobile Pull To Refresh

Mobile Pull To Refresh

  

Hello,

i have some mobile screens with the pull to refresh functionality. It works great, and i would actually like to give the same behaviour (the modal appearing just below the header) to other actions.

 Let's say, for example, i wanted to change page from a button, i wanted this to work exactly the way PullToRefresh works. That meaning that i would want the same icon to appear in the same place while it gets new information and renders the new screen. 

Is this possible and if so, can anyone give me some pointers as to how to achieve this?


Best Regards,

Bruno Gonçalves

Solution

Hi Bruno,

If you inspect the page you'll notice that this behavior is being controlled by adding and removing some classes at the body element. (ptr-refresh and ptr-loading)

If you want to replicate the behavior, you need to do something like the following:

  • Add a javascript node to add the necessary classes to the body, something like the following:
    • document.body.classList.add("ptr-refresh");
    • document.body.classList.add("ptr-loading");
  • Add the action logic
  • Remove the classes from the body element
    • document.body.classList.remove("ptr-refresh");
    • document.body.classList.remove("ptr-loading");

I think this will do the trick.

Let me know if it worked

Solution

Hi Henrique,

after posting the question i kept digging and found exactly what you described. the solution i came up with is exactly the one you described and can confirm that it absolutly works! thank you so much for the confirmation!

all i needed was to set the class of the body to ptr-loading.
it is worth noting, and i was not expecting this, even if after you set it to "ptr-loading" you navigate to a different page, the body of the new page will still have the ptr-loading, meaning that the spinner will still show on the new page, so you must explicitly remove the class after you finish loading whatever you are loading. 

Marking your answer as the solution since it perfectly explains the behaviour and how to achieve the desired effect.

Best Regards,

Bruno Gonçalves

Henrique Batista wrote:

Hi Bruno,

If you inspect the page you'll notice that this behavior is being controlled by adding and removing some classes at the body element. (ptr-refresh and ptr-loading)

If you want to replicate the behavior, you need to do something like the following:

  • Add a javascript node to add the necessary classes to the body, something like the following:
    • document.body.classList.add("ptr-refresh");
    • document.body.classList.add("ptr-loading");
  • Add the action logic
  • Remove the classes from the body element
    • document.body.classList.remove("ptr-refresh");
    • document.body.classList.remove("ptr-loading");

I think this will do the trick.

Let me know if it worked

Hello Henrique Batista,

i have some problem too, please give me an example for the implementation, step by step.


Thanks, Regards

Anggun Nurani

Anggun Nurani wrote:

Henrique Batista wrote:

Hi Bruno,

If you inspect the page you'll notice that this behavior is being controlled by adding and removing some classes at the body element. (ptr-refresh and ptr-loading)

If you want to replicate the behavior, you need to do something like the following:

  • Add a javascript node to add the necessary classes to the body, something like the following:
    • document.body.classList.add("ptr-refresh");
    • document.body.classList.add("ptr-loading");
  • Add the action logic
  • Remove the classes from the body element
    • document.body.classList.remove("ptr-refresh");
    • document.body.classList.remove("ptr-loading");

I think this will do the trick.

Let me know if it worked

Hello Henrique Batista,

i have some problem too, please give me an example for the implementation, step by step.


Thanks, Regards

Anggun Nurani

Hi Anggun,

That's exaclty what I did on the post above marked as the answer.

Cheers,


Henrique Batista wrote:

Anggun Nurani wrote:

Henrique Batista wrote:

Hi Bruno,

If you inspect the page you'll notice that this behavior is being controlled by adding and removing some classes at the body element. (ptr-refresh and ptr-loading)

If you want to replicate the behavior, you need to do something like the following:

  • Add a javascript node to add the necessary classes to the body, something like the following:
    • document.body.classList.add("ptr-refresh");
    • document.body.classList.add("ptr-loading");
  • Add the action logic
  • Remove the classes from the body element
    • document.body.classList.remove("ptr-refresh");
    • document.body.classList.remove("ptr-loading");

I think this will do the trick.

Let me know if it worked

Hello Henrique Batista,

i have some problem too, please give me an example for the implementation, step by step.


Thanks, Regards

Anggun Nurani

Hi Anggun,

That's exaclty what I did on the post above marked as the answer.

Cheers,


Hi Henrique,

please include a screenshot,
because I do not know what to put the script on what part.


Thanks, regards

Anggun Nurani

Hey,

It's quite detailed on the post, I'm not sure what you're looking for.

Either way, something like the following:

Hope it helps.

Cheers

Henrique Batista wrote:

Hey,

It's quite detailed on the post, I'm not sure what you're looking for.

Either way, something like the following:

Hope it helps.

Cheers

Hi, Thanks for reply

thanks for sreenshot.
may i know, where do you put the action?


thanks, regards

Anggun Nurani


Anggun Nurani wrote:

Henrique Batista wrote:

Hey,

It's quite detailed on the post, I'm not sure what you're looking for.

Either way, something like the following:

Hope it helps.

Cheers

Hi, Thanks for reply

thanks for sreenshot.
may i know, where do you put the action?


thanks, regards

Anggun Nurani



Hi Anggun,

Which action?

I sincerely don't know what do you want to achieve, can you describe what you want through some screenshots?


Cheers

Henrique Batista wrote:

Anggun Nurani wrote:

Henrique Batista wrote:

Hey,

It's quite detailed on the post, I'm not sure what you're looking for.

Either way, something like the following:

Hope it helps.

Cheers

Hi, Thanks for reply

thanks for sreenshot.
may i know, where do you put the action?


thanks, regards

Anggun Nurani



Hi Anggun,

Which action?

I sincerely don't know what do you want to achieve, can you describe what you want through some screenshots?


Cheers

Hi henrique,

thanks for reply,


I have list like image below

i create client action named Pull

i don't know where to put client actions Pull in my list. 


Thanks, regards

Anggun Nurani


Hi Anggun,

You just want a pull to refresh? Because this post isn't about pull to refresh, it's about replicating the behavior for other actions.

IF you just want to use Pull to refresh, take a look on the below image:


You need to set UsePullToRefresh to 'True' and set the action that is going to be binded to the pull to refresh event (probaly refresh your data source).


Hope it helps

Henrique Batista wrote:

Hi Anggun,

You just want a pull to refresh? Because this post isn't about pull to refresh, it's about replicating the behavior for other actions.

IF you just want to use Pull to refresh, take a look on the below image:


You need to set UsePullToRefresh to 'True' and set the action that is going to be binded to the pull to refresh event (probaly refresh your data source).


Hope it helps

hi henrique, Thanks for reply, 

that's very helpful :D


Thanks, Regards

Anggun Nurani