【Odoo】如何通过添加引导悬浮框提升用户体验

发布于:2022-11-28 ⋅ 阅读:(193) ⋅ 点赞:(0)


一个应用正式上线后,用户第一次打开该应用时的用户体验是非常重要的,因此,我们添加相应的引导提示是非常有必要的。
本篇我们分享一下如何在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')")

详细测试步骤可参考上一期内容:【如何利用向导进行自动化测试??】


最终效果

重启服务并升级相应模块,可看到引导悬浮已添加完成~
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意:该引导提示只会在第一次进入该应用,且没有设置演示数据(demo)时显示,否则将不生效。

版权声明:该内容由神州数码云基地团队编撰,转载请注明出处!
微信公众号后台回复“Odoo”,可加入技术交流群!

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到