Author: Admin

1

Understanding User Types and Permissions on Customer Service Management (CSM) 5 (1)

Posted on by Admin

The article below is intended for any person who is getting started with CSM or wants to do user management.

A working Javascript and HTML is useful but not required.

Leave a comment whenever you feel is missing any relevant information in this article.

Introduction

Since I started to use Customer Service module this always has been a struggle, quite hard to find a proper answer nowadays about best practises and how user management should be set up. Said that, my goal on this article is to provide you full picture how CSM was originally designed and how to get the most of it. I will update this article as often as I can with all information I collected so far.

According to ServiceNow documentation, Customer Service Management application enables you to route cases to available customer service agents with the necessary skill sets. Agents can make use of response templates and search tools to search the knowledge base and community and provide timely, informative responses to customers.

Customer information includes the account and contact information for a customer or partner.

  • An account is a supported external customer and the Account form stores the customer’s information, including the company name, contact names, addresses, phone numbers, and web and email addresses. An account can be a customer account, a partner account, or both.
  • A contact is a user who is an employee of an account. A contact record stores information about a contact, such as the name, phone number, email and web address. An account can have multiple contacts but a contact can be associated with only one account. A contact can have one or more associated assets and service contracts. A contact can also have a user ID and can log in to the customer portal.

An account can have one or more associated assets, service contracts, entitlements, and SLAs. An account can also be associated with the following entities:

  • case
  • contact
  • service contract
  • entitlement
  • asset
  • A partner is a supported external customer that, in turn, sells to and supports one or more customers. A partner account record stores information about a partner’s company, similar to a customer account. On a partner account record, the Partner field is enabled. A partner can report and manage cases on behalf of customers. A partner can also be a customer.

 Ok, that’s what is described on the official documentation but what’s really happening in the background?

image

Understanding user classes

When you mark a table as extendable, you are also adding a second system field: Class [sys_class_name] — System Class Name. It contains the name of the table that the record represents. The sys_id field uniquely identifies a record. In the case of an extended table, the sys_id field is actually stored in two places: on both the parent and child tables. The platform joins both together whenever you query the child table and the field sys_class_name is added on the parent table. 

In other words,  sys_class_name is to extend sys_user table to “User”, “Contact” or “Consumer”. 
When a User record is saved with class User , we get the details from SYS_USER table.
When a User record is saved with class ‘Contact’, we get details from extended SYS_USER and CUSTOMER_CONTACT table. The customer_contact table have some related lists such “Tickets”, Locations”, Social Profiles”.

Since my client is a B2B, for the moment I will not cover the consumer scenario on this article.  

As far I am aware, all admin should have a “User” class assigned and all customers and agents should have “Contact” assigned. 

The Customer Service Management application provides the ability to establish different types of relationships between partners, customers, and contacts. These relationships make account and asset management easy and flexible. The following types of customer service relationships are available. (link here). This will help to create a relationship such “regions” to your parent accounts providing a kind of hierachy parent-child to a specific account.

Permissions

Security is the mother of all mothers and nowadays that’s a buzz word. An administrator usually does this kind of questions:

  • If I want to someone to use my application, what roles they need?
  • If I want to someone support the cases, what roles they really need?

Customer Service Management includes both internal and external user roles. Internal user roles are for agents and agent managers using the Customer Service Management application. External user roles are for customers and partners using the customer portal.

Here’s roles you need to set up to your Agents or Customers:

Use CaseRoles
AgentAn agent is an employee of the company.Class: Usersnc_internalsn_customer_service_agentsn_esm_agent
CustomerA customer is a user who is an employee of an account.Class: Contact snc_externalsn_customerservice.customersn_esm_user
AdminClass: Useradmin

Note: Thank you @Kavita for helping me sorting this out. I was banging my head against the table over the reason of existence of this class. The official documentation provided lists all the roles available OOTB and how they should be used. Only customers should be contacts. 

The following table provides all roles available OOTB and how they are set up. 

Use CaseRoles
Create Casessn_customerservice.customersn_customerservice_agent
Delete Cases
 admin
