Enable Dark Mode!
how-to-create-tour-odoo-13.png
By: Mohammed Shahil

How to Create Tour in Odoo 13

Technical

Tour is a guideline of a module which gives the functional details about the module by giving live scenarios step by step. In this blog, we will discuss the creation of tour in a custom module.


Steps to Creating a tour


For creating a tour we have to specify the details in the javascript file in /static/src/js/tour.js


Example:


odoo.define(mobile_service_shop.example_tour', function(require) {
    "use strict";
    // Minimal requirements needed to create a tour
    var core = require('web.core');
    var tour = require('web_tour.tour');
    // Allows you to translate tour steps
    var _t = core._t;
    tour.register('mobile_tour', {
        url: "/web",
    }, [tour.STEPS.SHOW_APPS_MENU_ITEM, {
        trigger: '.o_app[data-menu-xmlid="mobile_service_shop.mobile_service_main_menu"]',
        content: _t('For managing mobile service? click here.'),
        position: 'bottom',
    }]);
});


Options:


Options (second argument of tour.register):


Mobile_tour -  technical name of the tour.

url -  page the tour should be starting.

skip_enabled - adds skip button for tips.

wait_for - wait for deferred object before running the script.

test - only for tests.

edition - set enterprise if it is enterprise otherwise odoo will consider as community.


Attributes:


content - is the text that we want to display on the tour.

trigger - will trigger the tour, in this mobile_service_shop is the module name and mobile_service_main_menu is the main menu of the module.

Position - is the position that we want to display the text and icon.

timeout - maximum waiting time to conditions.

width - width that set to the text specified in content, the default will 270.

extra_trigger - is the option to make sure that your step is in the correct screen, for example, ‘trigger’:’.o_form_editable’ can be seen in other screens with this class. But if you write an option ‘extra_trigger’:’.o_mobile_service’ in the step then it will show in the correct screen.


Predefined steps:


SHOW_APPS_MENU_ITEM - build-in function to start from the home screen for blinking icon on the app.

TOGGLE_HOME_MENU - to switch between the app and main screen of odoo.

WEBSITE_NEW_PAGE - it is used in frontend to create a new page on the website.


Trigger in tour:


'.o_app[data-menu-xmlid="odoo_app_name.xml_id"]:


{
    trigger:      '.o_app[data-menu-xmlid="mobile_service_shop.mobile_service_main_menu"]',
    content: _t('Want to manage your details? It starts here.'),
    position: 'bottom',
}


Input:


{    trigger: 'input[placeholder="Name"]',
    content: _t('Fill in the name of the record first.'),
    position: 'bottom',
}


.o-kanban-button-new: 


{
    trigger: '.o-kanban-button-new',
    content: _t('Let\'s create your first record.'),
    position: 'bottom',
}


.o_form_button_edit:


{
    trigger: '.o_form_button_edit',
    content: _t('Let\'s modify our record.'),
    position: 'bottom',
}


.o_form_button_save:


{
    trigger: '.o_form_button_save',
    content: _t('Click on save to save your new record in the database.'),
    position: 'bottom',
}


Breadcrumb-item:


{
    trigger: '.breadcrumb-item:not(.active):last',
    content: _t('Use the breadcrumbs to go back.'),
    position: 'bottom',
}


Including javascript file:


<odoo>
   <template id="assets_backend" name="tour_demo assets" inherit_id="web.assets_backend">
       <xpath expr="." position="inside">
           <script type="text/javascript"
src="/mobile_service_shop/static/src/js/mobile_tour.js"></script>
       </xpath>
   </template>
</odoo>


Including manifest file:


"depends": [
    "web_tour",
],
# ...
"demo": [
    "views/mobile_tour.xml",
],


/how-to-create-tour-odoo-13-cybrosys


You can also start the tour by clicking.


/how-to-create-tour-odoo-13-cybrosys


If you need any assistance in odoo, we are online, please chat with us.



2
Comments

Telmo

So, after i make the module in a staging branch, how can i pass it to the production branch?

09/04/2020

-

5:08AM

Telmo

Hi! Is this possible co accomplish in odoo.sh?

03/04/2020

-

11:43AM



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message