How to make widget load after page load

[JC S_]

We created a widget that queries quite a lot of data from incident table in one call and when we used that widget on a service portal page, the load time of that page is now very slow (it shows the default service portal Loading... page).

Is there any way we can defer the loading of the widget after the page loads - similar to how the Reports widget handles loading on service portal. Perhaps show a "Building widget..." prompt on the widget first on page load then once the page is loaded the actual widget query is run?

Better if we can output on browser console something like "Time to render widget: XXs" similar to the report widget.

[SatheeshKumar]

try the below 

"spModel.gForm.initialized" is an OOB event triggered when a form loading is completed.

$scope.$on('spModel.gForm.initialized', function (e, gFormInstance) {

console.log('In spModel.gForm.initialized');

});

-satheesh

[JC S_]

Do you just put this on widget Client script and it should work?

[JC S_]

Also, we are not loading a form. We created a custom widget that shows a table with multiple record counts from incident table.

[Xavier Cordero]

Hello JC,

I found this thread interesting so I played around for a bit in my dev instance and managed to create a widget that loaded after the page load by placing the server side script within an if statement for input and then calling a c.server.update to trigger the population of the widget data after the page had finished loading. Below is my script:

HTML:

<div id="thisIsATest">
<!-- your widget template -->
  <p id="beforeAdditionOfData">
    Widget is loading.
  </p>
  <ul ng-repeat="x in data.list track by $index">
    <li>{{x}}</li>
  </ul>
</div>

Client Script:

function() {
  /* widget controller */
	var c = this;
$(function() {
	c.data.test = "This is input";
	c.server.update().then(()=>{
		c.data.test = "";
		$('#beforeAdditionOfData').html('');
	}
	);
});
	

}

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

	
	if(input){
	data.list = [];
	if(input.test == "This is input"){
		var gr = new GlideRecord('syslog');
		gr.query();
		while(gr.next()){
			data.list.push(
				gr.getValue('message'));
		}
		
	}
}
})();

Basically what is happening is that when the widget first loads the server script does not make any calls because there is no input, which means that the user is taken to the Service Portal Page, where the placeholder text "Widget is loading" appears instead of the final widget, but the rest of the page is functional. After the load of the page has finished, within the Client Script via JQuery the server script is triggered and now runs due to the fact that there is now input. Once the object is returned from the server and the widget is assembled, the then function wipes out the data.test variable so that the script only runs once, and with JQuery we remove the loading text from the HTML.