Hi all. I've been on the community for a while now and I've received a lot of assistance from everyone so I was hoping to return the favour with a guide for a project I just finished.
This project came about from requests from our users to be able to use the mobile interface while on a standard desktop/laptop computer. Though you can just go there straight from a link (<yourinstancename>/m$.do#) the process has a few issues, mainly that you can't go back to the regular ServiceNow view without clearing your browser cache or using a specific link.
This guide creates an icon on your ServiceNow banner next to the logout button that allow you to jump straight to the Smartphone interface. There's also script here to allow you to setup icons to the Tablet interface and, for those who prefer being able to see the Update Set in the banner, an icon for UI14 as well. The guide also covers setting up a system for switching back from the mobile interface as well as removing the old switch to mobile link, which this guide makes redundant.
How the icons show on our instance
This is especially useful for testing purposes, as it allows you to see the SmartPhone and Tablet interfaces without using a Tablet or Smartphone. You can also use it to add other features to the Banner bar.
Prep: The links involved.
I use four links here, which I believe I got from someone else in the Community but I now can't find the page. Each one allows you to switch the view to one of the other Interfaces. In each link, replace <yourinstancename> with your instance of ServiceNow (e.g. https://example.service-now.com/$m.do#)
Mobile view - <yourinstancename>/$m.do#
Tablet view - <yourinstancename>/$tablet.do#
Return to old Desktop view (UI14)— <yourinstancename>/navpage.do?sysparm_device=browser
Return to current desktop view (UI15)-<yourinstancename>/navpage.do?sysparm_device=doctype
If you mess up at any point, using the bottom one will return you to the current version of ServiceNow.
Step One: Upload the Tablet image icon
The icons shown above are recycled from other icons within ServiceNow, with the exception of the tablet icon, which it didn't appear to have one for. As such, I made the following icon in Photoshop
Tablet image upload
Category = General
Format = png
Name = Tablet.png (it'll rename itself Tablet.pngx, this is fine)
Step Two: UI Script 'Navigation view'
This script does most of the work, creating the icons to go along the top of the banner. To use all three icons, just copy and paste the script in full as a new UI Script.
UI Script — Navigation view
Name: Navigation view
Description: Navigation buttons for switching views
Active = true
Global = true
Script:
addLoadEvent(function(){
try{
if (g_user.hasRoles()){
$('nav_header_stripe_decorations').style.width ="800px";
//Switch to Mobile Icon
var mobileIcon = "<a href='$m.do#' class='btn btn-default homepage-button' id='snemobileIcon' style='margin-left: 5px; margin-right: 5px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span><img src='images/icons/cell_phone.gifx' title='Switch to Mobile view'></a>";
$('gsft_logout').insert({before:mobileIcon});
//Switch to Tablet Icon
var tabletIcon = "<a href='$tablet.do#' class='btn btn-default homepage-button' id='snetabletIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span style='margin-right: 4px;' title='Switch to Tablet view'></span><img src='Tablet.pngx' title='Switch to Tablet view'></a>"; //);
$('snemobileIcon').insert({before:tabletIcon});
//Switch to Old Desktop Icon - Will stay hidden on UI14
if ($('navpage_header_control_button')) {
var oldDesktopIcon = "<a href='navpage.do?sysparm_device=browser' class='btn btn-default homepage-button' id='sneoldDesktopIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span style='margin-right: 4px;' title='Switch to Old Desktop view'></span><img src='images/system.gif' title='Switch to Old Desktop view'></a>"; //);
$('snetabletIcon').insert({before:oldDesktopIcon});
}
//Switch to New Desktop Icon - will stay hidden on UI15
if (!$('navpage_header_control_button')) {
var DesktopIcon = "<a href='navpage.do?sysparm_device=doctype' class='btn btn-default homepage-button' id='sneDesktopIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span style='margin-right: 4px;'></span><img src='images/cics.gif' title='Switch to Desktop view'></a>"; //);
$('snetabletIcon').insert({before:DesktopIcon});
}
}
}catch(e){}
});
If you just want to use the mobile icon, use the following script:
addLoadEvent(function(){
try{
if (g_user.hasRoles()){
$('nav_header_stripe_decorations').style.width ="800px";
//Switch to Mobile Icon
var mobileIcon = "<a href='$m.do#' class='btn btn-default homepage-button' id='snemobileIcon' style='margin-left: 5px; margin-right: 5px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span class='icon-collaboration pull-left' style='margin-right: 4px;'></span><img src='images/icons/cell_phone.gifx' title='Switch to Mobile view'></a>";
$('gsft_logout').insert({before:mobileIcon});
}
}catch(e){}
});
And if you would like to make own icons, here's a template. Any additions should be added before the last three lines of code (the ones each beginning with three curly braces).
//Template Icon
var TEMPLATEIcon = "<a target='gsft_main' href='WEBLINK' class='btn btn-default homepage-button' id='sneTEMPLATEIcon' style='margin-left: 5px; margin-right: 0px; padding: 4px 4px 4px 4px; color:white;border-color: white;'><span style='margin-right: 4px;'></span>><img src='images/IMAGE.PNG' title='Switch to TEMPLATE view'></a>"; //);
$('snePREVIOUSIcon').insert({before: TEMPLATEIcon});
WEBLINK should be set as the tail end of your ServiceNow instance weblink (e.g. for <instancename>.service-now.com/$m.do#, change it to just '$m.do#'
TEMPLATE should be set as the name of your icon e.g. 'mobile'
PREVIOUS should be set as the ID of the previous icon. See above examples to get an idea of this.
IMAGE should be the name of your icon's image. You can recycle image icons by following the instructions at http://wiki.servicenow.com/index.php?title=Module_Icons#Modifying_Module_Icons or just upload a new image from scratch (see Step One)
One thing to note here. I originally wanted this script to work as a drop down menu on the banner, similar to how the Settings cog work, but I couldn't figure out how to do it. If anyone knows, please drop me a message.
Step Three: Mobile interface 'Switch to Desktop' option
Annoyingly, the mobile interface doesn't currently have a way to create a button or link that serves as a 'Switch to Desktop' option in the same that the Tablet interface does. As such, we have to create a workaround that uses a Service Catalog entry and Mobile Application menu.
You'll need to create the Service Catalog entry first (Service Catalog > Maintain Items > New)
Catalog Item — Switch to Desktop
Name — Switch to Desktop <-Keep it as this, or it'll mess up the script later
Availability = Mobile Only
Catalogs = Service Catalog
Category = For this to work, you'll need to set a category. You can use any of your current ones, as it will only show up on the mobile version
Short Description - Switch to Desktop
Description - Click here to switch to Desktop view.
For the Description, set the above text as a link that leads to '/navpage.do?sysparm_device=doctype' and set the Target as 'none'.
Save the new item. At this point you'll need to grab the SysID for the item. Right click the top bar and select 'Copy sys_id'. Make a note of this for later.
Next go to Service Catalog > Maintain Categories and go into the Category that you set for the item above. Grab the SysID in the same way and make a note of this.
Next, go to System Mobile UI > Navigator Apps > New and create a new Application Menu using the details below.
Application Menu (Navigator Apps) — Switch back to Desktop
Name - Switch back to desktop
Order — 10,000 (ensures it stays at the bottom)
Active = true
Save this and create a new Mobile Module for it.
Module — Switch to Desktop
Name - Switch to Desktop
Order — 10
Application Menu - Switch back to desktop
Table — None
Path — This is where it gets tricky. You need to combine the sysIDs you make a note of earlier in the following format:
catalog_item/item/CATEGORYSYSID/Switch%252520to%252520Desktop/CATALOGITEMSYSID//CATEGORYSYSID/Switch%252520to%252520Desktop
Replace CATEGORYSYSID with the SysID you got from your Category.
Replace CATALOGITEMSYSID with the SysID you got from your newly created Catalog Item.
It should end up looking similar to the example below:
catalog_item/item/d252320ec611227a011e082eb439e5f6/Switch%252520to%252520desktop/7eb7bc5b3710820025758d2754990e46//d252320ec611227a011e082eb439e5f6/Switch%252520to%252520Desktop
(Before anyone asks, yes, you have to do the Category SysID twice, those slashes in the middle twice, the %252520 between every word and yes, if you can find a cleaner way to do this, please let me know)
If this goes through successfully, you'll have a link at the bottom of the Mobile Interface Menu that will allow users to switch back to the Desktop mode.
Step Four: Disable 'mobile_version_switch' macro.
Before the ability to switch between mobile and desktop was taken away, a mobile icon would appear next to the user's name when you switched back to the desktop version of ServiceNow. This feature is still there, so you'll end up with two mobile icons in the banner bar. They essentially do the same thing, but it's not needed, so it can be disabled.
Two mobile icons
Go to System UI > Ui Macros and find 'mobile_version_switch'. You then just need to deactivate it. Untick the 'Active' button and save it.
And that's everything. This should give you the icons for switching between interfaces and the ability to switch between the mobile and the interface.
Hope someone finds it helpful.
