In Drupal 8 there is a Tour module in core that is very useful when it comes to web applications. In EK management tools we target professional users with small to medium scale companies. They usually have limited resources and time to spend on back office trainings. This is where the Tour module is very convenient to introduce functionalities to users who can quickly grasp the functions available to manage their back office.
We use the Tour functionality in our pages to guide users in their daily tasks like for instance in the form to create a new invoice or project page:
Implementation is actually very simple and results are great from the user experience point of view.
To achieve the above result, simply create a configuration file called tour.tour.invoice.yml. In this file add the properties information:
label: 'Create invoice tour'
- route_name: ek_sales.invoices.create
Those properties are straightforward. The Id must be unique. In "routes", indicate where the Tour will be placed and route_name is referred in the module routing.yml file.
Then comes the tips definitions that will display the actual help text (we just present here the first 3 items as an example):
label: 'Create or Edit invoice guide'
body: 'This is an guided tour to create and edit an invoice.'
label: 'Invoice header'
body: 'You must first select the header for you invoice. Header is defined by a company name. You can select any company to which you have access to. Selecting a company will in turn define other parameters like available bank accounts or credit accounts.'
body: 'In a multi companies configuration type, you can allocate the invoice to a different company of the group. This is used when a company invoice on behalf of another and you want to keep track of internal transactions.'
Again tips properties are also straightforward.
Id is unique. The 'text' plugin is the default display type in core. "Label" will appear as a box title and "body" is the extended description or help text. The 'weight' defines the sequence of tips display. the "attributes" link the tip to a specific element on the page that can be defined by its id (data-id) like in the cases above or by its class (data-class). And finally you can define the "location" of the tip around the element (top, bottom, left, right).
When you navigate to the page where the Tour has been configured, you can now see a Tour button which will start the Tour display:
Feel free to add your comments or suggestion.