Jakarta introduces an exciting new feature called the Guided Tour Designer. Guided tours interactively walk users through the major components of an application. Here’s a 30 second animation that demonstrates a Guided Tour in action on the SLA Definition table.
The Guided Tour Designer allows you to build tours like the one you saw in the animation into the applications you create. In this post, I’m going to walk through the process of creating a simple guided tour for the “NeedIt” application used in the Developer Training content.
If you want to follow these steps on your own, you can fork and import the NeedIt application into your own instance. For instructions on how to do this, see the Exercise: Create the NeedIt Application from Source Control section of the Build the NeedIt Application course. After forking and importing the application, switch to the NeedItApp branch to load all of the NeedIt application artifacts. This is entirely optional, and you're welcome to just read along as well (I'll include plenty of screenshots).
Create a New Guided Tour
Users with the sn_tourbuilder.tour_admin or admin role can create new guided tours.
- Navigate to Embedded Help > Guided Tour Designer > Create Tour.
- Set the Tour Name to “NeedIt Tour”.
- Set the Application Page Name to “x_58872_needit_needit”.
- Specify the roles that should have access to this tour.
- Click the Create button.
The Guided Tour Designer interface will open and you can start building tour components.
Add Tour Steps
To add a tour step, click and drag the desired callout and drop it onto the UI element you wish to call out. In the Step Instructions dialog that opens, enter the text you want the user to see and select the trigger type you wish to use. The trigger determines when the step is "complete". This could be triggered by entering text in an input field, clicking something, clicking the "next" button on the tour among other options.
Continue adding tour steps
You can add callouts to a number of UI components and use a variety of trigger conditions. Some examples:
- The header of a record, triggered (completed) on right-click.
- A form section (tab).
- A module or menu in the Navigator.
- Elements of the ServiceNow UI header such as the profile, search and other buttons.
Here’s what the finished NeedIt tour looks like:
Test the Tour
You can test the tour at any time by clicking the Play button in the right-hand pane of the Guided Tour Designer. This will launch the tour in a new tab. Walk through the tour steps and return to the Guided Tour Designer to continue building.
Launch the Tour as an End User
Users can launch tours by clicking the Help icon in the ServiceNow header and then clicking the Take a Tour button.
Note: this button will only show up if the user is on a form that has a tour associated with it (remember when we picked the Application Page Name earlier?).
Go build some awesome tours for your apps! I'm personally looking forward to adding tours to the internal apps and utilities I create so I can make it easier for new users to quickly find their way around.
Josh Nerius | Developer Evangelist | @NeriusNow | Get started at developer.servicenow.com