...
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:
| Code Block | ||
|---|---|---|
| ||
/**
* 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:
| Code Block | ||
|---|---|---|
| ||
/**
* 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*/
});
} |