肆拾柒- Tableau Dashboard Extension 的绝望之旅 (二) - 整体结构介绍

1. 结构

其实 Tableau 扩展并没太复杂的结构 ( 或者说不能有太复杂的东西 ),就是一个 主页面 ( 即你拉插件后插件位置展示的页面 ) 以及一个 配置页

2. 主页面

当你运行 Dashboard 的时候,插件同时会打开插件所指向的页面,这个时候就跟直接在 Dashboard 上引用一个 网页 是一样的。

插件网页的不一样,就是在主页面中以下这个 JS 语句:

$(document).ready(function() {
	// 这句话是针对 Tableau 进行初始化
    tableau.extensions.initializeAsync().then(function() {
    	var dashboard = tableau.extensions.dashboardContent.dashboard;
		...
		// 这里就可以对 Tableau 为所欲为了
    }).catch(function(err){
		// 可以判断一下当前是直接用浏览器,还是 插件 的内容出错。可以展示不同的内容引导用户进行操作。
	});
});

附加介绍: 如果你运行一个网页,该网页有引用一个 JS 文件的话,这段 JS 代码会跟随网页一起运行。

以上那段代码的意思就是,当你网页初始化完成之后!你就可以读取当前 Dashboard 上的数据了!

官方介绍可看:

Create a ‘Hello World” Dashboard Extension


你可以做的事情不止以下:

1、在插件上按一个按钮可以操控所有 Worksheet 的 多个筛选器

2、把当前 Worksheet 上的数据拿出来用 JS 做别的可视化处理 ( 如使用 eChart 等 );

3、根据当前筛选器修改参数,或根据参数修改各筛选器

4、…….

( 其实我真心觉得,在网页上做的那么简单的东西,在 Tableau 上为什么就那么复杂呢?然后还要卖那么贵 License )

3. 配置页

当你做好主页面代码之后,你会寻思着,有某些设置是 Dashboard 作者想针对这个 扩展 所特定的 ( 但又不需要修改代码层面 ) 。

这个时候你就需要一个 配置页面 ,而 Tableau 扩展针对这个情况,可以允许你在 主页面 上声明一个配置页面,官方说明如下:

Add a Configuration Popup Dialog

主页面的具体 JS 代码就是:

$(document).ready(function () {
    tableau.extensions.initializeAsync({'configure': configure}).then(function() {
    	...
    });
});

function configure() {
	var popupUrl="./popup.html";
	var para={content:"想要传达到 配置页面 里的内容"};
	// 这里注册 配置页 的url
    tableau.extensions.ui.displayDialogAsync(popupUrl, para, { height: 500, width: 500 }).then((closePayload) => {
		...
		// closePayload 是当配置页面关闭后返回的信息
	}).catch((error) => {
		// 配置页出错的信息
	});
};

配置页JS 代码可以如下:

$(document).ready(function () {
	// 配置页 的 JS 代码也是需要初始化的哦~
	tableau.extensions.initializeDialogAsync().then(function (openPayload) {
		// openPayload 的信息就是上述传入的信息,即上述代码中的 para 变量
		...
	});
});

function closeDialog() {
	// 关闭当前配置页时需调用下面这个函数,让 主页面 知道是用户正式关闭了配置页。
	tableau.extensions.ui.closeDialog('NewInterval');
		// 'NewInterval' 为传递给主函数的变量,即上述代码中的 closePayload 变量
    });
};

4. 还有其他吗?

没有了, Tableau 扩展其实内容真的太有限。

以上的内容均为对 Tableau 扩展的介绍文档的大体翻译,小伙伴们可以先看看 Tableau 扩展API 文档,我们之后会介绍一个我们做的把 Tableau Worksheet 内容表格化 ( 当然还可以简单计算,如计算增长率、达成率、差值等 ) 的扩展。

Tableau Dashboard Extensions API