AppCompass User Guide

Welcome to our Quick User Guide

AppCompass, simply a wizard.

AppCompass is an OnPage step by step guidance wizard that allows users to quickly get to grips with the ServiceNow interface.

AppCompass relies on two tables. The “Steps” table, containing the steps and the “Scenario” table which contains all of the scenarios.

A Scenario contains one or many steps in order of execution for the wizard to show OnPage.


INDEX

Install

Features

Application Navigator

Creating Scenarios and Steps

Launching Scenarios

Scripts and Options


Install

Our application is as easy as any other in the ServiceNow store, just simply activate it in the plugin menu bar once installed.

Features
  • Works on the Customer Service Portal as well as on back office modules
  • Create as many demo scenarios as you need (Welcome screen, Incident Management, HR, your customised application, etc.)
  • Interact with ServiceNow by triggering change of screens
  • Prevent Interaction with the screen during a scenario so that users follow the wizard.
  • Can be used anywhere on your ServiceNow instance
  • Only requires basic CSS knowledge to anchor tooltips
  • Supports multiple languages
  • Autolaunch functionality for ServiceNow first time connection
  • No more need for paper and video tutorials
  • Based on practise and practicality
  • Adapted to the user’s profile and learning speed
Application Navigator

To see the Appcompass module, type “Appcompass” into the Application Navigator search bar on your ServiceNow instance.

Appcompass>Scenarios

Here you can create a new scenario or just review a list of all of the scenarios on your instance as shown in the image below.

If you click on a scenario you will be taken to a new page where you have all of its parameters and a list of the steps belonging to it.

Appcompass>steps

Here is a list of all of the steps on your instance.

Appcompass>history

Here you see history about the scenarios that have bee launched.

Creating Scenarios and Steps
Creating Scenarios

Creating scenarios is a simple task, everything is set up to make this as simple as possible so that any User would be able to do it. You can even create a scenario for this very task.

First of all, by way of best practice, we advise you to create the scenario and get all of the steps figured out and commented on an excel/word document before you start. This will allow you to be as efficient and effective as possible and you would have less chance of having to edit and change the scenario after it has gone live due to the fact of it not being clear enough for the users.

After you have your new Scenario all planned out with each step and piece of data (links, images, videos, comments, etc…) you can start creating it in ServiceNow.

Use the Application Navigator and go to “AppCompass>Scenarios”, click on the “New” button.

You will now have an interface like the one below with numerous parameters, but don’t worry, it is very simple and well explained.

Select a name, Description, Active, First Connexion, Requires Roles, and Scripts (This part will be seen in the “Using Scripts” section of the User Guide for more complicated Scenarios.

After filling in the Scenario creation form to your needs, click the “Submit” button so you can start creating the steps.

Creating STEPS

To Create a Step, open the scenario you have just created. You can also modify an existing one on any other Scenario.

Scroll down to the Steps list as shown below.

To modify, just find and click on the step needed. If not Click the “New” button to create a new one.

You should now have the below form showing on screen.

The Form is separated into a few sections.

In the first section you will have the following parameters:

  • Name: Enter a name for your Step
  • Type: would you like a tooltip anchored to a selected element of the page or would you like a slide.
  • Scenario: This parameter allows you to choose which Scenario the Step belongs too. By default it should be the Scenario you just created.
  • Order: The order of the Step in the scenario (Set to ServiceNow norms, smallest number to highest, leave enough space between numbers as to allow for modifications in the future.)
  • Advanced: This Parameter is for when you would like to execute a script before or after the step for the previous, next and exit buttons on the Step. (Please see the Script section of the UserGuide for details.

In the second section of the form you insert the content and message, there is an integrated text to HTML formatter with numerous options like adding images, links and videos as well as text decoration.

The ToolTip Section is unique to the ToolTip type. Its parameters are:

  • Position: Choose the position of the tooltip relative to the anchor. For example, if you have anchored the tooltip to an element on the left edge of the screen then you need to position it to the right so that the tooltip does not get cut.
  • Prevent Interaction: Prevents the user from clicking anywhere else other than on the tooltip.
  • Frame:?
  • Css Selector: Here you will pick the element (button, text, image, etc…) you want to anchor the tooltip to using its CSS Selector, for this you need to follow these steps:
    1. Select the element with your mouse
    2. Right click and “Inspect Element”
    3. If you were not able to select the necessary element, click on the “Pick an element from the page” button on the top-left of the “Inspect Element tab and hover over it.
    4. Once the Html tag is highlighted, right click and copy>CSS Selector.
  • Optional: If you ticked the “Advanced” parameter in the first section of the form you will see an additional section with the “Prerequisites” and “After” script input boxes. For this, please refer to the script section of the User Guide.
  • Click the “submit” button

Repeat this action until the steps in your scenario are all created.

Launching Scenarios

Once the Scenario is created you can anchor it to an element to launch it or just set it to automatically launch after the first connexion.

For this, you need to Create a new Module named after the scenario and link them together.

On the “create new” form, fill in the sections as necessary until you get to the “Link Type” section, this is where you will specify the anchor. (image of link type module)

Just like the below image you must set the “Link Type” to “URL (from Arguments:)” and in the “Arguments” parameter box you must enter “javascript:window.top.AppCompass.start(‘ScenarioName’);” replacing “ScenarioName” with the name of your Scenario. Click on the “Submit” or “Update” button, refresh and go ahead and test the Scenario.

Scripts and Options

Usefull advanced javascript/jQuery functions:

Function  Code
Find an element and simulate click var w = getMainWindow();

jQuery(w.document).find(‘/*CSS selector*/’).click();

ready();

Redirect url on main frame only if current url != url wanted var w = getMainWindow();

if (w.location.href.indexOf(‘/*/url.do*/’) == -1) {

w.location.href = ‘/*/url.do*/’;

}ready();

Redirect url if current url != url wanted if (window.location != ‘url’ && window.location != ‘url’ && window.location != ‘url’ && window.location != ‘url’) {
window.location.replace(‘url’);
ready();
} else {
ready();
}
Find element and
make it visible in nav
var w = getNavWindow();
jQuery(w.document).find(‘#filter’).val(‘incident’); //the module name
frame jQuery(w.document).find(‘#nav_filter_controls’).css(‘visibility’,’visible’); //display
module
w.GwtNavFilter.filter(‘incident’); //apply filter
ready();
find span of an
element and display
it on click (usefull to
display "filter span"
on lists)
var w = getMainWindow();
jQuery(w.document).find(‘#incident_filter_toggle_image’).find(‘span’).trigger(‘click’)
;
select field and force
is value
var w = getMainWindow();
jQuery(w.document).find(“select[id*=’u_type_connexes’]”).val(‘/*val wanted*/’);