Odoo | 提升用户体验，从添加引导悬浮框开始~

神州数码云基地 2022-10-10

369

Odoo

神州数码云基地

在 Odoo 上的尝试、调研与分享

本期内容

如何添加引导悬浮框

一个应用正式上线后，用户第一次打开该应用时的用户体验是非常重要的，因此，我们添加相应的引导提示是非常有必要的。

本篇我们分享一下如何在Odoo中添加引导悬浮框，进而提升用户体验感~

同时，详细的测试步骤我们在上一期已经分享，点击链接可直达：【如何利用向导进行自动化测试？？】

前期准备工作

在__manifest__.py文件中添加使用引导悬浮框所需的依赖模块（web_tour），如不添加，后续代码运行将报错

web_tour是odoo内置的引导管理器，在其中包含两种工具：

气球(水滴状)提示符，可以提供有关菜单、按钮、标签、字段的提升信息（本文主要内容）
进度条状的符号，用于显示网页浏览的整体进度

实现步骤

新建一个JS文件，编写引导步骤

（如 weekly.tour）

odoo.define('weekly.tour', function (require) {
    "use strict";
    var tour = require('web_tour.tour');
    tour.register('weekly_tour',  {
        url: "/web"
        },[tour.STEPS.SHOW_APPS_MENU_ITEM, {
            trigger: '.o_app[data-menu-xmlid="weekly.root"]',
            content: '点击进入周报应用',
            position: 'right',
            edition: 'community'
        },
        {
            trigger: '.o_menu_header_lvl_1[data-menu-xmlid="weekly.my_weekly_menu"]',
            content: '选择我的周报',
            position: 'bottom'
        },
        {
            trigger: '.o_menu_entry_lvl_2[data-menu-xmlid="weekly.my_weekly_calendar_menu"]',
            content: '日历视图，查看我的周报每日计划',
            position: 'right'
        },
        {
            trigger: '.o_calendar_button_ics',
            content: '点击导入，导入日历计划',
            position: 'right'
        }
        ]
    );
});

# 'weekly_tour'：

注册的导览登录名称，唯一标识，在使用导览测试时可使用该名称定位具体的测试用例；

# 'url':

导览应该开始的页面路径；

'SHOW_APPS_MENU_ITEM'：

从主页面开始的内置功能，用于在应用程序上闪烁图标；

'TOGGLE_HOME_MENU ':

在应用程序和odoo主页面之间切换;

'WEBSITE_NEW_PAGE ':

在前端用于在网站上创建新页面;

'trigger':

触发游览的节点，这是一个JavaScript选择器，在本例中，使用了菜单的XML-id定位节点；

'content': 提示信息；

'position':

提示信息放置位置，包含top，bottom，left和right四种;

'timeout ': 导览的最大等待时间；

'width' :

设置为内容中指定的文本的宽度，默认为 270px。

'extra_trigger' :

是确保导览在正确页面中的选项，例如，'trigger':'.o_form_editable' 可以在此类的其他页面中看到。

但是，如果在该步骤中编写了选项 'extra_trigger':'.o_mobile_service'，那么它将显示在正确的页面中；

'edition':

'community' | 'enterprise' 版本信息-社区版或企业版。

此外在导览中还有一个比较重要的属性–run，它是一个函数。

在run函数中，我们需要编写逻辑来执行通常由用户所执行的操作。如：在使用导览进行自动化测试时，需要在输入框中输入值，我们便可以使用run属性。

trigger: 'div[name="name"] input',
run: '测试'
 
 
// another
trigger: 'div[name="name"] input',
run: function (actions) {
    actions.text('测试')

在没有向导览步骤传递run函数时，执行的是action.auto()。

自动动作大多会点击导览步骤中的触发元素。这里唯一的例外是input元素。

如果触发元素是input，导览会在其中设置默认值Test。这也是我们不需要为每个步骤添加run函数的原因。

此外，你可以手动的执行所有的动作，以防默认动作不能满足要求，如：

run: function () {
    var $input = $('div[name="product_template_id"] input');
    $input.click();
    $input.val('Matrix');
    var keyDownEvent = jQuery.Event("keydown");
    keyDownEvent.which = 42;
    $input.trigger(keyDownEvent);
}

上例中表示在输入框中输入“matrix”, 并触发键盘事件。

在后台资源中加入新建文件的引用

（如果不引用将无法生效）

默认会向终端用户显示已注册导览来提升引导体验。

如果要将它们作为测试用例运行，进行这一实现需要使用HttpCase Python 测试用例。

它会提供browser_js方法，该方法打开URL并执行第二个参数所传递的命令。可以手动运行导览如下：

from odoo.tests.common import HttpCase, tagged
  
class TestBookUI(HttpCase):
  
  @tagged('weekly')
  def test_weekly(self):
    self.browser_js("/web",
      "odoo.__DEBUG__.services['web_tour.tour'].run('weekly_tour')")