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

[mahudg2]

I'm making a ui page and attempting to include jquery, as well as responsive slides (a plugin for jquery). To do so I created two 'script includes' that contained the contents of jquery as well as the responsive slides plugin. I just want to include these scripts, but to be honest I have no idea how to. I attempted to read the wiki about them Script Includes - ServiceNow Wiki but to be honest it just left me clueless. Does anyone have any ideas?

Thanks in advance!

[ChrisBurks · Accepted solution]

<script> should work. I've used it many times.

Or you could use either of the two jelly versions:

UI Scripts use:

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

or for UI Macros   use:

<g:rslides />

or if that doesn't work:

<g:macro_invoke macro="rslides" />

Also, it would be nice if you can expand on how it didn't work. Aside from not seeing what you want to see visually happen, what checks did you make to see if the script is actually being included in the page.

For example one check I always do is to bring up that page and do an "Inspect Element" and use the resources tab to see if the the script actually made it to the page. (Chrome or FF; not sure if you can do the same in IE)

Chris Burks

Implementations Technician

Efficient Technology

[jamesmcwhinney]

How do I then go about calling the function in my UI script?

For example, I have a UI script "FormatCurrencyValue" which is not global and contains the following code:

function FormatCurrencyValue(value){

        return '$' + value;

}

In my UI page, I have the following code:

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

<td class="sc_os_total" colspan="1">${FormatCurrencyValue(sc_req_item.price * sc_req_item.quantity)}</td>

Where am I going wrong?

Thanks!

[ChrisBurks]

Hi James,

Quick note: Now I use <g:requires name="FormatCurrencyValue.jsdbx" /> more often.

Although you're using a jelly tag to bring in that script this the g:include_script will actually bring in the file just the same as if you are scripting in a plain html page. Just think of it as if you did <script></script>.

However, in a UI page you have two places you can use your function now.

1) Either in the HTML/XML section

• <script>FormatCurrencyValue("${sc_req_item.price * sc_req_item.quantity}")</script>

2) Or in the Client Script section where you won't need the <script> tags

• FormatCurrencyValue("${sc_req_item.price * sc_req_item.quantity}");

Here is a screenshot of how it could possibly look depending how your script is constructed. So bare in mind this is a simple example just using the info you provided and some assumption on my part. But it should give you an idea.

[jamesmcwhinney]

Thanks Chris,

I think what I actually need though is a way to create a re-usable function that can be used on the server side within the <g:evaluate> tags.

So I could do this:

<td class="sc_os_total" colspan="1">${FormatCurrencyValue(sc_req_item.price * sc_req_item.quantity)}</td>

which should result in this:

<td class="sc_os_total" colspan="1">$1,000.00</td>

Rather than this:

<td class="sc_os_total" colspan="1">FormatCurrencyValue(${sc_req_item.price * sc_req_item.quantity})</td>

which would result in this:

<td class="sc_os_total" colspan="1">FormatCurrencyValue(1000)</td>

Thanks again!

[jamesmcwhinney]

I figured it out.   I needed to use a script include.

Script include "jamesCurrencyFormatter":

var jamesCurrencyFormatter= Class.create();

jamesCurrencyFormatter.prototype = {

      initialize: function() {

      },

formatCND : function(decimalvalue) {

          return '$' + decimalvalue;

},

        type: 'jamesCurrencyFormatter'

};

UI Page:

<td class="sc_os_total" colspan="1">${var cur = new jamesCurrencyFormatter(); cur.formatCND(sc_req_item.price * sc_req_item.quantity)}</td>