Add assets/rooms/addresses/contracts/accounts manuallyOfficial documentation https://docs.servicenow.com/bundle/london-customer-service-management/page/product/customer-service-management/task/set-up-customer-information.htmlsn_customerservice_manageror admin
Run/create reports
Official documentation (https://docs.servicenow.com/bundle/london-performance-analytics-and-reporting/page/use/reporting/concept/c_AdminsteringReports.html). 		 itil
Modify users/groups lists etc
Official documentation https://docs.servicenow.com/bundle/london-platform-administration/page/administer/roles/reference/r_BaseSystemRoles.html		 user_admin
Schedule Customer service agents and field service techniciansOfficial documentation https://docs.servicenow.com/bundle/london-customer-service-management/page/product/customer-service-management/concept/agent-calendar_1.html agent_schedule_admin

Remember that all examples I provide is for a B2B scenario and for that reason the consumer roles is not included or mentioned. Therefore they’ve a very similar behaviour to the customers.

If you would like to go further on custom csm user roles, take a look on the documentation https://docs.servicenow.com/bundle/london-customer-service-management/page/product/customer-service-management/concept/creating-custom-csm-user-roles.html

Relationships

The Customer Service Management application provides the ability to establish different types of relationships between partners, customers, and contacts. These relationships make account and asset management easy and flexible. The following types of customer service relationships are available. (link here). This will help to create a relationship such “regions” to your parent accounts providing a kind of hierachy parent-child to a specific account.

Conclusions

There’s a gap in the documentation explaning how this module should properly work.
I will try to cover the maxium I can in order to be easier in the future to set up a Customer Service Mgt scenario.

0

How to recreate a Glide List using last icons 0 (0)

Posted on by Admin

Hi,

Most recently I tried to use the glide list and apparently the “macro” available is using the old version. Gosh no.

In order to improve it, I have created the following UI macro.

Name: GlideList2

Description: This is an optimized Glide List   ready for bootstrap. It was based on old macro lightweight_glide_list and recent HTML code.

Code:

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

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

<g:evaluate var="jvar_current_user" expression="gs.getUserDisplayName()" />

<g:evaluate var="jvar_current_user_id" expression="gs.getUserID()" />

<!-- start bootstrap --> 

   <button data-original-title="Edit ${jvar_label}" id="${jvar_control_name}_unlock" data-target="#glide\.${jvar_control_name}" data-placement="auto" title="" data-auto-close="false" style="margin-right: 5px; display: inline-block;" data-type="glide_list_unlock" tabindex="0" class="btn btn-default btn-ref" data-ref="${jvar_control_name}">

   <span aria-hidden="true" class="icon icon-locked"></span>

   <span class="sr-only">Edit ${jvar_label}</span>

   </button>

   <!-- start mode edit -->

   <span id="${jvar_control_name}_edit" style="display: none;">

     <div class="glide-list">

     <select id="select_0${jvar_control_name}" style="direction:ltr; ;" name="select_0${jvar_control_name}" onchange="toggleGlideListIcons('${jvar_control_name}', false);" class="form-control" multiple="yes" size="6"></select>

     <div class="button-column">

     <j:if test="${jvar_can_add_me}">

     <button data-original-title="Add me" id="add_me.${jvar_control_name}" title="" data-user-id="${jvar_current_user_id}" style="display: inline-block;" data-type="glide_list_add_me" class="btn btn-default btn-ref" data-user="${jvar_current_user}" data-ref="${jvar_control_name}">

     <span aria-hidden="true" class="icon-user-add icon"></span><span class="sr-only">${jvar_label} Add me</span>

     </button>

     </j:if>

     

     <button data-original-title="Remove selected item" disabled="" id="remove.${jvar_control_name}" class="btn btn-default btn-ref" title="" style="display: inline-block;" data-type="glide_list_remove" data-ref="${jvar_control_name}">

     <span aria-hidden="true" class="icon icon-cross"></span>

     <span class="sr-only">Remove selected item</span>

     </button>

     <button data-original-title="View selected item" disabled="" id="view2link.${jvar_control_name}" title="" onmouseout="lockPopup(event)" name="view2.${jvar_control_name}" tabindex="-1" onclick="glideListViewSelection('${jvar_control_name}','deapr_glide','sys_user', 'false')" class="btn btn-default btn-ref" type="button" onmouseover="glideListPopupSelection(event, '${jvar_control_name}', 'sys_user')"><span aria-hidden="true" class="icon-view icon"></span>

     <span class="sr-only">View selected item</span>

     </button>

     

     <button data-original-title="Lookup using list" id="lookup.${jvar_control_name}" onclick="reflistOpen( '${jvar_control_name}','select_0${jvar_control_name}','${jvar_table}','null', 'false', ''); mousePositionSave(event); event.stop();" class="btn btn-default btn-ref" title="" name="lookup.{{ref}}">

   <span aria-hidden="true" class="icon icon-search"></span><span class="sr-only">Lookup using list</span>

   </button>

     <button data-original-title="Lock" id="${jvar_control_name}_lock" title="" style="align: left; padding-top: 3px; cursor: pointer; display: none" data-type="glide_list_lock" tabindex="0" class="btn btn-default btn-ref" type="button" data-ref="${jvar_control_name}">

     <span aria-hidden="true" class="icon icon-unlocked"></span><span class="sr-only">Lock"</span>

     </button>

     </div>

     </div>

   </span>

<!-- finish edit -->

<p data-original-title="${jvar_label}" id="${jvar_control_name}_nonedit" class="form-control-static" title="" style="direction:ltr; display: inline-block; "></p>

<input mandatory="false" id="${jvar_control_name}" value="" name="${jvar_control_name}" type="HIDDEN" />

<!--

<input value="" id="sys_original.${jvar_control_name}" name="sys_original.${jvar_control_name}" type="HIDDEN" />

 -->

<!-- finish bootstrap -->

<!-- End List -->

</j:jelly>

On your UI page, you just need to invoke it.

<!-- List -->	
<j:set var="jvar_label" value="Users" />

<j:set var="jvar_control_name" value="zListCollectorUsers" />

<j:set var="jvar_can_add_me" value="true" />

<j:set var="jvar_table" value="sys_user" />

<g:macro_invoke macro="GlideList2" />
0

Customise your UI Action Button or Navigation Bar of your forms 0 (0)

Posted on by Admin

This onLoad client script shows how to change the background color of form buttons in ServiceNow. For this example, I set up the script to change the color of the ‘Approve and ‘Reject’ buttons on the approval form to green and red respectively. The script itself is pretty straight-forward and can be used as a model for targeting other DOM elements using client-side JavaScript.

function onLoad() {
   //Change the color of the 'Approve' button to green
   changeButtonColor('approve', '#00CC00');
   //Change the color of the 'Reject' button to red
   changeButtonColor('reject', '#CC0000');
}

function changeButtonColor(buttonID, backgroundColor) {
   try{
      //Find the button(s) by ID and change the background color
      $$('button[id=' + buttonID + ']').each(function(elmt) {
         elmt.style.backgroundColor = backgroundColor;
         elmt.style.color = '#ffffff'; //make the button text white
      });
   }catch(e){}
}

If you want to take this step a little bit further, you can add icons to UI actions.
Fortunately, with the addition of a new icon set in recent ServiceNow releases, this has become pretty simple to do.

image

The following script can be used in any standard form client script. The key is the ‘transformButton’ function at the bottom. This could be included as a global UI script in your instance so that you don’t need to include it in every single client script. Once that’s in place (whether in a global UI script or in the client script itself) you can just call ‘transformButton’ with the appropriate parameters to change the button however you want. The parameters used are as follows…

  1. UI action name (Mandatory)
  2. Button background color (Optional)
  3. Button text color (Optional)
  4. Button icon name (Optional)
function onLoad() {
    //Change the color of the 'Approve' button to green
    transformButton('approve', '#77FF77', 'white', 'icon-success-circle');
    //Change the color of the 'Reject' button to red
    transformButton('reject', '#FF0022', 'white', 'icon-error-circle');
    //Change the color of the 'Info' button to blue
    transformButton('info_button', '#31708f', 'white', 'icon-info');
    //Change the color of the 'Warning' button to yellow
    transformButton('warning_button', '#f0ad4e', 'white', 'icon-warning-circle');
}

function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
    try{
        //Find the button(s) by ID and change the background color
        $$('button[id=' + buttonID + ']').each(function(elmt) {
            elmt.style.backgroundColor = buttonBackgroundColor;
            if(buttonTextColor){
                elmt.style.color = buttonTextColor;
            }
            if(buttonIconName){
                elmt.addClassName(buttonIconName);
                //Add some spacing between the icon and button label
                elmt.innerHTML = ' ' + elmt.innerHTML;
            }
        });
    }catch(e){}
}

