How To Reuse Client Side Script Code

[David165]

Hi

I've written a short client script to change the colour of a selection value form field when the value changes. It works well, but I want to use the same code across quite a number of form fields. How can I put this code into a client side function that I can call for each of my form fields?

I looked at UI scripts, but my head exploded with the complexity of implementing these. Isn't there a simpler way to call a custom client side function?

Here's the onChange function I'd like to call for a variety of form fields:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	
	var elementID = g_form.getElement(control.name);
	
	switch(newValue) {
		case "3": elementID.style.backgroundColor = "red"; break;
		case "2": elementID.style.backgroundColor = "orange"; break;
		case "1": elementID.style.backgroundColor = "yellow"; break;
		default: elementID.style.backgroundColor = "white"; break; }
		
}

Thanks in advance.

David

[David165]

So, it's a week later and I still haven't managed to get this working. I've tried just about every combination of UI scripts and ways to call them that I can find in the documentation and in community posts and blogs that I can find, but it comes back to one thing; my onChange can't find the function I'm calling.

My latest effort is to have a client UI script, using the supplied template and just changing the function names to match what I wanted. This is my bare bones client UI script:

var x__cicsv_t1 = x__cicsv_t1 || {};

x__cicsv_t1.setColour = (function() {
	"use strict";


	return {

		type:  "setColour"
	};
})();

Yes, it does nothing at the moment, I just want to be able to call it successfully.

In my onChange I have this code:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	if (isLoading || newValue === '') {
		return;
	}
	
	//Type appropriate comment here, and begin script below
	g_ui_scripts.getUIScript('setColour').then(function(script) {
        script.setColour();
    }, function() {
        console.log('The setColour script did not load');
    });
	
}

When I change the data field this is attached to I get this error:

onChange script error: ReferenceError: g_ui_scripts is not defined function () { [native code] }

I got the call to g_ui_scripts from this page in the SNow documentation.

Not only can the system not find my functions, it can't find its own! Which leads me to the conclusion I must be doing something fundamentally wrong!

I did find one thread in the community that said a call to g_ui_scripts was broken in Madrid, but should be resolved in Madrid patch 2. I'm using patch 2, but I'm still getting the error.

Can anyone assist me in resolving this? Having spent a week on it already I'm desperate to get it working as I know reusing code is something I shall need to do many times.

David

[David165]

Hi

I don't know if posting a reply to this thread is going to generate any new input, but unfortunately I'm back to this issue as it didn't get resolved first time around and now I have the same problem of needing to call a client side function from several onChange scripts on the same form. I still cannot get this to work.

I am developing a scoped application.

I have created a UI Script called setGXPAssessment. Here is the code:

var x_173342_cicsv_t1 = x_173342_cicsv_t1 || {};

x_173342_cicsv_t1.setGXPAssessment = (function() {
	"use strict";

	function calcGXPAssessment() {
	
	// Get all the values relevant to GXP Assessment
	var patientAffecting = g_form.getValue('u_patient_affecting');
	var haRegulated = g_form.getValue('u_health_authority_regulated');
	var processSupported = g_form.getValue('u_process_supported');
	
	if (patientAffecting == 2)
		return 3; // Return High
	
	if (haRegulated == 2 && processSupported == 1) {
		return 2; // Medium
	} else if (haRegulated == 2 && processSupported == 2) {
		return 1; // Low
	}
	
	return 0; // Not Applicable
	
}

	return {

/* set your public API here. For example:
		incrementAndReturnPrivateVar: function() {
			return private_function();
		},
*/
		setGXPAssessment: function() {
			return calcGXPAssessment();
		},
		
		type:  "setGXPAssessment"
	};
})();

I have a Client Script that runs onLoad to run the script loader

function onLoad() {
   //Type appropriate comment here, and begin script below
	alert("Loading script " + 'x_173342_cicsv_t1.setGXPAssessment.jsdbx');
    ScriptLoader.getScripts('x_173342_cicsv_t1.setGXPAssessment.jsdbx', function(){});
}

The alert fires when the form loads I know this executes.

I have an onChange on a specific data field in the form that does a bunch of stuff that I've tested and I know works. At the end of that it should call my setGXPAssessment:

var calcGXP = new setGXPAssessment();
g_form.setValue('u_gxp_assessment', calcGXP.setGXPAssessment());

When this code is included into the onChange script I get this error displayed on the form when the form loads:

onChange script error: ReferenceError: setGXPAssessment is not defined function() { [native code] }

I have tried prepending the scope name when calling setGXPAssessment, but then the error says that the scope name is not a defined function.

At the moment my development is blocked in two branches because I cannot get this simple paradigm of sharing functions around the place to work, which is very frustrating.

Can anyone tell me what I'm doing wrong?

Regards

David

[David165 · Accepted solution]

Hi

I'm delighted to report that I have, at last, resolved this issue. After weeks of trying different methods to load the functions I wanted to share between fields on a form (so I could call the same functions onChange on several form fields) I could get it to work by including my shared functions within <script></script> tags inside a UI Macro:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<script>
		function calcgxpassessment() {

                  // My code here
		}
	</script>	
</j:jelly>

Within my code, I had to rework things like && and change double quotes because these are XML entities. I haven't tried replacing these with the correct XML entities (E.g replacing && with &amp;&amp;)

I then included the UI Macro in a UI Formatter

and then dropped the UI formatter into the bottom of the form.

Finally, I was able to call the function calcgxpassessment() onChange from any choice field that needs to recalculate the risk. I also had to remember to deselect "Isolate script" from these client scripts. Otherwise, they couldn't see the shared function.

My project is back on the rails 🙂

Regards

David

[Ximizu]

Thanks for this workaround solution. It will save a lot of times (the times that you have spend searching :p).

I wish the OOTB GlideUIScript works as described in the documentation, so it would be cleaner.

Xmizu