progress-modal
Web icon

Progress Modal

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 30 November 2023
 by 
0.0
 (0 ratings)
progress-modal

Progress Modal

Documentation
1.0.0

First you need to place the web block inside your page. Doesn't matter where you put it. This is implemented with the dialog html element. It starts hidden. And when we open the model it shows in the middle of the page, in front of everything.

Then use the OpenProgressModal to open the first time the modal. When opening you can control:

  • Title: Text. it's just a common title the you can give to your modal
  • ShowProgressBar: Boolean. Use this to enable/disable the progress bar visualization
  • MaxValue: Int. If you are using the progress bar visualization you need to define the max value
  • InitialValue: Int. If you are using the progress bar visualization you need to define the initial value
  • Info: Text. You may want to define the initial message


In this screenshot, "Progress" is the title, "Item 2 processed" is the info text and the progress bar is enabled.

Actions:


CloseProgressModel - Just closes the modal

OpenProgressModal - Opens the modal with the initial configuration

SetProgressModalMaxValue - Just to change the max value of the progress bar if needed. 

SetProgressModalValue - Action to change the current value of the progress bar. Use this to update the progress bar visualization.

SetProgressModalInfo - This acction changes the info message

UpdateProgressModal - This action changes the info message and the current value at the same time.


This is the screen action that is used on the demo. It uses the Sleep component to simulate a long process. Here is an example: