UI Script - Global checkbox = false - Application = Scoped

G24
Kilo Sage

I  want to define a reusable utility function for use in client-side code, for example in form and list view UI Actions.

I do NOT want to declare a Global UI Script, and I am working in a Scoped Application.

How do I achieve this?

1 ACCEPTED SOLUTION

G24
Kilo Sage

Step 1 - Define a System UI - UI Scripts record as follows:

               Name: MyScriptDesktop

               UI Type: Desktop

               Description: Reusable Client-Side utility function for use in Forms and List Views.  Scoped Application.

               Global: Unchecked. (The global checkbox may not even show up on the Form, because you CAN NOT declare global UI Scripts in a Scoped Application, but after you define the UI Script, you can verify that it is NOT global by looking at its record in the sys_ui_script table list view.)

 

               Script:

 

/* eslint-disable no-console */
/* eslint-disable no-mixed-spaces-and-tabs */
var x_fmc_ibfs = x_fmc_ibfs || {};

x_fmc_ibfs.MyScriptDesktop = (function() {
	"use strict";

	return {
		myUtilityFunction: function(myParameter1, myParameter2) {
			console.warn("Hello World!  myParameter1: " + myParameter1 + ".  myParameter2: " + myParameter2);
			return myParameter1 + myParameter2;
		},
		type:  "MyScriptDesktop"
	};
})();

 

 

                Screenshot:

Picture1.png

                Things to Note:

                                The Application is NOT Global, nor is the UI Script (in this use case).

                                This example accepts 2 input parameters, but those are optional.

                                This example returns a value, but that is optional as well.

                                The callback function can be declared "inline" if you prefer that style,

                                but not matter how you declare it, it will be called asynchronously.

 

Step 2 - Use the utility function from Client-Side code such as a UI Action.

                Name: MyUIAction

                Client checkbox: checked.

                Onclick: runMyUIAction()

                Script:

 

function sendNotificationsToSelectedSites() {

		function myClientSideCallbackFunction2() {
		console.warn("A");
		console.warn("myUtilityFunction2: " + MyCrazyUIScript.myUtilityFunction2);
		var myResult = MyCrazyUIScript.myUtilityFunction2("P1", "P2");
		console.warn("myResult: " + myResult);
		console.warn("B");
	}

	console.warn("1");
	ScriptLoader.getScripts("MyCrazyUIScript.jsdbx", myClientSideCallbackFunction2);
	console.warn("2");

	return;
}

 

                Screenshot:

Picture2.png

 

                Things to Note:

In step 1, you tell the ScriptLoader, to explicitly load the fully qualified non-global script name you have defined, including the scoped application prefix, and when it is done, to call a callback function.

You MUST include the suffix ".jsdbx" after the name of your UI Script.  This tells the Script Loader                                how/where to find your UI Script.  Just do it.

In step 2, you define your callback function.

In step 3, you make use of the actual utility function you care about…  You MUST include the                                name of the UI Script in front of the name of the utility function, and you must also include your                                scoped application prefix, or the call will fail.

 

Result:      ( Use F12 to bring up the Browser Console Window to see the Console Log Messages. )

Picture3.png

 

If you need a UI Script for the Global application, see this article 

View solution in original post

1 REPLY 1

G24
Kilo Sage

Step 1 - Define a System UI - UI Scripts record as follows:

               Name: MyScriptDesktop

               UI Type: Desktop

               Description: Reusable Client-Side utility function for use in Forms and List Views.  Scoped Application.

               Global: Unchecked. (The global checkbox may not even show up on the Form, because you CAN NOT declare global UI Scripts in a Scoped Application, but after you define the UI Script, you can verify that it is NOT global by looking at its record in the sys_ui_script table list view.)

 

               Script:

 

/* eslint-disable no-console */
/* eslint-disable no-mixed-spaces-and-tabs */
var x_fmc_ibfs = x_fmc_ibfs || {};

x_fmc_ibfs.MyScriptDesktop = (function() {
	"use strict";

	return {
		myUtilityFunction: function(myParameter1, myParameter2) {
			console.warn("Hello World!  myParameter1: " + myParameter1 + ".  myParameter2: " + myParameter2);
			return myParameter1 + myParameter2;
		},
		type:  "MyScriptDesktop"
	};
})();

 

 

                Screenshot:

Picture1.png

                Things to Note:

                                The Application is NOT Global, nor is the UI Script (in this use case).

                                This example accepts 2 input parameters, but those are optional.

                                This example returns a value, but that is optional as well.

                                The callback function can be declared "inline" if you prefer that style,

                                but not matter how you declare it, it will be called asynchronously.

 

Step 2 - Use the utility function from Client-Side code such as a UI Action.

                Name: MyUIAction

                Client checkbox: checked.

                Onclick: runMyUIAction()

                Script:

 

function sendNotificationsToSelectedSites() {

		function myClientSideCallbackFunction2() {
		console.warn("A");
		console.warn("myUtilityFunction2: " + MyCrazyUIScript.myUtilityFunction2);
		var myResult = MyCrazyUIScript.myUtilityFunction2("P1", "P2");
		console.warn("myResult: " + myResult);
		console.warn("B");
	}

	console.warn("1");
	ScriptLoader.getScripts("MyCrazyUIScript.jsdbx", myClientSideCallbackFunction2);
	console.warn("2");

	return;
}

 

                Screenshot:

Picture2.png

 

                Things to Note:

In step 1, you tell the ScriptLoader, to explicitly load the fully qualified non-global script name you have defined, including the scoped application prefix, and when it is done, to call a callback function.

You MUST include the suffix ".jsdbx" after the name of your UI Script.  This tells the Script Loader                                how/where to find your UI Script.  Just do it.

In step 2, you define your callback function.

In step 3, you make use of the actual utility function you care about…  You MUST include the                                name of the UI Script in front of the name of the utility function, and you must also include your                                scoped application prefix, or the call will fail.

 

Result:      ( Use F12 to bring up the Browser Console Window to see the Console Log Messages. )

Picture3.png

 

If you need a UI Script for the Global application, see this article