{"id":290,"date":"2014-03-03T14:51:13","date_gmt":"2014-03-03T21:51:13","guid":{"rendered":"http:\/\/constantinekrick.com\/?p=290"},"modified":"2014-03-04T21:49:57","modified_gmt":"2014-03-05T04:49:57","slug":"integrate-servicenow-with-jquery","status":"publish","type":"post","link":"http:\/\/constantinekrick.com\/?p=290","title":{"rendered":"Integrate ServiceNow with jQuery"},"content":{"rendered":"

Integrating ServiceNow and jQuery can be very intimidating. This post will go through the process of creating a ServiceNow page that integrates with\u00a0jQuery<\/a>\u00a0and the\u00a0jQuery UI<\/a>\u00a0libraries. \u00a0The ServiceNow page will be displayed through a GlideDialogWindow<\/a>\u00a0for a very clean and integrated effect that shows a window with the jQueryUI accordion<\/a>\u00a0plugin.<\/p>\n

Screenshot of the completed demo:
\n\"IncidentPageGlideDialogWindowExampleStart\"<\/a><\/strong>
\n<\/p>\n

Step 1 : Uploading the jQuery and jQuery UI files to ServiceNow<\/h2>\n

ServiceNow will allow the <script src=”…”><\/strong> tag to be used on a standalone page; however<\/strong><\/span><\/em>, since we will be using this inside a Glide Dialog Window the source code of jQuery and jQueryUI must be uploaded to the UI Scripts library.<\/em><\/p>\n

When working in Jelly, ServiceNow will allow us to call the scripts through the tag <g:include_script>. \u00a0<\/strong>This tag will be furthered explained in step 2.<\/p>\n

    \n
  1. To upload the scripts, navigate to UI Scripts
    \n    \"Step1UI<\/a><\/strong>
    \n<\/strong><\/li>\n
  2. Copy and past the source code of both jQuery<\/strong> and jQueryUI<\/strong> files into ServiceNow. Both files can be downloaded from\u00a0http:\/\/jqueryui.com\/download\/<\/a>. \u00a0(It is recommended to use the jQuery min files as they are smaller and will load faster; however, I have used the easier to read forms in this demo in order to increase readability).
    \n    \"Step1UI<\/a><\/li>\n<\/ol>\n

    Step 2 : Creating the UI Page<\/h2>\n

    The UI page is the most complex part of this setup as there are two important parts… the<\/p>\n

    <g:include_script src=”jQueryFILE.jsdbx”><\/strong>
    \nand the use of …
    \njQuery.noConflict(true);<\/strong><\/p>\n

    <\/strong>* Tyler Jones wrote a great article on the Right Way to Use jQuery With ServiceNow<\/a>\u00a0detailing the two commands above.\u00a0<\/em><\/p>\n

    Here is the UI Page code. Notice that instead of using $ or $j, we are creating our own context for our version of jQuery in the variable $j_custom to ensure we do not conflict with any version’s of jQuery that ServiceNow is using.\u00a0<\/strong><\/p>\n

    Also, the jQueryUI depends on a CSS style sheet. I am using the one from the Google APIs.<\/a><\/p>\n

    UI Page Name =\u00a0jqueryUIpage<\/strong><\/p>\n

    <?xml version=\"1.0\" encoding=\"utf-8\" ?>\r\n<g:include_script src=\"jQuery1_10_2.jsdbx\"\/>\r\n<g:include_script src=\"jQuery-ui-1_10_4_custom_min.jsdbx\"\/>\r\n<link href=\"\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.4\/themes\/smoothness\/jquery-ui.css\" rel=\"stylesheet\" \/>\r\n\r\n<script type=\"text\/javascript\"\/>\r\nvar $j_custom = jQuery.noConflict(true);\r\n  $j_custom(function() {\r\n    $j_custom(\"#accordion\").accordion();\r\n  });\r\n<\/script>\r\n\r\n<div id=\"accordion\">\r\n<h3>What is needed for this example?<\/h3>\r\n<div>\r\n<ul>\r\n   <li>ServiceNow - With an understanding of UI Pages, UI Macros, UI Scripts, and the Glide Dialog Window<\/li>\r\n<\/ul>\r\n<ul>\r\n  <li>jQuery<\/li>\r\n<\/ul>\r\n<ul>\r\n  <li>jQuery UI<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h3>Can I use it in ServiceNow?<\/h3>\r\n<div>\r\nAbsolutely! Make sure to use the jQuery noConflict(true) to ensure that this works.\r\n<\/div><\/pre>\n
    Step 3: Create the UI Macro<\/h2>\n
    The UI macro will allow an icon to be shown next to a field in ServiceNow. This is a great way of ensuring that an Incident form does not become cluttered with too many fields.<\/p>\n
      \n
    1. Upload an image to the images gallery that is 16×16 pixels. This example will use the icon triangle.jpgx \u00a0\"triangle\"<\/a><\/li>\n
    2. The UI Macro will launch a pop up window inside the webpage. More can be read about the GlideDialogWindow here<\/a>.<\/li>\n
    3. Create the UI Macro.
      \nName =\u00a0jqueryMacro<\/strong><\/strong><\/li>\n<\/ol>\n
      <!--?xml version=\"1.0\" encoding=\"utf-8\" ?-->\r\n<g:reference_decoration id=\"jqueryMacro\" field=\"${ref}\" onClick=\"invokejQuery('${ref}');\" title=\"Invoke Jquery Example\" image=\"triangle.jpgx\"\/>\r\n\r\n<script type=\"text\/javascript\">\r\nfunction invokejQuery(){\r\nvar box = new GlideDialogWindow('jqueryUIpage');\r\nbox.setTitle('jQuery');\r\nbox.setSize(400,400);\r\nbox.render();\r\n}\r\n<\/script><\/pre>\n