ServiceNow is a cloud platform that runs inside your browser window. Within your browser, the ServiceNow interface is broken up into frames. Frames, in web parlance, are just separately divided sections of a page. This section will show you what the different frames are, what they generally contain, and the major UI elements within them.

In ServiceNow, there are two main frames: the ServiceNow frame, and the content frame. Both have different controls and display different information.

The ServiceNow frame consists of many UI elements spanning across both the top, and left side of the ServiceNow window in your browser:

Technically, the ServiceNow frame can be further broken up into two frames: The banner frame along the top edge of the interface, and the Application Navigator along the left side.

The banner frame runs along the top of every page in ServiceNow, save for a few exceptions. It's got room for some branding and a logo, but the more functional components for administrators and developers is on the right. There, you'll find:

• System settings cog
• Help and documentation button
• Conversations panel button
• Instance search button
• Profile/session dropdown

In your developer instance, on the far-top-right, you will see a sort of cog or sprocket. This is generally recognized as a universal Settings menu icon. Clicking on that icon reveals the System Settings menu:

This menu is broken down into several sections:

• General
• Theme
• Lists
• Forms
• Notifications
• Developer (Admins only)

The settings in this menu generally apply only to the current user who's signed in, so you can freely toggle and modify these settings without worrying about breaking anything.

In the General tab (as seen in the preceding figure) of the System Settings UI, you'll find toggles to control accessibility options, compact the user interface, select how date/time fields are shown, select your time-zone, and even an option to display a printer-friendly version of the page you're on. In Geneva (the prior version of ServiceNow, with Helsinki being the version primarily used for the examples in this book), you'll also see an option to Wrap Longer Text in List Columns and Compact list date/time:

On the Theme tab in the preceding figure, you'll find several pre-made ServiceNow themes with names like System and Blues. One of the first things that a company often does when deploying ServiceNow, is to create a custom-branded theme. We'll go over how to do that in a later section, and you'll be able to see your custom themes there:

The Lists tab (not available in Geneva) contains the option to wrap longer text in list columns (which was under the General tab in Geneva), as well as options to enable striped table rows (which alternates rows in a table between contrasting shades of gray, making it easier to follow with the eye from left to right) and modern cell styles. All options in the Lists tab except Wrap longer text in list columns require the List V3 plugin to be enabled before they'll show up, as they only apply to List V3.

The Forms tab contains settings to enable tabbed forms, as well as to control how and when related lists load.

Related lists are lists (like tables in a spreadsheet) of related records that appear at the bottom of forms. Forms are where key data about an individual record are displayed:

The Notifications tab (not available in Geneva) allows you to choose whether to get notifications on your mobile device, desktop toast notifications, e-mail notifications, or audio notifications:

Finally, the Developer tab (only available to users with the admin role) is where you can find settings relating to application and update set based development. By default, your selected update set should say Default [Global], which means that any configuration changes you make in the instance will not be captured in a portable update set that you can move between instances. We'll go into detail about what these things mean later on. For now, follow along with the following steps in your developer instance using your Administrator account, as we create a new update set to contain any configuration changes we'll be making in this chapter:

1. If you don't already have the System Settings menu open, click on the System Settings gear in the top-right of the ServiceNow interface.
2. If you haven't already done so, click on the Developer tab on the bottom-left.
3. Next, navigate to the Local Update Sets table:
   
   • In the main section of the System Settings dialog, you should see the third row down labeled Update Sets. To the right of that should be a drop-down with Default [Global] selected, followed by three buttons.

The first button () is called a Reference icon. Clicking it will take you to the currently selected update set (in this case, Default). The second button () will take you to the list view, showing you all of the Local Update Sets. The third button will refresh the currently selected update set, in case you've changed update sets in another window or tab.

• • Click on the second button, to navigate to the Local Update Sets list view.

4. Click on the blue New button at the top-left of the page to go to the new update set form.
5. Give this update set a name. Let's enter Chapter 1 into the Name field.
6. Fill out the Description by writing in something like Learning about the ServiceNow interface!
7. Leave State and Release date to their default values.
8. Click Submit and Make Current.

