I need a progressbar to be developed on all the pages in the application.
Hey @Akshata Tallur,
Use a global progress bar in the Theme/Layout.
Increase progress by 10% every 1 second using JavaScript (setInterval)
On page load complete (window.onload), set it to 100% and hide it
Note: OutSystems doesn’t provide real page-load percentage, so this is a simulated progress bar (standard practice).
Hi @Akshata Tallur ,
You can follow below:
1. Use Progress bar in Layout and 1 local variable to store the value of progress bar
2. Use JavaScript (setInterval) to change the local variable every sec in OnReady
* And remember to remove JS from OnDestroy.
Hello,
I added an answer earlier but deleted it, as I initially thought you were asking about the ProgressBar in general. For this specific use case, I don’t think it’s possible.
The ProgressBar is a DOM element, and while the application is still initializing, the DOM is not ready yet. What you’re trying to achieve is to display the ProgressBar at the very beginning, but at that stage there’s no indication of actual progress. Additionally, even if you found a way to display it during initialization, there would be nothing to use to increment the bar, since everything is happening in the background.
To implement a progress bar that updates every second and reaches 100% when the page finishes loading in OutSystems (using O11), you can follow these steps:
Drag the Progress Bar Widget: Go to the Toolbox in Service Studio, search for the Progress Bar widget, and drag it onto your screen's Main Content area Progress Bar.
Add a Local Variable: Right-click your screen name and add a local variable (e.g., ProgressValue) to represent the percentage. Initialize its value to 0 Progress Bar.
ProgressValue
Set Progress Bar Properties: Select the Progress Bar widget, and set the Percentage or Progress property to the ProgressValue variable.
Percentage
Progress
Preparation Logic:
Add Timer Logic:
UpdateProgress
If ProgressValue < 100 Then ProgressValue = ProgressValue + (UpdateInterval / TotalTime) * 100 Else End Timer
UpdateInterval
TotalTime
Use JavaScript Timer:
setTimeout
setInterval
End Timer: Add a condition to stop updates (e.g., when ProgressValue reaches 100), stopping your logic when the loading is complete Progress Bar.
Animation (Optional): Use the OptionalConfigs.AnimateInitialProgress property of the Progress Bar widget to animate the filling from 0% to the current value Progress Bar.
After implementing this, publish the module, test the page, and you should have a functional progress bar that updates every second and reaches 100% when the page is fully loaded.
Hi @Akshata Tallur,
Here is a sample for the described requirements.
1. Find Shared WebBlock
We need a shared webblock in all screens to add the progress bar in it. So that the logic is applied in all screens.
In my case, I choose LayoutTopMenu.
2. Define Interval to Update Progress
The next step, is to add the logic that shall increase the progress every second. We shall use setInterval() function in Javascript.
Define the setInterval() in the OnReady of LayoutTopMenu, and save the interval Id so that we can stop the interval when the progress reach 100%.
3. Add Progress Bar
In the Widget Tree section add the progress bar.
I recommend using CSS to hide and display the layout content/progress bar, instead of using If widget. As OutSystems runs scripts on the layout, and my cause errors if these elements did not render.
4. Clearing Interval
We need to stop the interval when the progress reach 100%. All you need is to check the progress in the setInterval() triggered action.
Also, stop the interval in the OnDestory block event. As the screen may be destroyed before the progress reaches 100%.
You can apply your style for the progress behavior. For me I prefer to use a progress circle with the progress percentage in the middle.
Finally, you can find a demo, for both progress bar and circle, attached to this reply.
Regards,Mustafa.
it blows the mind how everybody just ignores the elephant in the room : you don't know upfront at what time it will be 100%, so you are by definition lying to your user.
She will be either happily surprised that it jumps from 30 to 100, or sadly disappointed that it just sticks at 100 (or maybe you device a special 99 for this) for several second before actually being done.