Configure Crushbank into ServiceNow

Explains how to embed CrushBank functionality into ServiceNow.

ServiceNow offers multiple ways to integrate CrushBank functionality within its portal depending on the functionality you are using within ServiceNow. Each section below will explain the steps based on how you are using service now.

Service Desk

Service Portal

Agent Workspace

Service Desk

  1. Create the UI Macro for the iFrame.
    1. In the navigator within ServiceNow, search for UI Macros. It will bring up System UI - UI Macros. Click on this link.
    2. Click the New button to create a new macro.
    3. Give the macro a name. (eg. Crushbank)
    4. In the xml section, provide the following:
      1. <?xml version = "1.0" encoding = "utf-8" ?>

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

        <tr>

        <td colspan="2">

        <iframe width="660px" height="500px" src="https://connectwise.crushbank.com/askme/search?op=pod&amp;ticketId=$[current.number]&amp;integrationId=3dcbca1a-d541-4e3e-9a5e-0982423c0b06" style="border:1px solid #0A95E1"/>

        </td>

        </tr>

        </j:jelly>

         

      2. Screen Shot 2021-05-07 at 9.26.35 AM
      3. Save your changes.
  2. Create the UI Formatter.
    1. In the navigator, search for Formatters. This will return System UI - Formatters. Click on this link.
    2. Click the New button to create a new formatter.
      1. Give the formatter a name. (eg. crushbank)
      2. In the Formatter field, put the name of the UI Macro you created in step 1 above followed by ".xml" - eg. Crushbank.xml
      3. For table, select Incident [incident]
      4. Save and close.
      5. Screen Shot 2021-05-07 at 9.31.14 AM
  3. Customize the form layout for incidents to include the UI Formatter you just created.
    1. In the navigator pane, search incidents. This will bring up Service Desk - Incidents. Click on the link.
    2. Click on the menu item at the top and select Configure - Form Layout
    3. Screen Shot 2021-05-07 at 9.51.37 AM
    4. Decide which section you want to embed the Crushbank UI Formatter. Move the Crushbank formatter you created in Step 2 into the available section.
    5. Screen Shot 2021-05-07 at 9.54.04 AM
    6. Click Save.
    7. You will then be redirected to the incident edit page where you can see Crushbank embedded within the page.

Service Portal

  1. In the Navigator Pane, search for Service Portal. Click the link that says Service Portal - Service Portal Configuration. This will open a new tab with options to configure your service portal.
  2. Click the option for Widget Editor
  3. Click the link to create a new widget.
  4. Provide a widget name and id and click Submit.
  5. Add the following code to each section.
    1. HTML Template
      1. <div>

        <iframe ng-src="" width="100%" height="500px" style="border:none;">

        </div>

         

    2. Client Script
      1. function($scope, $sce) {

            var c = this;

            $scope.target_url = $sce.trustAsResourceUrl(c.data.link);

        }

         

    3. Server Script
      1. (function() {

        var gr = new GlideRecord('incident');

        gr.get($sp.getParameter("sys_id"));

        data.link = "https://qa.crushbank.com/askme/search?op=pod&ticketId="+ gr.number + "&integrationId=3dcbca1a-d541-4e3e-9a5e-0982423c0b06";

        })();

         

    1. Screen Shot 2021-05-07 at 10.02.23 AM
  1. Add the widget to the Standard Ticket Configuration. This controls the page when you click on an incident from the Service Portal.
    1. In the Navigator for ServiceNow, search Standard Ticket Configuration and click this link.
    2. Click on incident.
    3. In the info region, check the Advanced check box. For the info widget, select the one you created above.
    4. Screen Shot 2021-05-07 at 10.08.38 AM
    5. Click save.
    6. In the navigator, search for Service Portal Home and click the link. This will open your service portal in a new tab.
    7. Click on one of the incidents and you will see CrushBank embedded within the incident.
    8. Screen Shot 2021-05-07 at 10.12.10 AM

 

 

Agent Workspace

  1. In the ServiceNow navigator, search for UI Actions and click on the link that called System UI - UI Actions.
  2. Click on the New button to create a new UI Action.
  3. Give it a name. eg. Crushbank.
  4. For table field, select Incident [incident].
  5. Make sure the following checkboxes are checked.
    1. Active
    2. Show update
    3. Client
    4. List v2 Compatible
  6. Scroll down to the workspace tab and add the following in the Workspace Client Script field.
    1. function onClick(g_form) {

      var url = 'https://connectwise.crushbank.com/askme/search?op=pod&ticketId=' + g_form.getValue('number') + '&integrationId=3dcbca1a-d541-4e3e-9a5e-0982423c0b06';

      g_modal.showFrame({

      url: url,

      title: 'Crushbank',

      size: 'lg',

      height: 400

      });

      }

       

    2. The integrationID above in the url will be provided to you and changes for each client.
  7. Screen Shot 2021-05-07 at 10.21.29 AM
  8. Screen Shot 2021-05-07 at 10.21.35 AM
  9. Click Save.
  10. In the navigator, search Agent Workspace and click on Workspace Experience - Agent Workspace Home
  11. Open one of the incidents and you will see a button with the same name you gave the UI Action you created. 
  12. Click on that button and a modal box will open up with the CrushBank embedded.
  13. Screen Shot 2021-05-07 at 10.24.25 AM