Upload or include JS files in SN

[Deepak Negi]

HI

I want to use some jquery elements in some requirement. I have added the code into UI scripts module and calling it by

<script language="javascript" src="CoolClock.jsdbx" />

But by inculding those files, I am not able to use CMS properly. While adding dynamic content to a page the browsers hangs up.

So do we have another method or utility by which we can include other js files so that it wont affect the core jquery libraries of SN.

Thanks

Deepak Ved Negi

[kevinanderson]

Chris,

As I understand it, script includes are server side.   I want to provide JS classes to my client side modules, such in a catalog client script, so that instead of repeating the same lines across multiple scripts I can just call:

myclass = new MyClass()

result = myclass.dosomething();

I do not want to make a round trip back to the server for this kind of operation, and instead want the requirements available to the client script when the event fires (such as onchange or onload).   I some cases the module I include may already have server comm built into it, and this makes for a simple call to initiate that process.

I don't want these small components to be global, so instead I make them UI scripts, and use document.write to pre-load them into the DOM directly above the event declaration in the catalog client scripts.   Like so:

// include the class for performing database insert via glide ajax

document.write('<script><\/script>');

/**

   create a record in the table u_request_tracking for reporting on user catalog submissions -   pre submit tracking

   function onLoad

*/

function onLoad() {

         var itr = new InsertTrackingRecord(); 

         itr.insertNew();





}

The above code is a simple example I put together as a proof of concept.

This approach has the benefit of centralizing my code in one place, which makes maintenance easier.   Its a pain to update a bunch of client scripts that often are all doing the same thing for different catalog items.

For this kind of approach, it would be really nice if ServiceNow provided some kind of UI in the script definition that allowed me to list dependency client script that the system could pre-load so i didn't have to take this route.

My biggest headache with this is the client side caching can potentially cause issues when updates occur on the server...so I'm not totally crazy about this approach either.

If you know of a better way to achieve client side dependency injection without resorting to global scripts ...I am all ears.  

[ChrisBurks]

Kevin,

In one of your commented sections in your script you mention glide ajax. ServiceNow's GlideAjax is not setup that way. The second link I provided in my previous post takes you to the documentation to describe how to set that up.

Yes, script includes perform work server side but they have a check box on the form to make them client side accessible so that you can perform GlideAjax. Here is a link to a Catalog Client Script using GlideAjax (calling a client side accessible Script Include) to update a cart on the server: Creating a Catalog Client Script - ServiceNow Wiki

[kevinanderson]

Chris:

The UI script "insert_tracking_record.jsdbx" provides logic that is potentially applied to all of our catalog items and interfaces with a script include enabled for client side communication via GlideAjax (Object.extendsObject(AbstractAjaxProcessor)...)

The original version of that logic used getXMLWait function calls, and was embedded in several different locations, catalog items and catalog guides.   I wanted to place the upgraded logic using getXML(callback) in 1 place and be able to easily reference it.

The complexity of that script is obscured by the example code I posted above...and that is exactly the point.   No need to insert that lengthy script in multiple locations.   It is easily called from any catalog client script with a few lines of code, and the logic can be maintained in a central spot via the UI script.

The only way I could see to achieve that common code base for the client scripts was via the document.write() call before the catalog client script event definition.

[kevinanderson]

I finally found the right way to do this on variable sets and forms. Thanks to Chris Burks for pointing me in the right direction.

The key is to put the <g:requires> tag call to embed the client side UI script you want in a UI macro, and embed it in the variable set or catalog item form variables.   Use a glide record in the macro to find the timestamp of the most recent update to the client script, and append as an argument on the jelly <g:requires> tag. Doing this ensures the client always gets the most recent version regardless of script updates:

Macro : catalog_item_user_tracking

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <!-- // read the timestamp for the most recent update on the UI script to ensure client gets newest version -->



       <g:evaluate var="jvar_stamp">

               var script_dttm = '';

               var gr = new GlideRecord('sys_ui_script');

               gr.addQuery('active',true);

               gr.addQuery('name','insert_tracking_record');

               gr.query();

               if (gr.next()){

                       script_dttm = gr.getValue('sys_updated_on');

               }

               script_dttm;

       </g:evaluate>



       <!-- // embed the UI script in the page as it loads -->

       <g:requires name="insert_tracking_record.jsdbx" params="cache=$[jvar_stamp]" />



       <script>

               // http://jakeboxer.com/blog/2010/01/23/prototype-analog-to-jquerys-document-dot-ready/

               document.observe('dom:loaded', function(){

                         // use the UI script once the page loads

                         (new InsertTrackingRecord()).insertNew();

               });

       </script>

</j:jelly>

[prashh]

hey deepak,

i am facing the same issue. did you get the solution for it?