RPA JS 扩展开发文档

RPA JS 扩展开发文档

  • SDK接口说明
  • 代码示例

›All Blog Posts

All Blog Posts

  • 使用VS Code插件在本地调试页面代码
  • 如何不使用VS Code和Chrome工具进行RPA开发
  • [Web]明细代码示例
  • [Web]CPQ产品配置页扩展
  • RPAJS中如何实现AOP开发
  • [H5]商机,报价,订单明细自定义编辑页面
  • [H5]自定义实体,表单子实体批量示例
  • [H5]表单页代码示例
  • [H5]详情页代码示例
  • [H5]系统级API示例
  • [H5]调试RPA JS扩展代码
  • [H5]在自定义页面中使用RPA SDK
  • [Mobile]调试RPA JS扩展代码
  • [Web][新版]表单页代码示例
  • [Web]明细表格API示例
  • [Web]系统级API示例
  • [Web]表单页代码示例
  • [Web]列表页代码示例
  • [Web]详情页代码示例
  • [Web]调试RPA JS扩展代码
  • RPA JS 更新日志
  • RPA JS 常见问题Q&A
  • RPA JS 扩展开发介绍

RPA JS 更新日志

January 3, 2020

v2011

v2011版本,12月19日生产正式,12月26日腾讯云。

  1. RPA扩展增加企业微信端(H5),目前有三种类型:web、mobile和h5

  2. VS Code工具支持三端单独保存、单独发布。

扩展代码(打包前)类型
tenant.rpa.extensions兼容旧版,(web+mobile)
tenant.rpa.extensions.h5企业微信端
tenant.rpa.extensions.web网页端
tenant.rpa.extensions.mobile移动端

网页端运行时,先寻找打包后的新版扩展代码(tenant.rpa.bundle.web),如果找不到,则使用旧版扩展代码(tenant.rpa.bundle),移动端同理。

  1. Chrome工具根据主应用的类型,自动识别是web还是h5。

  2. 网页端扩展点支持替换表单子实体的picker。

RPA JS 常见问题Q&A

January 2, 2020

1. 在哪些需求和场景下,适合使用RPA JS扩展开发?

RPA JS扩展开发可以让我们通过编写一些简单的代码来改变UI的行为,主要为了满足客户UI上的定制需要,对UI的元素进行显示隐藏、调整样式、简单的逻辑修改等等。

列举一些不适合使用RPA的场景:

I. 在RPA中做数据校验,比如用户填写的表单某个字段必须符合特定条件才能保存。应该优先使用admin中的"校验规则"功能,如果不能满足,在自定义api中进行校验,前端的数据对于后端来说,是不可信的,校验需要放在后端。

II. 使用RPA在前端隐藏敏感数据,比如某个表单项不想让用户看到,在前端隐藏。该数据后端接口已经返回了,如果是敏感信息,只在前端隐藏非常不安全,浏览器或App实际上已经从后端获取到了数据。

III. 与平台能力冲突,比如使用RPA调整表单字段的顺序。表单字段顺序来自于admin布局设计器,应该通过设计器调整顺序。

IV. 作为标准能力提供,比如调整菜单的显示隐藏。菜单是否显示是由license控制的,想要隐藏特定菜单应该给平台提需求,由平台做成标准能力。

2. 什么是生命周期方法?扩展代码为什么要放到生命周期方法中?

当主应用初始化时,会拉取所有的扩展代码,但这些扩展代码只有在特定情况下,才应该被执行。比如编写了一段设置表单字段值的方法:

const form_address = new xsyrpa.FormTextInputExtensionPoint("account.form#*#address");
form_address.setValue("北京");

如果不放在生命周期方法(lifecycle)中,在主应用初始化时,这段代码就会执行,此时页面上没有打开表单,找不到表单的扩展点"account.form#*#address",setValue()方法就不会执行,不起作用。

故需要"当表单加载完毕之后"再运行扩展代码,如下:

const account_form = new xsyrpa.FormExtensionPoint("account.Form#*#");
account_form.on("loaded", (data) => {
  const form_address = new xsyrpa.FormTextInputExtensionPoint("account.form#*#address");
  form_address.setValue("北京");
});

RPA JS扩展代码的所有方法都需要放到某个生命周期方法中。

