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

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

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

实现步骤：

第一步： 选中组件后，打开属性设置面板，单击跳转设置后的“ + ”，弹出跳转设置对话框。

第二步： 设置跳转文档的名称、选择目标文档类型（这里我们选择外部链接），然后添加链接信息，并选择合适的打开方式。最后单击确定。

1. 名称： 为目标文档的命名。该名称将显示在跳转文档列表中。

2. 跳转到： 设定网址。本例中以“葡萄城官网”为例。

3. 打开方式：

为跳转后的文档选择一个合适的打开方式。支持对话框、内嵌、新页面、重定向以及非模态对话框等方式。

这部分内容与跳转至仪表板相似，这里不做赘述，请查看 跳转至仪表板 中对应的介绍。

type=info

提示

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

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

第三步： 设置完成后即可在属性设置面板中看到刚刚设置的跳转文档。

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

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

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

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

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

可以看出，该链接的特别之处在于URL中的参数值(即#{Slicer.labelSlicer|"#value"}})不是固定的值，而是一个使用了井号和大括号表示的动态变量。

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

接下来为您详细介绍。

type=info

提示

有关使用URL跳转至报表传递固定参数的用法示例以及报表传参的语法要求，请参考：

跳转至报表或仪表板并传递固定参数值

报表参数传递方法

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

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

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

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

比如：

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

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

注意

推荐您使用中括号加引号[""]的形式引用对象的属性。

由于圆点 . 的形式不支持引用特殊属性名，比如属性名中包含特殊字符括号、空格、星号等时，使用圆点则引用失败。

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

可用变量名（不区分大小写）

说明

示例

User

语法：#{user["propName"]|formatter}

支持的属性：

email

home

id

language

name

roles

数值类型：字符串数组

securityProvider

showWelcomeOnStartup

tenantId

tenantName

theme

动态URL：http://abc.com?p1=#{user.name} 对应的实际URL：http://abc.com?p1=Jack

动态URL：http://abc.com?p1=#{user.name|"#value"}对应的实际URL：http://abc.com?p1="Jack"

动态URL：http://abc.com?p1=#{user.roles}对应的实际URL：http://abc.com?p1=[Admin, Everyone]

动态URL：http://abc.com?p1=#{user.roles|"#value"}对应的实际URL：http://abc.com?p1=["Admin", "Everyone"]

Document

语法：

#{document["propName"]|formatter}

支持的属性：

id

name

当前页面URL:http://def.com?theme=black®ion=Japan

动态URL: http://abc.com?theme=#{urlParameters.theme}&salesRegion=#{urlParameters.region}

实际URL: http://abc.com?theme=black&salesRegion=Japan

UrlParameters

语法：#{UrlParameters["propName"]|formatter}

该属性支持当前页面URL中的所有搜索查询参数

Parameters

语法：#{Parameters["parameterName"]|formatter}

如果参数为多值，则值类型为数组

如果参数不是多值，则值类型为单值

Slicer

语法：

#{Slicer["slicerScenarioName"]|formatter}

多维列表框, 多维下拉框

值类型为级联数值

标签列表

值类型为数组

数值范围、日期范围、相对日期

值类型为范围

扩展语法：

#{Slicer["slicerScenarioName"].minValue|formatter}

#{Slicer["slicerScenarioName"].maxValue|formatter}

值类型为单值

其中slicerScenarioName来源于组件属性设置中“组件名称”。

示例中使用的即此类变量，由于报表参数值得传递要求必须添加引号，因此为变量添加了格式化。

#{Slicer.labelSlicer|"#value"}

FilteredValue

语法：

#{FilteredValue["columnName"]|formatter}

值类型为数组。

扩展语法：

#{FilteredValue["columnName"].minValue|formatter}

#{FilteredValue["columnName"].maxValue|formatter}

值类型为单值。

仅对支持数据绑定的图表有效，切片器除外

返回已被相关切片器，筛选器，钻取等过滤的特定列实际值

Selection

语法：

#{Selection|formatter}

值类型为级联数值

仅对支持数据绑定和选择的图表有效，切片器除外

以格式化中定义的顺序返回所选的特定列值。

如果没有格式化，则仪表板将输出所有维度的值，但维度顺序是随机的

选中的数据点的维度字段

维度： A, B

动态URL：http://abc.com?p1=#{selection|["DimA"]:["DimB"]} 对应实际URL：http://abc.com?p1=[A1:B1,A1:B2,A2:,A3:B4]}

动态URL：http://abc.com?p1=#{selection|["DimB"]} 对应实际URL：http://abc.com?p1=[B1,B2,B4]

动态URL：http://abc.com?p1=#{selection}对应实际URL：http://abc.com?p1=[A1:B1,A1:B2,A2:,A3:B4]}或者http://abc.com?p1=[B1:A1,B2:A1,:A2,B4:A3]}

Databinding

用于在跳转到外部系统时获取组件的底层数据。

支持三种形式：

Databinding["datasetId"]

Databinding["pivotModel"]

Databinding["rawModel"]

datasetId：将组件的 datasetId 返回给跳转URL 。

pivotModel： 将组件的 pivotModel （是指组件显示的聚合结果）返回给跳转URL，作为 'api/pivot'API的请求体。

rawModel： 将组件的rawModel返回给跳转URL，作为 'api/pivot'API的请求体 。 

用于获取非聚合数据计算 聚合数据的rawModel ，返回数据为表格数据，默认偏移量为0，限制为200，用户可以更改。

如果组件绑定了一个分析表达式的度量，该度量将在 rawModel 对象中被忽略。

示例一

动态URL：

http://abc.com?p=#{Databinding["datasetId"]}

实际URL：

http://abc.com?p=b0082554-9c66-4605-8cf3-5f1ffbd9c314

示例二

动态URL：

http://abc.com?p=#{Databinding["pivotModel"]}

实际URL：

http://abc.com?p=[{"pivots":[{"id":"ed7ebd80-8fcc-11ed-9f86-5bd4961d3279","dimensions":[{"column":{"attributeId":"Age","tableName":"MaketAutoTest","columnId":"Age","subColumnType":0,"isCustomAttribute":false}}],"values":[{"column":{"attributeId":"Gradient%20Value","tableName":"MaketAutoTest","columnId":"Gradient%20Value","subColumnType":0,"isCustomAttribute":false},"aggregationType":"sum"}],"options":{"includeAllDimensions":false}}],"tables":[],"userParameters":[]}]

示例三

动态URL：

http://abc.com?p=#{Databinding["rawModel"]}

实际URL：

http://abc.com?p=[{"pivots":[],"tables":[{"dimensions":[{"column":{"attributeId":"Age","tableName":"MaketAutoTest","columnId":"Age","subColumnType":0,"isCustomAttribute":false}},{"column":{"attributeId":"Gradient%20Value","tableName":"MaketAutoTest","columnId":"Gradient%20Value","subColumnType":0,"isCustomAttribute":false}}],"id":"ed7ebd80-8fcc-11ed-9f86-5bd4961d3279","options":{"index":0,"capacity":200}},{"dimensions":[{"column":{"attributeId":"Age","tableName":"MaketAutoTest","columnId":"Age","subColumnType":0,"isCustomAttribute":false}},{"column":{"attributeId":"Gradient%20Value","tableName":"MaketAutoTest","columnId":"Gradient%20Value","subColumnType":0,"isCustomAttribute":false}}],"id":"ed7ebd80-8fcc-11ed-9f86-5bd4961d3279-Count","countOnly":true}],"userParameters":[]}]

注意

columnName

在FilteredValue中，它表示列在“数据集”字段列表区域中的显示名称。例如：数据集列的原始名称为“RegionName”，用户将其重命名为“Region”，因此动态网址应为“http://abc.com?p1”=＃{filteredValue[“Region”]}“

在Selection中，它表示组件绑定区中字段项的显示名称。

值类型

格式化关键字

示例

单值

#value

场景

URL

格式化

结果

p1=#{user.name}

-

p1=Jack

p1=#{user.name|#value}

#value

p1=Jack

p1=#{user.name|“#value”}

"#value"

p1="Jack"

p1=#{user.name|"#[email protected]"}

#[email protected]

[email protected]

数组

#value

p1=#{user.roles}

-

p1=[Admin, Everyone]

p1=#{user.roles|#value}

#value

p1=[Admin, Everyone]

p1=#{user.roles|“#value”}

"#value"

p1=["Admin", "Everyone"]

p1=#{user.roles|GC-#value}

GC-#value

p1=[GC-Admin, GC-Everyone]

数值范围

#value

Range Slicer

Sales: 1k~2k

p1=#{Slicer["rangeSlicer"]}

-

p1=[1000, 2000]

p1=#{Slicer["rangeSlicer"]|#value}

#value

p1=[1000, 2000]

p1=#{Slicer["rangeSlicer"]|"#value"}

"#value"

p1=["1000", "2000"]

级联数值

["columnName"]

维度字段

DimA, DimB

A1-B1

A1-B2

A2

A3-B4

p1=#{Slicer["treeSlicer"]}

-

p1=[A1:B1, A1:B2, A2:, A3:B4]

p1=#{Slicer["treeSlicer"]|["DimA"]:["DimB"]}

["DimA"]:["DimB"]

p1=[A1:B1, A1:B2, A2:, A3:B4]

p1=#{Slicer["treeSlicer"]|"["DimA"]"~"["DimB"]"}

"["DimA"]"~"["DimB"]"

p1=["A1"~"B1", "A1"~"B2", "A2"~"", "A3"~"B4"]

p1=#{Slicer["treeSlicer"]|"["DimA"]"~["DimB"]}

"["DimA"]"~["DimB"]

p1=["A1"~B1, "A1"~B2, "A2"~, "A3"~B4]

p1=#{Slicer["treeSlicer"]|["DimA"]}

["DimA"]

p1=[A1, A2, A3]

p1=#{Slicer["treeSlicer"]|"["DimA"]"}

"["DimA"]"

p1=["A1", "A2", "A3"]