General

Odoo Web Tour

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 feature in their modules.

Here I am introducing mainly two tools. First one is the balloon indicator which provides a nutshell 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

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 it’s 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 web client as follow

So let us go through its technical side.

  • 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

Here you can set custom name in the place of ‘Custom Name’. Inside return {} you can include the data which you need to show the dialog box.

  • 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.

Click to comment

Leave a Reply

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

Most Popular

To Top