Including a UI script in a module w/o the UI script being global

cdgaefke · ‎05-07-2014

I have a fairly complex set of client and server side code that will be used across multiple modules.

On the server side, I'm in good shape because I can put them in a Script Include and call them as needed.

On the client side, I need the equivalent, which is sort of a UI Script, but I'd rather it not be global. The wiki references a way to include it explicitly with this code:

It doesn't say how/where to do that. I read elsewhere it has to be in a UI Page, which I think means getting into Jelly, which is very new to me. Is it possible to create a UI Page that encapsulates an existing module so that I can reference my UI Script without it being global? If so, can someone point me to where I can learn how to do that?

I found this:

https://community.servicenow.com/thread/154072?q=ui script

Which is useful if the code is limited to one module. My code is going to be across multiple modules, so I need one spot for the code.

Suggestions/help please?

Thanks.

tltoulson · ‎05-14-2014

Great to hear! As an add-on for informational purposes only, I'll throw this out there:

Lets assume you want to include the following javascript function on a few different forms:

function sayHello(name) {


         // Fantastic aint it


         console.log('Hello, ' + name);


}

Using the Macro/Formatter method I mentioned above, you could put this function in a Macro in two ways. The first is directly using <script> blocks:

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 sayHello(name) {


                             console.log('Hello, ' + name);


                   }


         </script>


</j:jelly>

The other method, as you have discovered, is using a NON-GLOBAL UI Script. Global UI scripts are included on every page and usually adds unnecessary overhead. Using the macro in conjunction with a non-global UI Script and a formatter, you can achieve the same exact thing. So the following set of scripts would be functionally identical to the above:

UI Script

name: SayHello

global: false

function sayHello(name) {


         console.log('Hello, ' + name);


}

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>


</j:jelly>

The primary difference between the two is that the first loads a single resource - the page with content generated by the Macro. The second loads two resources - the page with content generated by the Macro and the UI Script file loaded separately.

View solution in original post

tltoulson · ‎05-07-2014

Hi Charles,

Yes, that part of the wiki is referring to Jelly (UI Pages or CMS Pages). Here are a couple suggestions:

1. Encapsulate your code in a Script Include as you have already done Server Side but expose that Script Include via AJAX to the client. You will still have to write the client scripts that implement the client side of the AJAX of you may be able to handle most of the logic server side.

GlideAjax - ServiceNow Wiki

2. Use a UI Macro combined with a formatter. Within the UI Macro, define your 'Client Side Script Includes' inside a <script></script> block. Then create a formatter that uses that UI Macro. Finally, add the formatter to your form and any client scripts you write on the form will have access to those libraries.

Creating a Formatter - ServiceNow Wiki

UI Macros - ServiceNow Wiki

cdgaefke · ‎05-12-2014

Thank you. This looks promising. I intend to give a try soon.

cdgaefke · ‎05-14-2014

I gave this a whirl and am running into difficulties. I'm not sure where in the jelly in the UI Macro to put the <script></script> line. I tried in the middle, and at the end, to no avail. You stated "define your client side script includes". However I'm pretty sure I have to use a UI script, which isn't a script include, right? Script includes are server side. Yes, they can be made reachable via GlideAjax, however they are still server side, so client side form manipulation (like hiding fields or changing the read only status of a field) isn't doable.

I'm very confused about the reference here:

http://wiki.servicenow.com/index.php?title=UI_Scripts

That says "a UI script can be included with your JavaScript". Where exactly can I put this?

Thanks.

cdgaefke · ‎05-14-2014

I just happened across this...

Re: How do I include a script include into a ui page?

It has the answer I need on how to reference the UI Script in the UI Macro:

<g:include_script src="your_script.jsdbx" />

It works now!