1. 内容概述

跳转至外部链接也是仪表板中经常用到的功能，此处的外部链接可以使用常规的静态链接，跳转至固定的外部链接；也支持在URL中添加上下文信息等形成动态链接。

2. 跳转至外部静态链接

文中以图片组件跳转至外部网站为例进行讲解，最终实现如下效果。

我们单击Wyn 标志的图片时进行跳转，跳转至葡萄城官网。

实现步骤：

(1)   选中组件后，打开属性设置面板，单击“跳转设置”后的“+添加项目”，弹出跳转设置对话框。

(2)   设置跳转文档的名称、打开方式(如选择对话框形式打开，则可以设置对话框的大小)；

选择目标文档类型（这里我们选择“外部链接”）；然后根据选择的目标文档类型设置文档、参数、页面、链接等具体信息。最后单击“确定”。

• 名称： 为目标文档的命名。该名称将显示在跳转文档列表中。
• 打开方式：为跳转后的文档选择一个合适的打开方式。支持对话框、内嵌、新页面和重定向四种方式。

选择以“对话框”方式打开新文档时可设置对话框的尺寸；

使用“重定向”方式时，还可以进一步选择重定向区域是仪表板或者当前页面。

当页面地址放在网页的 iframe 中时，重定向效果将显现出来。

重定向仪表板代表跳转后仅将仪表板区域重定向显示成目标文档；重定向当前页面代表浏览器中的URL会重定向显示为新的目标文档。

• 仪表板：当选择跳转至仪表板时，需选择具体的目标文档。如果目标仪表板带参数，这里则会将参数显示出来。详见跳转至仪表板。
• 报表：当选择跳转至报表时，需选择具体的目标报表文档。如果目标报表带参数，这里则会将参数显示出来。详见跳转至报表。
• 内部链接：选择仪表板内部的其他页面进行跳转。详见跳转至内部链接。

• 外部链接：当选择跳转至外部链接时，需要设定网址。本例中以“葡萄城官网”为例。

  提示

  当我们选择以对话框形式跳转到外部链接时，可以在目标页面中使用自定义的UI关闭对话框。如下示例中目标页面定义了一个关闭按钮，通过点击按钮关闭页面。

  

  
  

  需要在目标页面中使用如下postMessage代码，其中“type”是固定的，“name”为跳转设置时填写的名称。

  

  

(4)   设置完成后即可在属性设置面板中看到刚刚设置的跳转文档。

此时预览仪表板可以看到跳转效果。

3. 跳转至外部动态链接

我们在实际使用跳转功能时，经常需要在跳转时带上当前场景信息，比如当前的用户上下文信息、数据过滤以及某些参数值等等。

比如下图中，在仪表板中进行数据过滤后，显示了生鲜蔬果和综合商品的订单金额。

此时我们可以为订单金额设置动态链接，将数据筛选器中筛选的数据通过URL传递给出去。比如传递给报表，那么报表就可以根据数据进行过滤，仅显示筛选器选中的数据。效果如下图所示：

我们来看一下上图中 富文本* 使用的外部链接：

http://localhost:51980/reports/view/f2350a68-0fc2-4e17-8df0-14bc3e2a318f?display=singlepage&theme=default&lng=zh&dp={"类别名称":#{Slicer.labelSlicer|"#value"}}

可以看出，该链接的特别之处在于URL中的参数值（即蓝色字体部分）不是固定的值，而是一个使用了井号和大括号表示的动态变量。

这就是即将要为您介绍的动态URL动态变量，实际在 仪表板中，外部链接可以添加的数据信息有很多种，但都必须满足这样固定的语法样式要求。

接下来为您详细介绍。

动态变量使用语法要求

整体的表达语法要求为：#{变量内容 | 格式化}

#{} 是在URL中添加动态变量的固定用法，用来标识整个变量表达的内容。 

其中大括号里的前半部分（“变量内容”）包含变量名和具体属性。这里使用 javascript 标准对象语法，使用中括号加引号 [" "] 或者圆点 . 的形式来访问对象的属性。示例：  #{use["name"]} 或 #{use.name} 或者都可以用来表示 use 变量的 name 属性。

大括号里的后半部分（“| 格式化”）用于对变量的结果进行格式化，根据实际情况可省略。

比如：

在URL中使用  #{use["name"]} 或 #{use.name}  表示当前用户信息中的用户名。

当前登录用户的用户名为Jack的话，实际URL中 #{use["name"]} 或 #{use.name}  就会使用 Jack。

可用变量说明

下表中为您列出了系统 中所有可以在URL中使用的变量，以及应用语法。请参考使用。

格式化说明