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

michelhanna · ‎03-28-2022

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 · ‎03-28-2022

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

View solution in original post

Filipe Cruz · ‎03-28-2022

Hi Michael, Yes! You create the widget and add it to a page. Then your url will be something with the page and url IDs. (Not in front of the laptop now, so cannot tell you exactly, but pick one example from your so portal and check how the url is being created). Just let me know if you have questions regarding this!