[SOLVED] How to call scoped UI script from catalog client script ?

JG6 · ‎07-30-2020

It looks like a recurring question, but none of the advised solutions seem to work. Therefor I'd like to present my case.

Can somebody help to find out what I am missing ?

(1) UI Script

application: foo
name: bar
API name: foo.bar
ui type: all
script

var foo = foo || {};

foo.bar = (function() {
	"use strict";

	return {

		helloWorld: function() {
			console.warn("It works !");
		},
		
		type:  "bar"
	};
})();

(2) Catalog client script (also application 'foo'):

g_ui_scripts.getUIScript('foo.bar') => "No script registered with name ..."
g_ui_scripts.getUIScript('foo') => "No script registered with name ..."
g_ui_scripts.getUIScript('bar') => "No script registered with name ..."
g_ui_scripts.getUIScript('foo.bar.helloWorld') => "No script registered with name ..."
Same with g_ui_scripts[ ... ] => undefined
ScriptLoader.runScripts( ... ) => ScriptLoader undefined
...

JG6 · ‎08-11-2020

! SOLVED !

By carefully debugging the JS code in the catalog item page it became apparent why it doesn't work. The code of the UI script is expected to be executable. The ui script is the result of this invocation. The bottom line is that the proposed default ui script template is invalid for a scope ui script.

My example should therefore be rewritten as:

(function() {
	"use strict";

	return {

		helloWorld: function() {
			console.warn("It works !");
		},
		
		type:  "bar"
	};
})();

And the invocation:

g_ui_scripts.getUIScript('foo.bar').then(function(script) {
   script.helloWorld();
});

When saving the ui script for the first time there will be a warning about invalid implementation of the ui script. I ignored the error because there is no other way to implement the script for it to be accepted.

Hope this helps other people too.

View solution in original post

Anil Shewale · ‎07-30-2020

Hi

tried using GlideUIScripts or ScriptLoader? I can't remember whether either of those is available in a scoped application.

Access UI scripts from within client-side code.

There is no constructor for this class. Access methods using the g_ui_scripts global object in any client-side code, such as client or validation scripts.

If calling a UI script with UI Type set to Mobile / Service Portal, use the g_ui_scripts['nameOfScript']; syntax. If calling a UI script with the UI Type set to All or Desktop, use the getUIScript() method to load the script. However, this method is not supported in Internet Explorer 11 when called outside of the Angular application environment. If calling a UI script outside of an Angular context using IE11, you must call the script directly.

https://docs.servicenow.com/bundle/london-application-development/page/app-store/dev_portal/API_refe...

If it help mark helpful or correct

Thanks and regards

Anil

JG6 · ‎07-30-2020

Yep. As indicated, been there done that. Hence my question.

Ankur Bawiskar · ‎07-30-2020

Hi,

As per below question it seems they were able to achieve this as this question is answered

https://community.servicenow.com/community?id=community_question&sys_id=02666df0dbed5c104819fb243996...

if that doesn't help then

Looks like creating reusable UI Scripts in a scope will not work. I created a global UI script in the Global scope so that it can be used in a client script of custom scoped application.

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

JG6 · ‎08-10-2020

Is the consensus that it actually isn't possible ? Without adding it to the theme that is.

The SN Nerd · ‎08-10-2020

I believe so

ServiceNow Nerd
ServiceNow Developer MVP 2020-2022
ServiceNow Community MVP 2019-2022