Now that we've created an update set, any configuration changes we make will be captured and stored in a nice little package that we can back out or move into another instance to deploy the same changes. Now let's just confirm that we've got the right update set selected:

1. Once again, click on the System Settings gear at the top-right of the ServiceNow window, and open the Developer tab.
2. If the selected update set still shows as Default, click the Refresh button (the third icon to the right of the selected update set).
3. If the update set still shows as Default, just select your new Chapter 1 update set from the Update Set drop-down list.

Next on the right side of the banner frame, is the Help icon. Clicking on this icon opens up the Help panel on the right side of the page:

The Help menu has three sections: What's New, User Guide, and Search Documentation. Or, if you're in Geneva, it shows only What's New and Search Product Documentation.

Clicking What's New just brings up the introduction to your instance version, with a couple of examples of the more prominent new features over the previous version.

The User Guide will redirect you to an internal mini-guide with some useful pocket-reference type of info in Helsinki. It's very slim on the details though, so you might be better off searching the developer site (http://developer.servicenow.com) or documentation (http://docs.servicenow.com) if you have any specific questions.

Speaking of the documentation site, Search Documentation is essentially a link directly there! Clicking this link from a form or list will automatically populate a query relating to the type of record(s) you were viewing.

Moving further left in the banner frame, you'll find the Conversations button. This opens the connect side-bar, showing an (initially blank) list of the conversations you've recently been a part of. You can enter text in the filter box to filter the conversation list by participant name. Unfortunately, it doesn't allow you to filter/search by message contents at this point. You can also click the plus icon to initiate a new conversation with a user of your choice.

The next link to the right in the banner frame is probably the most useful one of all - the Global Text Search. The Global Text Search box allows you to enter a term, ticket number, or keyword and search a configurable multitude of tables.

As an example of this functionality, let's search for a user that should be present in the demo data that came with your developer instance:

1. Click on the Search icon (the one that looks like a magnifying glass). It should expand to the left, displaying a search keyword input box.
2. In that input box, type in abel tuter. This is the name of one of the demo users that comes with your developer instance:

3. Press Enter, and you should see the relevant search results divided into sections.

The search results from the Global Text Search are divided into search groups. The default groups are Tasks, Live Feed, Policy, and People & Places. To the right of each search group is a list of the tables that the search is run against for that group.

The Policy search group, for example, contains several script types, including BusinessRules, UIActions, Client Scripts, and UI Policies.