3. 保存和发布RPA JS扩展代码需要什么权限?使用RPA JS扩展需要什么权限?

无论是VS Code插件、Chrome检查或RPA API,只要能在Admin中看到“开发”菜单,就有保存和发布RPA JS扩展代码的权限。

发布后的RPA JS扩展代码,在运行时对所有权限、职能的用户全部有效。

4. 编写完的扩展代码,在Chrome按调试按钮生效,发布后不起作用,是为什么?

原因同上,需要放到生命周期方法中。

另外需要注意,比如编写了"表单加载完成后"的生命周期方法,点击调试后,需要关闭表单再打开,重新触发表单的加载,扩展代码才能生效。点击发布后,需要刷新浏览器页面或重启移动端/企业微信端应用。

5. 保存完的RPA JS扩展代码为什么还需要发布?

点击Chrome或VS Code工具中的保存按钮,会将RPA JS扩展代码保存到租户下"extensions"类型的记录中,以便下次读取"extensions"类型的记录,继续开发。

点击Chrome或VS Code工具中的发布按钮,会编译并打包RPA JS扩展代码保存到租户下"bundle"类型的记录中,主要为了IE浏览器的用户。运行时使用的是"bundle"类型的RPA JS扩展代码。v2011版本后Chrome工具中提供了不打包不压缩的发布功能,如果RPA JS扩展代码不多并且用户没有使用IE浏览器,或者打包后的代码有问题,想用打包前的代码进行测试,可以使用Chrome上的发布功能。

6. 实体A上的某个扩展点可以用,实体B上一样的扩展点为什么不行?

扩展点上的暴露出的方法和方法的代码提示,统一由框架自动生成,但是不同实体的业务代码和实体上扩展点的逻辑是由各个业务线实现的。举例来说,"客户名称"字段是文本类型,对应到FormTextInputExtensionPoint扩展点(表单所有文本类型字段都对应到这个扩展点上)。但根据实体不同,"客户名称"有特殊逻辑。客户实体中的"客户名称"调用了工商信息;订单实体中的"客户名称"选择后会清空商机和联系人等等。

故"客户名称"字段不支持RPA,请知悉。

我们有上百个标准实体,不同实体上有各自的业务逻辑,不能保证所有实体的所有扩展点功能完全一致,不同端上的行为也因实现不同,可能会不一致。

对于不同客户的需求,请提前确认一下各个实体上的扩展点能否使用,再进行实施。

7. 为什么Chrome和VS Code自动提示中有"init"、"onChange"等方法,但不起作用?

原因同上。

8. Chrome或VS Code工具中提示有错误,怎么解决?

除去编写时的语法错,错误一般有两种情况:

I. RPA框架添加了新方法,和工具的方法对应不上,需要更新Chrome和VS Code插件。

II. Chrome或VS Code工具中的代码提示功能,利用了TypeScript的typings.d.ts的能力,我们也能看到VS Code打开的文件后缀是.ts而非.js。但为了降低使用门槛,RPA JS扩展代码是用JavaScript编写的,所以请忽略任何和TypeScript相关的报错,VS Code可以在右下角选成JavaScript的Language Mode。

无论哪种报错,都不影响RPA的运行,只是工具里的语法检查。只要能使用VS Code发布成功,就是可以运行的RPS JS扩展代码。

9. getValue()方法为什么拿不到值?

RPA JS扩展代码运行在单独的Web Worker中,所有和主应用之间的通信都是异步的,所有返回结果的类型都是Promise。

点我了解Promise

所以都要用Promise的方式取值:

EXT.getValue().then((data) => {
  console.log(data);
})

10. 扩展点太少了,为什么不能全部放开?

RPA JS扩展代码运行在单独的Web Worker中,与主应用的运行时隔离,保证了安全性。

RPA无法访问dom,只能通过主应用中提供的扩展点来改变UI行为。这些扩展点都需要设计和实现,根据需求和优先级一批批提供扩展点。对每个扩展点都有严格的定义,扩展点一但发布,就不能随意修改。

提供的扩展点需要与主应用的逻辑相恰,在什么时机运行扩展代码?先执行主应用代码,还是先执行扩展代码?如果逻辑冲突,以主应用为准,还是以扩展代码为准?扩展代码即使传递错误的参数,主应用也不能报错崩溃。

如果不加以控制,就会产生问题。

