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

[Elijah Aromola]

You could write a script include and call it with a Glide Ajax call. You could also write a function in an onLoad script but outside of the actual onLoad function like: 

function onLoad() {
     //Type appropriate comment here, and begin script below
}

function yourFunctionHere() {
   //Do stuff
}

Then call the function within your onChange script. 

[David165]

Hi Elijah

Thanks for your reply. I tried the onLoad suggestion as it seems the simpler of the two, but unfortunately this doesn't work. When the form is loaded, and the onChange fires for the form fields, I get this error:

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

It appears that the onLoad hasn't loaded my function at the time the onChange is called?

This is my onLoad script:

function onLoad() {
	// This function does nothing, but the code below gets loaded.
	
}

//
// Set the colour of a form field according to the value selected.
//
function setColour(control, newValue) {
	var elementName = control.name;
	var elementID = g_form.getElement(elementName);
	
	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; 
	}
	
}

And this is now my onChange script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	
	setColour(control, newValue);
		
}

[Elijah Aromola]

You have to set

 

to false (unchecked). If you don't see it at the bottom of your script, go to form layout and add it to the bottom of your form and uncheck it.

Please mark this as helpful/correct if it resolved your issue!

[Community Alums]

Make sure the script include is 'Client Callable'