This same idea can be applied to form header colors as well by getting the HTML element of the form. You’re probably aware that ServiceNow provides a global CSS property to set the form and list header color. The global property can be found by navigating to System Properties -> CSS, and changing the ‘Banner and list caption background-color property.

function onLoad() {
   //Change the color of all form section headers
   var backgroundColor = 'red';
   $$('.navbar').each(function(elmt) {
      elmt.style.backgroundColor = backgroundColor;
   });
}
 (All credits go to ServiceNowGuru for this awesome finding!)

[Updated 30/09/2019]

As you may notice, the UI action element names differ (top from bottom) and for this, you need to add them also – you can verify the names by getting the HTML element of the form. (tested in Madrid)

function onLoad() {

changeButtonColor('approve', 'limegreen', 'white'); //approve button header
changeButtonColor('reject', 'red', 'white'); //reject button header
changeButtonColor('approve_bottom', 'limegreen', 'white'); //approve button bottom
changeButtonColor('reject_bottom', 'red', 'white'); //reject button bottom
}

function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
    try{
        //Find the button(s) by ID and change the background color
        $$('button[id=' + buttonID + ']').each(function(elmt) {
            elmt.style.backgroundColor = buttonBackgroundColor;
            if(buttonTextColor){
                elmt.style.color = buttonTextColor;
            }
            if(buttonIconName){
                elmt.addClassName(buttonIconName);
                //Add some spacing between the icon and button label
                elmt.innerHTML = ' ' + elmt.innerHTML;
            }
        });
    }catch(e){}
}

You can now change the colour by picking a form style.

I hope this helps.