How to show g_modal Loading Dialog in Agent Workspace while Ajax call

[michelhanna]

Hi,

Is there a way to show a modal loading dialog/popup, while an ajax call is in progress, in Agent workspace? 

We used to use the following for UI16 view:

var loadingDialog = new GlideDialogWindow("dialog_loading", true);
loadingDialog.setPreference('table', 'loading');
loadingDialog.setTitle('Loading...'); //Set the loading dialog title here...
loadingDialog.render();

Not sure how to achieve the same with workspace g_modal.

[Filipe Cruz]

Hello michelhanna,

I was facing a similar challange one of this days.
From what I saw, there is not way to do what you want.

What I did was creating a Service Portal widget to display a progress bar. That widget invokes a specific server side script and when it is finished the progress bar reaches 100%.

I invoked the widget with this code posted to the "workspace client script" section of the ui action:

function onClick(g_form) {
    g_modal.showFrame({
        url: '<url_for_the_page_+_widget>',
        title: 'MyWidget',
        size: 'lg',
        height: 400
    });
}

Are you familiarized with widget creation?

Please, if this answer is relevant for you, please mark it as correct and helpful.

Thanks,

Filipe

[michelhanna]

Hi Filipe,

Sounds elegant! But I am not sure where to start if I want to create such progress bar widget.

Any code example or link?

Thanks,

Michel

[Filipe Cruz · Accepted solution]

Sure.
Here is what I have for that widget:

HTML:

<div class="progress">
  <div class="progress-bar" id="myBar" role="progressbar" style="width: {{c.value}}%" aria-valuenow="{{c.value}}" aria-valuemin="0" aria-valuemax="100">{{c.value}}%</div>
</div>

Client Controller:

api.controller=// Client Script
	function ($timeout, $window, $interval) {
	/* widget controller */
	var c = this;

	c.value = 0;
	c.increaseProgress = $interval(function(){
		if(c.value < 50)
			++c.value;	
		else{
			$interval.cancel(c.increaseProgress);

			c.increaseProgress2 = $interval(function(){
				if(c.value >= 50 && c.value < 90)
					++c.value;	
				else{
					$interval.cancel(c.increaseProgress2);	
					c.increaseProgress3 = $interval(function(){
						if(c.value >= 90 && c.value < 100)
							++c.value;	
						else
							$interval.cancel(c.increaseProgress3);	
					}, 1000);
				}
			}, 200);
		}
	}, 50);


}

What this is doing is increasing the progress bar every 50 ms until it reaches 50%; after that increate until 90% every 200ms and then every second until 100%.

I don't have code in the Server script.

Please, if this answer is relevant for you, please mark it as correct and helpful.

Thanks,

Filipe

[michelhanna]

Hi Filipe,

Could you please explain how do you construct the "url"?

 url: '<url_for_the_page_+_widget>'

What is url_for_the_page? Is  that a service portal page that includes the new widget?

Thanks,

Michel