Linking a UI Page to be accessible on a Mobile Device

[ben_hollifield]

I've recently come into contact with a number of customers having the same conundrum:

"I just updated to Dublin, and I love the new mobile UI. However, I'm unable to link to so-and-so UI page within the mobile UI. My users need so-and-so UI page on their phone - help!"

                                   

Starting with the Dublin release, the ability to display certain types of content (namely, UI Pages) on the mobile interface was restricted. It was done so with good intentions - some content is unsuited to consumption on a small screen! However, that also came at the cost of restricting use of certain pages that may be necessary for the mobile user.

I worked with ServiceNow development to find a solution that should allow you to add working mobile modules for any ServiceNow page that is accessible directly via a URL. Things like:

• UI Pages - [instance_name]/ui_page_name.do
• Map Pages - [instance_name]/map_page.do?sysparm_name=Map%20Page%20Name%20Here
• CMS Pages - [instance_name]/ess/page_url_suffix.do
• Surveys - [instance_name]/survey_take.do/sysparm_survey=Survey%20Name%20Here

Get the picture? There are lots of pages in ServiceNow that are navigable directly via URL! Following the instructions below should allow you to add modules for any of these within the mobile interface. However, please be cognizant of user experience when adding such pages to the mobile interface. These pages will be displayed with the original formatting of the page - in other words, there will be no special 'mobile' formatting unless you have built that into the page itself. Also, be sure to test before releasing to your users - some pages behave differently when placed within the frame of the mobile app. With that disclaimer aside, here's the step-by-step process to add a new mobile UI page module...

1. For this example, we'll create a mobile module linking to the UI Page accessible at https://myinstance.service-now.com/my_ui_page.do. First, create a new UI Macro by navigating to System UI > UI Macros in the left nav and clicking New.
   
   
2. Copy the following code into your UI Macro. Notice the reference to the relative URL of the UI Page, 'my_ui_page.do'.
   

   <?xml version="1.0" encoding="utf-8"?>
   <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide">
   <iframe src="my_ui_page.do" style="width: 100%; height: 100%;"/>
   </j:jelly
   
   
   
   
   
   
   
   

3. Save the UI Macro with a name you'll remember - we'll use my_ui_page_mobile.
   
4. Navigate to System Mobile UI > Navigator Apps in the left nav, and open the mobile application menu where you'd like to list this new module (create a new mobile application menu, if necessary). On the mobile application record, navigate to the Modules related list at bottom. Click New.
   
   
   
5. Configure your new mobile module as follows. Be sure to set the Name, Order, Roles, and Path as appropriate for your needs. Notice that the path references the UI Macro that we created in an earlier step.
   
   
   
6. Your new module should now appear in the mobile interface, and the link should correctly direct you to the page you defined!
   

Alternatively, you can download the Mobile Module Creator application on ServiceNow Share. This application adds a link titled New Mobile Module at the bottom of each desktop module record of type New, List, or URL (from Arguments). Click that link, and your mobile module (and the necessary UI Macro) will be automatically generated. That application is available here:

Mobile Module Creator on Share