How To Reuse Client Side Script Code

David165 · ‎06-24-2019

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 · ‎07-26-2019

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 &&)

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

View solution in original post

David165 · ‎06-24-2019

Yes, it's set to all on both the onLoad and onChange scripts.

I see plenty of other people with the same error when using this technique, but no solution to it. I did see one post that said this method doesn't work in the portal.

Another thread suggests you have to use a variable set, but I can't see the reasoning for this.

There are plenty of threads advocating your solution, but I haven't found any that flag the suggestion as a solution to the issue.

Regards

David

9amsoftware · ‎06-08-2020

I still have the same issue in Orlando release.

I have unmarked the "Isolate Script" flag.

UI Type is set to all.

Checked for function name several time for any possible spelling mistake.

But still giving same error "onChange script error: ReferenceError: CalcutePropertyValues is not defined function () { [native code] }"

Swathi14 · ‎04-05-2021

Did you get the solution for the error?

Anton6 · ‎11-17-2021

The solution is in this community thread: https://community.servicenow.com/community?id=community_question&sys_id=fe0090dddbd358d0fa192183ca96...

All credit go to Tony for this small change!

checkPrimaryRole = function() {
	alert('in the function');
};

Prateek kumar · ‎06-24-2019

Take a look at this blog. It has some nice scripts you can reuse

https://community.servicenow.com/community?id=community_article&sys_id=7eb34b9bdb2b5f848e7c2926ca961...

Please mark my response as correct and helpful if it helped solved your question.
-Thanks