Creating a guided tour

You can create a guided tour to highlight key features of user forms and portals. A guided tour provides users with information, instructions, or controls in a sequence of pop-up windows called tour stops. For example, you might want to create guided tours that instruct users how to create a case or how to personalize their dashboards.

1. Create a section for each tour stop. For more information, see About Sections.

The Value field for a cell defines the content that will display in the tour stop. The section can contain action controls and read-only user interface elements. The section must be in the class hierarchy of the guided tour rule.

2. For each UI element where you want to anchor a tour stop, click the Gear icon to open the properties, and enter a Tour ID value.
3. To create the guided tour, in Designer Studio, click +Create > User Interface > Guided Tour.
4. In the Label field, specify a name for the rule. Begin the name with a letter, and use only letters, numbers, the ampersand character, and hyphens. You can modify the Java identifier that is generated.
5. In the Apply to field, select a class that this rule applies to. In most cases, select the name of the class that contains the work items that the rule supports. Choose the class that is most specific to the application and its work items, rather than a general Work- class. Typically the class you specify in this field is derived from the Work- base class.
6. In the Add to ruleset field, specify the ruleset that you want the guided tour added to.
7. Click Create and open.
8. On the Definition tab, provide the following information for each tour stop:
   • Show when – Select when to display the tour stop. Options are:
     • Always – Always displays the tour stop.
     • Tour stop anchor is visible – Displays the tour stop only when the tour stop anchor is visible on the screen.
     • Element is visible – Displays the tour stop when a UI element other than the tour stop anchor is visible on the screen. If you select this option, you must also specify the tour ID or CSS selector of the UI element.
     • Element is not visible – Displays the tour stop when a UI element other than the tour stop anchor is not visible on the screen. If you select this option, you must also specify the tour ID or CSS selector of the UI element.
   • Title – Enter the window title for the tour stop, which is displayed above the section contents.
   • Tour stop section – Select the section that contains the window contents. The section must be in the class hierarchy of the guided tour rule.
   • Tour stop anchor – Specify the user interface element on which the tour stop pop-up window is displayed. Select one of the following:
     • Tour stop ID – Enter the Tour ID value specified on the General tab of the Cell Properties panel.
     • Custom CSS selector – Enter a string containing a CSS selector, which is passed to a jQuery function to match a specific user interface element.
9. Click + Add tour stop to add more tour stop sections. The order of tour stops on this tab sets the tour sequence. You can rearrange the order of tour stops by clicking a row number, and dragging the row to the desired position.
10. Save your changes.

Open topic with navigation