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

本期内容

如何添加引导悬浮框

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

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

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

前期准备工作

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

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

• 气球(水滴状)提示符，可以提供有关菜单、按钮、标签、字段的提升信息（本文主要内容）

• 进度条状的符号，用于显示网页浏览的整体进度

实现步骤

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

（如 weekly.tour）

# '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属性。

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

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

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

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

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

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

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

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

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

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

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

最终效果

重启服务并升级相应模块，可看到引导悬浮已添加完成~

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