The last item on our list of banner-frame elements, is the Profile link. This will show your photo/icon (if you've uploaded one), and your name. As indicated by the small down-facing arrow to the right of your name (or System Administrator), clicking on this will show a little drop-down menu. This menu consists of up to four main components:

• Profile
• Impersonate User
• Elevate Roles
• Logout

The Profile link in the drop-down will take you directly to the Self Service view of your profile. This is generally not what Administrators want, but it's a quick way for users to view their profile information.

Impersonate User is a highly useful tool for administrators and developers, allowing them to view the instance as though they were another user, including that user's security permissions, and viewing the behavior of UI policies and scripts when that user is logged in.

Elevate Roles is an option only available when the High Security plugin is enabled (which may or may not be turned on by default in your organization). Clicking this option opens a dialog that allows you to check a box, and re-initialize your session with a special security role called security_admin (assuming you have this role in your instance). With high security settings enabled, the security_admin role allows you to perform certain actions, such as modifying ACLs (Access Control Lists - security rules), and running background scripts (scripts you can write and execute directly on the server).

Finally, the Logout link does just what you'd expect: logs you out.

The Application Navigator is one of the UI components with which you will become most familiar, as you work in ServiceNow. Nearly everything you do will begin either by searching in the Global Text Search box, or by filtering the Application Navigator.

The contents of the Application Navigator consist of Modules nested underneath Application Menus. The first application menu in the Application Navigator is Self-Service. This application menu is generally what's available to a user who doesn't have any special roles or permissions. Underneath this application menu, you'll see various modules such as Homepage, Service Catalog, Knowledge, and so on:

When you hear the term Application as it relates to ServiceNow, you might think of an application on your smartphone. Applications in ServiceNow and applications on your smartphone both generally consist of packaged functionality, presented in a coherent way. However in ServiceNow, there are some differences. For example, an Application Header might consist only of links to other areas in ServiceNow, and contain no new functionality of its own. An application might not even necessarily have an application header.

Generally, we refer to the major ITIL processes in ServiceNow as Applications (Incident, Change, Problem, Knowledge, and so on) -- but these can often consist of various components linked up with one another; so the functionality within an application need not necessarily be packaged in a way that it's closed off from the rest of the system.

The filter text box in the Application Navigator allows you to enter a string to - you guessed it -- filter the Application Navigator list with!

It isn't strictly a search, it's just filtering the list of items in the Application Navigator, which means that the term you enter must appear somewhere in the name of either an Application Menu, or a Module. So if you enter the term Incident, you'll see modules with names like Incidents and Watched Incidents, as well as every module inside the Incident application menu. However, if you enter Create Incident, you won't get any results. This is because the module for creating a new Incident, is called Create New, inside the Incident module, and the term Create Incident doesn't appear in that title.

In addition to filtering the Application Navigator, the filter text box has some hidden shortcuts that ServiceNow wizards use to fly around the interface with the speed of a ninja. Here are a few pro tips for you:

• Once you've entered a term into the filter text box in the Application Navigator, the first module result is automatically selected. You can navigate to it by pressing Enter.
• Enter a table name followed by .list and then press Enter to navigate directly to the default list view for that table. For example, entering sc_req_item.list [Enter] will direct you to the list view for the sc_req_item (Requested Item) table.

• Enter a table name followed by either .form, or .do (and then pressing Enter) will take you directly to the default view of that table's form (allowing you to quickly create a new record). For example, entering sc_request.form [Enter] will take you to the New Record intake form for the sc_request (Request) table.
• Each table has a corresponding form, with certain fields displayed by default.
• Use either .FORM or .LIST in caps, to navigate to the list or form view in a new tab or window!
• Opening a list or form in a new tab (either using this method, by middle-clicking a link, or otherwise) breaks it out of the ServiceNow frame, showing only the Content frame. More on that later in this chapter.

Try it yourself: Type sys_user.list into the Application Navigator filter text field in your developer instance, and press Enter. You should see the list of all the demo users in your instance!

Users can add favorites within the Application Navigator by clicking the star icon, visible on the right when hovering over any application menu or module in the Application Navigator. Adding a favorite will make it come up first when filtering the Application Navigator using any term that it matches. It'll also show up under your favorites list, which you can see by clicking the tab at the top of the Application Navigator, below the filter text box, with the same star icon you see when adding a module to your favorites.

Let's try out Favorites now by adding some favorites that an admin or developer is likely to want to come back to on frequent occasion.

Add the following modules to your favorites list by filtering the Application Navigator by the module name, hovering over the module, and clicking the star icon on the right:

• Workflow | Workflow Editor
• System Definition | Script Includes
• System Definition | Dictionary
• System Update Sets | Local Update Sets
• System Logs | System Log | All

Now that we've got a few favorites, let's rename them so they're easier to identify at a glance. While we're at it, we'll give them some new icons as well:

1. Click the Favorites tab in the Application Navigator, and you should see your newly added favorites in the list.
2. At the bottom-right of the Application Navigator in the ServiceNow frame, click on Edit Favorites.

3. Click on the favorite item called Workflow - WorkflowEditor. This will select it so you can edit it in the content frame on the right:

4. In the Name field, give it something simpler, such as Workflow Editor. Then choose a color and an icon. I chose white, and the icon that looks like a flowchart. I also removed my default Home favorite, but you don't have to.

Here is what my favorites look like after I made my modifications:

Another way to add something to your favorites is to drag it there. Certain specific elements in the ServiceNow UI can be dragged directly into your Favorites tab. Let's give it a try!

1. Head over to the Incident table by using the .list trick.
2. In your developer instance, enter incident.list into the filter text box in the Application Navigator; then press Enter.
3. Click on the Filter icon at the top-left of the Incident list, and filter the Incident list using the condition builder. Add some conditions so that it only displays records where Active is true, and Assigned to is empty. Then click on Run:

4. The list should now be filtered, after you hit Run. You should see just a few incidents in the list. Now, at the top-left of the Incident table, to the left of the Incidents table label, click on the hamburger menu (yeah, that's really what it's called). It looks like three horizontal bars atop one another. In that menu, click on Create Favorite.
5. Choose a good name, like Unassigned Incidents, and an appropriate icon and color. Then click Done. You should now have an Unassigned Incidents favorite listed!

Finally, if you click on the little white left-facing arrow at the bottom-left of the Application Navigator, you'll notice that whichever navigator tab you have selected, your favorites show up in a stacked list on the left. This gives you a bit more screen real-estate for the content frame.

Starting in Geneva and later, ServiceNow began storing your history in an easily accessible tab to the right of the Favorites tab in the Application Navigator. This allows you to see the pages, records, and lists you've visited during your session, and click on any of them to get back to a previous page.

There are a few particular application menus and modules that developers and administrators should be aware of, as they're home to some of the more useful tools and parts of ServiceNow. You've already seen a few of them, and have added them to your favorites list! Here, I'll go through a few of the more useful modules and what they're for:

• System Definition: Home to a great many useful modules, and contains definition information for various components of ServiceNow such as scripts and dictionary records.
• Catalog Definitions: Under Service Catalog | Catalog Definitions, Maintain Items allows you to see and modify catalog items, including related lists for their variables, categories, and other related records. Similarly, you can maintain categories, catalog shopping cart layouts, and even different service catalogs from this sub-menu.
• System Applications: Using the Studio link in the System Applications menu takes you to the Application Development Studio interface, where you can build powerful scoped applications to create or enhance the functionality of your instance.
• System Clone: In this application menu, you can create a clone target (such as adding your company's development and/or UAT instance(s) as clone targets for their production instance) and initiate a clone from one instance, over another. This is an important bit of housekeeping, since the more development work is done in an instance, the further it tends to drift from the state of the production instance, and thus the more likely any future development that's done in them is likely to have issues when pushed to production. To keep instances in sync, it's usually a good idea to clone regularly.
• Session Debug: Under System Diagnostics | Session Debug, you'll find all kinds of helpful debugging options. We'll go into detail on debugging in another chapter, but suffice it to say that Session Debug is a very useful section. Just remember to disable debugging when you're finished, as debugging usually impacts performance for at least your session!
• System Logs: The System Logs application menu contains many helpful modules, such as System Logs | SystemLog | All, which can assist in troubleshooting and debugging. Any server-side Java/JavaScript errors are generally logged to the system log.
• System Properties: The System Properties application menu contains links to properties pages for various aspects of the UI, system configuration, service catalog, and more. Properties are just system values stored in a table which can be modified to change certain behaviors. For example, the glide.ui.ui15_switch_roles property controls whether users can choose to manually switch between UI15 and UI16 using a button in the System Preferences window, based on roles (assuming the UI16 plugin is activated on Geneva and later).

The Content frame is where you'll find the lists, forms, pages, and other contents. When left-clicking on a module in the Application Navigator (with a few exceptions such as the Workflow Editor), the resulting page, list, or form will load in the Content frame:

The content frame is displayed inside the ServiceNow frame (under the banner, and to the right of the Application Navigator). However, you can actually break the content frame out from the ServiceNow frame by opening a link in a new tab or window.

Whether it's a link inside the content frame itself, or a module in the application navigator, opening the link in a new tab or window (whether from the right-click menu, by middle-clicking, or by Ctrl-clicking the link) will open the link in just the content frame.

Without the content frame, the URL will look something like this:

https://your_company.service-now.com/incident_list.do

With the content frame, the URL will look like this:

https://your_company.service-now.com/nav_to.do?uri=incident_list.do

Adding nav_to.do?uri= before the rest of the URL after the forward-slash following the domain name (service-now.com) essentially navigates to the ServiceNow frame (located at nav_to.do), and passes a URL parameter (the bit after the question mark) named uri with a value of whatever text happens to follow the equals sign.

So if you middle-click or otherwise open a link in a new tab, you'll be directed to the URL sans nav_to.do?uri=, but you can easily add this back into the URL. However, there's a small catch here. Only the first URL parameter uses the question mark. Any subsequent parameters use an ampersand.

If you find yourself opening new tabs very often, yet needing to pop them back into the ServiceNow frame (as I very often do!), you create a browser bookmarklet to do just that using a little bit of JavaScript. You'll have to take my word on this for now, but putting this in as the URL for a bookmark, and then tapping the bookmark when you want to drop the page you're on into a ServiceNow frame, will do the trick:

Javascript: (function(){var a=window.location.href;if(0<=a.indexOf("navpage.do")||0<=a.indexOf("nav_to.do")||0<=a.indexOf("workflow_ide.do"))alert("Looks like you're already inside a frame!");else if(0<=a.indexOf("service-now.com/")){var b=a.indexOf("://"),b=a.indexOf("/",b+3)+1,c=a.slice(0,b),a=a.slice(b);window.location.href=c+"nav_to.do?uri="+a}else alert("That only works on ServiceNow pages.")})(); 

If you're curious, here's the de-minified version of that code:

javascript: (function () 
{ 
  var a = window.location.href; 
  if (0 <= a.indexOf("navpage.do") || 0 <= a.indexOf("nav_to.do") || 0 <= a.indexOf("workflow_ide.do")) alert("Looks like you're already inside a frame!"); 
  else if (0 <= a.indexOf("service-now.com/")) { 
    var b = a.indexOf("://"), 
      b = a.indexOf("/", b + 3) + 1, 
      c = a.slice(0, b), 
      a = a.slice(b); 
    window.location.href = c + "nav_to.do?uri=" + a 
  } 
  else alert("That only works on ServiceNow pages."); 
})(); 

When navigating the ServiceNow UI, it's important to understand the difference between configuration, and personalization. These are defined terms within ServiceNow. As a general rule, in UI16 and later, configuration results in changes for everyone, whereas personalization results in changes just for you.

Most configuration modifies global system settings, configuration records, and properties (properties can be found in the sys_properties table), whereas most personalization results in modified or generated preferences (user preferences can be found in the sys_user_preference table). You can create Global default preferences by creating a preference record in the sys_user_preference table that isn't assigned to any particular user, but these default preferences can be overridden on a user-by-user basis, if users modify their preferences manually. It would be possible to create a data policy or business rule (discussed in a later chapter) to prevent users from customizing certain preferences, but this may lead to a bad user experience.

Some examples of personalization are:

• Changing the columns that are displayed when viewing a given list, using Personalize List Columns from the hamburger menu at the top-left of lists:

• Or by clicking the gear menu at the top-left of the list view in Geneva and earlier
• Adjusting your theme, list/form view preferences, or anything else from the System Settings gear menu at the top-right of the ServiceNow frame, in the banner.
• Adding or removing fields on a form using the Personalize Form button (which looks like three stacked slider-toggles) at the top-right of a form.

Some examples of configuration on the other hand, are:

• Changing the columns that are displayed when viewing a given list, using List Layout from the hamburger menu at the top-left of the list view (or by right-clicking the List header, and navigating to Configure | List Layout).
• Modifying the system themes from the System UI | Themes module in the Application Navigator.
• Adding/removing fields or moving fields around on a form, using the Form Designer (Configure | Form Design), or from Configure | Form Layout.

Take care not to make configuration changes when you mean to make personalization changes. Having the admin role can be a burden in this way. Some even avoid this by having entirely separate admin-only accounts that they must log into separately, so they can't make configuration changes by accident.

In this chapter, we learned about how content is organized on the screen, within frames - the banner frame, Application Navigator, and content frame. We also learned how to use the global text search functionality, to find the records we're looking for, what it means to elevate roles or impersonate a user, and how to get around the Application Navigator, including some pro tips on getting around like a power user from the filter text box.

In the next chapter, we're going to discuss what are probably the two most important UI components: lists and forms. You'll learn how to customize and personalize your instance's lists and forms, and get hands-on experience doing just that!