How to use ProgressBar component?

In a Convertigo Low Code application, how do set up a progress bar component that will increment based on a sequence execution?

The solution is to place milestones in different key location with https://www.convertigo.com/documentation/latest/reference-manual/convertigo-objects/sequencer/steps/http-session-management/set-object-in-session/ in the main sequence. The front will poll another sequence to read these milestones with https://www.convertigo.com/documentation/latest/reference-manual/convertigo-objects/sequencer/steps/http-session-management/get-object-from-session/ and increment the progress bar component accordingly.

To see it live, import the progressbar project in your Studio.

First progress bar is of type 'determinate' and positioned in the Toolbar.
Second progress bar has a buffer and value incrementing. Color is set to 'success' (green).
Third progress bar is of type 'indeterminate'. Color is set to 'warnning' (orange).
Fourth progress bar is fired with the ‘Start' button. It call a ‘main' sequence that takes time to execute. It also calls at regular interval another sequence (’checkStatus’) that will give us the main sequence status. Color is set dynamically to different color, depending on the sequence's response.

To emulate bar progression, it uses a SetGlobal and a customAction components in a pageDidEnter page event.

The SetGlobal is to set a global variable in the Scope of the application to be easily accessed in the customAaction and in the ProgressBar component value.

The customAction fakes the increment of the ProgressBar value.

For example:

	/**
	 * Function fake_progress
	 *   
	 * 
	 * @param page  , the current page
	 * @param props , the object which holds properties key-value pairs
	 * @param vars  , the object which holds variables key-value pairs
	 * @param event , the current event object
	 */
	CTS1687252196428(page: Page, props, vars, event: any) : Promise<any> {
		return new Promise((resolve, reject) => {
		/*Begin_c8o_function:CTS1687252196428*/
		page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName);
		setInterval(() => {
      		this.global.progress_determinate += 0.01;

		      // Reset the progress bar when it reaches 100%
		      // to continuously show the demo
		      if (this.global.progress_determinate > 1) {
		        setTimeout(() => {
		          this.global.progress_determinate = 0;
		        }, 1000);
		      }
	    }, 50);
		resolve();
		/*End_c8o_function:CTS1687252196428*/
		});
	}

The last ProgressBar which progression is based on a sequence execution has the following customAction code:

	/**
	 * Function checkStatus
	 *   
	 * 
	 * @param page  , the current page
	 * @param props , the object which holds properties key-value pairs
	 * @param vars  , the object which holds variables key-value pairs
	 * @param event , the current event object
	 */
	CTS1687262421398(page: Page, props, vars, event: any) : Promise<any> {
		return new Promise((resolve, reject) => {
		/*Begin_c8o_function:CTS1687262421398*/
		page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName);
		if(this.global.check){
		        window.clearInterval(this.global.check);
		        this.global.check = null;
		    }
		    this.global.check = window.setInterval(() => {
		        page.call(".checkStatus", {}, null, 10000).then((result)=> {
	                //page.c8o.log.warn("R:" + result.progressbar.status);
	                this.global.pgValue = result.progressbar.status;
	                this.global.pgBgColor = result.progressbar.color;
	                if(result.progressbar.isEnd === true){
	                    window.clearInterval(this.global.check);
	                    this.global.check = null;
	                }
	            });
		    }, 500);
		resolve();
		/*End_c8o_function:CTS1687262421398*/
		});
	}