General

Odoo Web Tour

March 21, 2018 · 3 minutes read

Web tour is the assistive feature in Odoo that makes the user familiar with a new module. This is an essential tool for new users for understanding Odoo. And for understanding a new module, it is very useful as well. This blog is intended for developers who want to include web tour features in their modules.

Here I am introducing mainly two tools. The first one is the balloon indicator which provides a nutshell of information about a field/label/menu. And the second one is the progress bar-like symbol which indicates the overall progress of web tour.

  1. The symbol will help the user to identify the use of each menu. When the user installs a new module, a balloon symbol will be present on each menu. On clicking the balloon symbol the information about the menu will be provided in a dialog box.  See the  below fig

odoo-web-tour

So let us see how to implement this feature in the module.

  • The first step is to create a ‘js’ file as follow. Here we need to require ‘web.core’ and ‘web_tour.tour’. You can trigger any menu with this feature

Here we need to mention the ‘XML id’ of our menu and its dialog box content. Here ‘fleet.menu_root’ is the ‘XML id’ of the main menu of the ‘Fleet Rental Module’

  • Then Make the ‘XML id’ of menus required by the tour available in the web client as follows

odoo

  • First, we need to inherit the model ‘web.planner’. Then we have to set the data which we need to include the dialog box.  You can set data as follow

  • The second step is to define the dialog box template as follow. This is the sample template. If you need to change the template style, you may create your own template. Here we need to  call ‘web_planner.page’ and ‘web_planner.category

You can add new features to the web tour template. That will create the more readable layout for users.

  • The final step is to add a record in ‘web.planner’ model as follow.

  • Menu_id : It is the id of a menu.

Inside tooltip_planner field, you can add the message.

And we are done. this is how we include a web tour in a module.

I hope this will help you to create web tour in your own module.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *