tableau extension 调研

概述

最近调研了一下 tableau extensions 的实现，有一些心得，记录下来，供以后开发时参考，相信对其他人也有用。

总的来说，写 tableau extensions 还是挺简单的，只是要熟悉一点 tableau 的业务逻辑。这是我仿照 Image Viewer 插件写的 轮播图插件

参考资料：

extensions-api

extensions-api 文档

原理

tableau extensions 的原理其实就是在 tableau 里面打开一个内嵌网页而已，而在这个网页里面可以接入 tableau 的 sdk 来和 tableau dashboard 进行数据交互。

需要注意的是：

1. 内嵌网页的内核是 chrome。
2. tableau extensions 只能在 tableau 的仪表盘里面运行。
3. 由于插件其实是一个内嵌网页，所以在插件里面你可以使用任何库，包括 jquery，vue，react 等等。

可以做哪些事

由于 tableau extensions 可以使用 sdk 和 tableau 进行数据的双向流动，所以它非常灵活，可以做这些事情：

1. 能够获取 tableau dashboard 的数据
2. 能够操作 tableau dashboard 的数据
3. 能够监听关于数据的操作事件，然后做出一些响应。（所以能够和 tableau dashboard 的其它模块的一些操作进行联动）
4. 能够打开 tableau dashboard 的配置框，让用户给自己手动进行一些配置。

基本结构

插件的基本结构如下(以我开发的轮播图插件为例)：

- ImageSwiper.trex
- imageswiper.css
- imageswiper.html
- imageswiper.js
- imageswiperDialog.html
- imageswiperDialog.js

插件的加载过程如下：

1. 安装插件: 引入配置文件 ImageSwiper.trex
2. 在 ImageSwiper.trex 文件中有 imageswiper.html 的加载地址，tableau 会利用这个地址加载 imageswiper.html
3. imageswiper.html 会加载 imageswiper.css 和 imageswiper.js
4. 如果有配置 tableau 的配置框的话，在 imageswiper.js 里面会引入 imageswiperDialog.html 的地址，然后 tableau 根据这个地址加载配置框 imageswiperDialog.html
5. imageswiperDialog.html 会加载 imageswiperDialog.js

所以要查看其它 tableau extensions 的源码是很简单的，只需要在 trex 配置文件里面查看插件 html 的地址，然后一步步去看源码就可以了。

调试

我当时是在 tableau desktop 上面写插件的，这样就看不到插件打印出来的内容，所以当时调试得非常困难。

等我写完插件才发现，可以直接使用 chrome 来进行调试。这是文档，这是chrome插件下载地址。