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. You will want to modify the source parameter in the url below depending on the entity you are trying to pull back as follows:
         1. Incidents - source=incident
         2. Cases - source=case
         3.  Tasks - source=casetask
         4. Accounts - source=account
          

      2. <?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&source=incident" style="border:1px solid #0A95E1"/>
         
         </td>
         
         </tr>
         
         </j:jelly>

          

      3. 
      4. 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. You will need to create a formatter for each System Macro that you want to create. (eg. 1 for incidents, 1 for cases, 1 for tasks)
      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. 
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. 
   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. 
   6. Click Save.
   7. You will then be redirected to the incident edit page where you can see Crushbank embedded within the page.
   8. 

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. 1. 
2. 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. 
   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. 

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] or Case[sn_customerservice] depending on where you intend to embed the UI Action.
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. You will want to modify the source parameter in the url below depending on the entity you are trying to pull back as follows:
      1. Incidents - source=incident
      2. Cases - source=case
      3.  Tasks - source=task
      4. Accounts - source=account

   2. 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&source=incident';
      
      g_modal.showFrame({
      
      url: url,
      
      title: 'Crushbank',
      
      size: 'lg',
      
      height: 400
      
      });
      
      }

       

   3. The integrationID above in the url will be provided to you and changes for each client.
7. 
8. 
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.