[ProgressCircle] How to prevent redrawing the entire progress when refreshed?

Forge Component
(5)
Published on 22 Mar by Daniel Martins
5 votes
Published on 22 Mar by Daniel Martins

Whenever the widget is refreshed, it redraws the progress from zero.  How can I change the animation so that it draws from the last progress level when refreshed rather than redrawing the entire progress?

Many thanks.

Sienna wrote:

Whenever the widget is refreshed, it redraws the progress from zero.  How can I change the animation so that it draws from the last progress level when refreshed rather than redrawing the entire progress?

Many thanks.

Hi Sienna,

Please download here and install the version 1.0.1 that is currently "Under Development".

What's new:


Init function was being called on document ready:

$(document).ready(function(){

This version changed this to window load:

$(window).load(function(){


This prevents init of being re-executed on ajax refresh calls.


This way, you can refresh the elements where progress circle are inside and no redraw is done, please let me know if it solves your issue.


Best regards,

Daniel Martins

I was unable to directly download the version referred to (weirdly it never gives an option to save the file), so instead I just downloaded from the main link at the top.  I presume that downloads the latest version, however it does not fix the problem.  I don't know if the fact I'm running it on Outsystems v10 has anything to do with it?

 You can download via browser:


Indeed changes were been done on version 11.


However, as I mentioned the changes are just a few and easy to implement. You can download the module on your environment perform the changes and republish your consumers.

It's just to replace in PercentageCircle webblock '$(document).ready(function(){' by '$(window).load(function(){':

Best regards,

I tried downloading using the link you highlighted but as mentioned it doesn't work.  See here how there is no option to install compared to the version available for Outsystems 10.

Not sure what is wrong, I've never seen that before, but I will download the version for Outsystems 10 and update it myself, thanks.

Sorry just to clarify, when I say that there's no option to install, I mean there's no option to install in the development environment and when I click on agree and download nothing happens.  The same is happens for both Outsystems 11 versions and I did try multiple times.  I can however download the version for Outsystems 10 without problem.

....so will edit that version.

[Sorry for some weird reason I couldn't edit my previous comment, I get an error saying I don't have permission to create/edit in this forum!?]

I updated it as described but now it doesn't draw the progress at all?


Sienna wrote:

I updated it as described but now it doesn't draw the progress at all?



Glad you make it, yes, with that implementation, it doesn't redraw if element is refreshed (by Ajax).

Is not the expected behaviour? Because current version it redraws with the animation.


Could you please specify what is your current behaviour with a video, and what are you trying to achieve?



I created two MP4s showing what I'm doing (design time and runtime) but can't upload them here. Maybe I could email them to you?

....In order to email them to you though, I would need your email address as Outsystems doesn't appear to handle MP4s.

Many thanks!

Sienna


Please share via link with Dropbox or google drive or use a screen capture to gif:

https://www.howtogeek.com/286210/how-to-turn-your-computer-screen-into-an-animated-gif/


Best regards

Here you go....

https://www.dropbox.com/sh/lzvilxan81stnlz/AABQ9MJhGFVWHyR45Kgudyara?dl=0

The videos show the behaviour after changing the code as specified.  Prior to changing it, the progress circle increased each time the button was clicked but it redrew from a value of zero each time it was clicked instead of from the last value (though the value it went up to was always correct).


NB: the only thing I've changed in the Progress Circle is shown in the screenshot of code above.


Hi Sienna,

Accordingly with the documentation and discussion, there are two ways, by running a JavaScript (JS) command:

$('#ContainerId').circleProgress({ value: 0.2 , animation: false});

$('#ContainerId').circleProgress({ animationStartValue:0.20, value: 0.3 });

Just encapsulate the respective JS snippet into a Run JavaScript (HttpRequestHandler) action.

Hope it helps you!


Daniel Martins


I tried encapsulating the script in a run JavaScript server action but that didn't work.  Sorry maybe I'm doing something wrong (I'm a C#/VB gal and don't know Java).

Ok, so I've had 2 other Outsystems developers who know JavaScript and neither of them can get it to work either.  Is it at all possible that you could maybe fix this bug instead or give clear instructions on how to implement the fix please?

Many thanks.

....oh and weirdly if I switch off the animation, the labels disappear!?

Solution

Please find attached one oml that shows how the suggested approach works.

You can click the button and see the circle incrementing. I believe that is accordingly to your use case.


Hope it helps you.

Best regards 

Solution

Thanks so much Daniel, however my project is in Outsystems v10 and I copied everything as per your v11 demo but it still does not work in v10, though your v11 demo works fine.