11. RPA中能不能拿到主应用window、document、cookie等对象?

不能,原因同上。

12. 如何区分网页端是不是新表单?

浏览器中右键,选择检查,class上有"brz-"和"breeze-"前缀的,是新表单

13. 如何查看VS Code工具中的log?

第一步,点击VS Code菜单中的View/Output,打开控制台

第二步,在控制台Output右侧的下拉栏中选择"Breeze Extension DevTool"

14. 如何使用表单关联关系字段setValue方法?

setValue的参数是对象,一般需要两个字段id和name,但每个实体的名称字段不同,比如产品的名称为productName。

使用getValue方法查看数据格式,再使用相同的格式把值set回去。

EXT.getValue().then((data) => {
  console.log(data);
})

15. 私有云Chrome插件提示"当前页面不支持该插件工具",如何解决?

Chrome插件有安全限制,只能在指定的网站上开启,新的私有云地址需要添加到白名单中,并发布新版本。

如果私有云有需要使用Chrome插件的需求,请开工单并附上私有云测试环境和正式环境的完整域名。

VS Code插件和RPA API不受影响,可以直接在私有云新环境上使用。

16. 如何调试RPA JS扩展代码?

Web端可以在Chrome浏览器控制台Sources中加断点,调试代码。

H5端可以在Chrome浏览器控制台Sources中加断点,调试代码。

Mobile端可以使用console.log()打印信息进行调试。

17. 项目中RPA JS扩展代码较多,全写在一个文件里太乱,如何解决?

建议使用git托管复杂的RPA JS扩展代码,多人协作、提交历史和分支管理都使用git的能力,Chrome和VS Code插件用于测试和发布。

对于需要拆分多个文件夹的RPA JS扩展代码,可以参考示例项目。

  1. 下载并解压
  2. 安装Node.js
  3. npm run mergeWeb
  4. 在/output文件夹下查看合并后的结果

在开发时,单独开发和调试某一个RPA JS扩展代码;在保存和发布前,把所有扩展代码合并成一个文件。具体逻辑参考merge.js,可以根据不同需求进行调整。

18. 多个实施顾问需要在同一个租户上修改RPA JS扩展代码,如何协作?保存或发布后的RPA JS扩展代码如何回退到历史版本?

同上,推荐使用git。

19. VS Code插件中的"tenant.rpa.extensions"、"tenant.rpa.extensions.web"等分别是什么意思,应该使用哪个?

点击"保存"按钮,RPA JS扩展代码不打包,直接保存,命名为"tenant.${代号}.extensions.${类型}"。

点击"发布"按钮,RPA JS扩展代码使用Webpack打包,保存打包后的bundle,命名为"tenant.${代号}.bundle.${类型}"。

旧版的RPA JS扩展代码名称为"tenant.rpa.extensions",Web端和Mobile端的扩展代码都写在这个文件中。新版RPA JS扩展代码区分了类型,Web端在运行时会先寻找"tenant.rpa.bundle.web",如果是空的,则使用"tenant.rpa.bundle"。兼容了老版本,已经实施完毕的租户不需要再次改动。Mobile端同理。

RPA JS 扩展开发介绍

January 1, 2020

RPA JS 扩展点和扩展代码原理

RPA JS 扩展开发流程

RPA JS 使用方式

  1. get / set 扩展点上的属性
const item = new xsyrpa.FormNumberInputExtensionPoint("customizeObject__c.form#*#customItem1__c");
item.getValue();
item.setValue(123);
item.setVisible(false);
  1. 监听扩展点上的事件
const item = new xsyrpa.FormNumberInputExtensionPoint("customizeObject__c.form#*#customItem1__c");
item.on("onChange", (data) => {
  console.log(data)
});
  1. 调用SDK提供的全局方法
//发送请求
const ext_XRequest = new xsyrpa.XRequest();
ext_XRequest.request({ url: "/rest/api/***", headers: {}, method:"GET" }).then().catch();

//弹出成功消息
const notificationMessage = new xsyrpa.NotificationMessage();
notificationMessage.success({ message: "保存成功" });

//打开新窗口
const systemUtils = new xsyrpa.SystemUtils();
systemUtils.openWindow({ url: "https://www.baidu.com" });

VS Code 插件功能一览

← Prev
Copyright © 2021 销售易