在 Experience Builder 中，您可以使用数据属性、统计数据和简单表达式来显示基本的动态内容。 您也可以在微件设置中应用静态样式和基于状态的样式。
高级格式设置有两种类型：高级动态内容和动态样式。
- 高级动态内容涉及利用数据运行计算，并返回动态值以采用微件内容形式显示。 您可以使用 Arcade 表达式创建高级动态内容。
- 动态样式涉及依据数据更新微件背景、边框和其他可视元素。 您可以同时使用 Arcade 表达式和条件样式（无代码要素）创建动态样式。
Arcade
Arcade 是一种轻量级的安全表达式语言，用于在 Experience Builder 应用程序中操作数据和创建自定义内容。 您可以使用 Arcade 创建动态内容和动态样式。
格式化配置文件
格式化配置文件用于定义评估和解析表达式的环境与规则。
Experience Builder 具有两种类型的格式化配置文件：
微件格式化配置文件，用于自定义各个微件的内容与样式。 此文件使用 $dataSource 配置文件变量引用数据源级别的数据。
列表项微件格式化配置文件，用于自定义列表微件中各个列表项以及列表项中的微件（包括文本、按钮和影像微件）的内容与样式。 此文件使用 $feature 配置文件变量引用要素级别的数据。
注：
Experience Builder 还包括数据配置文件，此文件用于创建 FeatureSet 作为数据源。 您可以使用数据配置文件，通过 Arcade 添加数据。
在 Experience Builder 的所有案例中，您都可以在 Arcade 编辑器中输入脚本。 在该编辑器中，可以使用受支持的变量、函数以及实时数据预览，帮助您测试脚本。
Arcade 编辑器会显示在构建器界面的不同位置，具体取决于您是使用 Arcade 创建动态内容、创建动态样式还是添加数据。
使用 Arcade 创建高级动态内容
动态内容是指会根据数据或用户交互而改变的内容。 通过 Arcade，您可以计算并返回动态值，从而以微件内容形式显示。 您可以编写表达式来根据逻辑、条件和函数计算值，无需将内容直接与字段或统计数据绑定。
返回值必须属于以下任一字段类型：
- 文本
- 数字
- 日期
- 仅日期
- 仅时间
Experience Builder 支持通过以下方式使用动态内容：
- 创建文本内容，包括按钮文本
- 设置影像源
- 通过 URL 设置链接，不包括文本微件中的链接
示例 Arcade 脚本
以下小节列出了可以用于创建动态内容的 Arcade 脚本。
根据条件显示消息
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");显示某条记录上次更新后的天数
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";显示唯一值的计数
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);应用过滤器之后显示消息
var ds = $dataSources["dataSource_1-18c66465e65-layer-2"].layer;
var queryStr = $dataSources["dataSource_1-18c66465e65-layer-2"].queryParams.where;
Console(queryStr);
if (!IsEmpty(queryStr)) {
var result = Filter(ds, queryStr);
return "Filtered view: " + Count(result) + " records are displayed.";
}
return "All records are displayed."缩短列表微件中的长文本
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");根据类别，显示列表中影像微件中的不同影像
if ($feature.category === "park") {
return "https://example.com/images/park.png";
} else if ($feature.category === "school") {
return "https://example.com/ images /school.png";
} else {
return "https://example.com/ images /default.png";
}设置动态内容的样式
对于文本内容，您可以返回包含值及其文本样式的字典。 以下为脚本示例：
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};您也可以以 HTML 格式返回值，以创建更多高级样式。 以下是使用 HTML 的脚本示例：
return "<p style=\"font-family: Arial; font-size: 16px; color: #333; margin-bottom: 12px;\">" +
"Welcome to Experience Builder! Visit our " +
"<a href=\"https://experience.arcgis.com\" style=\"color: #007BFF; text-decoration: none;\">" +
"homepage</a> for more details.</p>" +
"<p style=\"font-size: 15px; font-family: Verdana; color: #444; margin-bottom: 8px;\">" +
"Key features:</p>" +
"<ul style=\"font-size: 14px; font-family: Verdana; color: #444; margin-top: 0;\">" +
"<li style=\"margin-bottom: 6px;\">Interact with 2D and 3D content in one app.</li>" +
"<li style=\"margin-bottom: 6px;\">Deploy responsive apps to any device.</li>" +
"<li style=\"margin-bottom: 6px;\">Create, deploy, and manage apps in a single place.</li>" +
"</ul>"下表列出 Experience Builder 在 Arcade 脚本中支持的 HTML 标签：
| 标记 | 属性 |
|---|---|
h1、h2、h3、h4、h5、h6 | style |
span | style |
p | style |
s | style |
strong | style |
em | style |
u | style |
ol、ul | style |
li | style |
br | |
a | style、href、target |
img | style、src、alt、height、width |
带有条件或 Arcade 的动态样式
借助动态样式，您可以根据数据直观地调整微件。 这包括根据字段值、统计数据或计算所得逻辑更改视觉效果，例如文本大小、背景颜色和边框样式。
将微件连接至数据时，微件的设置面板内会显示动态样式设置。
以下微件支持动态样式：
- 文本微件 - 动态样式设置显示在设置面板的底部。
- 按钮微件 - 动态样式设置显示在高级选项卡下。 每个状态（默认和悬停）都有各自的设置。
- 列表微件 - 动态样式设置显示在每个状态（默认、悬停和选中）下。
注：
使用列表微件时，动态样式应用于各个列表项，而非整个微件。
打开动态样式并单击设置按钮 
，可打开动态样式面板。 此面板包含两个选项卡：条件和脚本。
条件
条件样式属于无代码选项，可用于根据简单规则应用样式， 不需要编写脚本。 这是以直观方式突出数据差异（例如状态指示器、类别和值范围）的推荐方法。
条件选项卡包括以下设置：
- 选择条件指示器 - 选择创建条件语句的方法。 通过文本和按钮微件，您可以使用数据属性、统计数据或之前配置的动态内容。 通过列表微件，您只能使用数据属性。
下表列出可以作为指示器的属性字段的类型及其支持的运算符。
指示器字段类型 支持的运算符 字符串
是、不是、包含、为空、不为空
数字
是、不是、大于、小于、介于
- 样式条件 - 设置指示器后，您可以单击添加样式条件来创建条件。 每个条件都由下列组件组成：
- 运算符 - 从指示器支持的运算符列表中选择。
- 值 - 用于与指示器对比的目标值。 单击选择源类型来选择输入方法，包括用户输入、字段、唯一值；对于数值类指示器，还可以选择统计数据。
- 样式 - 满足条件时应用的视觉样式，例如文本颜色、背景或边框。
即使当前数据不符合条件，您也可以在设置面板中选择某一条件，以预览其在画布上的效果。 您可以对条件执行重新排序、复制或删除操作。 如果当前数据满足多个条件，则在条件列表中更靠前的条件将优先生效。 如果当前数据不满足任何条件，则微件使用其动态样式。
脚本
您可以使用 Arcade 脚本创建复杂、灵活的样式逻辑。 在脚本选项卡中，您可以单击 Arcade 编辑器，打开编辑器窗口。
Experience Builder 将您的脚本保存至本地，在您下次打开编辑器时能继续使用。 如需运行脚本，请单击应用。 单击后，应用的脚本会显示在使用中的脚本框中。
借助 Arcade 编辑器，您无需通过无代码界面配置样式规则，而是通过编写脚本以返回包含样式属性及其对应值的字典。 这样您可以根据通过样式条件要素无法实现的自定义逻辑、计算和条件来应用样式。
Experience Builder 使用返回值显示微件的样式。 如果您输入了字典范围外的任何样式键，微件将针对这些属性使用默认的样式设置。
下列各表列出了每个微件支持的样式属性，包括预期值类型及其含义。
注：
设置颜色时，请确保值遵循 CSS 颜色格式，例如已命名颜色（“红色”）、十六进制代码 ("#ff0000") 或 rgba()。
文本微件样式
文本微件支持以下样式属性：
| 属性 | 类型 | 描述 |
|---|---|---|
text | 字典 | 用于设置文本样式 |
text.size | 数字 | 字号（以像素为单位） |
text.color | 字符串 | 文本颜色 |
text.bold | 布尔 | 说明是否使用粗体 |
text.italic | 布尔 | 说明是否使用斜体 |
text.underline | 布尔 | 说明是否使用下划线 |
text.strike | 布尔 | 说明是否使用删除线 |
背景 | 字典 | 用于设置背景 |
background.color | 字符串 | 背景色 |
background.fillType | 字符串 | “适应”、“填充”、“居中”、“平铺”或“拉伸” |
background.image | 字符串 | 图像 URL |
下列脚本示例用于在文本微件中，根据所选城市的人口，为城市名称设置不同文本大小和背景颜色：
// Get the list of selected features from the data source
var sf = $dataSources["dataSource_id"].selectedFeatures;
// Get the population of the first selected feature
var pop = First(sf).Population;
// Initialize style variables
var bgColor = "";
var txtStyles = null;
// Apply style based on population threshold
if (pop > 500000) {
bgColor = "rgba(238, 246, 255, 1)";
txtStyles = {
size: 34,
bold: true
};
} else {
bgColor = "rgba(255, 216, 219, 1)";
txtStyles = {
size: 25,
italic: true
};
}
return {
background: {
color: bgColor
},
text: txtStyles
};按钮微件样式
按钮微件支持以下样式属性：
| 属性 | 类型 | 描述 |
|---|---|---|
text | 字典 | 用于设置文本样式 |
text.size | 数字 | 字号（以像素为单位） |
text.color | 字符串 | 文本颜色 |
text.bold | 布尔 | 说明是否使用粗体 |
text.italic | 布尔 | 说明是否使用斜体 |
text.underline | 布尔 | 说明是否使用下划线 |
text.strike | 布尔 | 说明是否使用删除线 |
icon | 字典 | 用于设置图标样式 |
icon.name | 字符串 | 图标名称 |
icon.position | 字符串 | “左对齐”或“右对齐” |
icon.size | 数字 | 图标大小（以像素为单位） |
icon.color | 字符串 | 用于在图标为 SVG 格式时设置图标颜色 |
背景 | 字典 | 用于设置背景 |
background.color | 字符串 | 背景色 |
background.fillType | 字符串 | “适应”、“填充”、“居中”、“平铺”或“拉伸” |
background.image | 字符串 | 图像 URL |
边框 | 字典 | 用于设置边框样式 |
border.border | 字典 | 为所有边框设置相同的样式 |
border.border.type | 字符串 | “实线”、“虚线”、“点划线”或“双线” |
border.border.color | 字符串 | 边框颜色 |
border.border.width | 数字 | 边框宽度 |
border.borderLeft | 字典 | 设置左边框样式。 字典格式与 border.border 相同。 |
border.borderRight | 字典 | 设置右边框样式。 字典格式与 border.border 相同。 |
border.borderTop | 字典 | 设置上边框样式。 字典格式与 border.border 相同。 |
border.borderBottom | 字典 | 设置下边框样式。 字典格式与 border.border 相同。 |
borderRadius | 字典 | 用于设置边框半径 |
borderRadius.unit | 字符串 | “px”、“rem”、“em”、“vw”或“%” |
borderRadius.number | Number[] | [左上角半径, 右上角半径, 右下角半径, 左下角半径] |
提示：
对于按钮图标，您可以从可用的图标集中选择，也可以上传自己的图标。 如果您上传了图标，可以在 Arcade 脚本中通过其名称引用此图标。
以下脚本示例用于根据订单的交付状态，更改按钮微件图标：
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};列表微件样式
列表微件支持每个列表项的以下样式属性：
| 属性 | 类型 | 描述 |
|---|---|---|
背景 | 字典 | 用于设置背景 |
background.color | 字符串 | 背景色 |
background.fillType | 字符串 | “适应”、“填充”、“居中”、“平铺”或“拉伸” |
background.image | 字符串 | 图像 URL |
边框 | 字典 | 用于设置边框样式 |
border.border | 字典 | 为所有边框设置相同的样式 |
border.border.type | 字符串 | “实线”、“虚线”、“点划线”或“双线” |
border.border.color | 字符串 | 边框颜色 |
border.border.width | 数字 | 边框宽度 |
border.borderLeft | 字典 | 设置左边框样式。 字典格式与 border.border 相同。 |
border.borderRight | 字典 | 设置右边框样式。 字典格式与 border.border 相同。 |
border.borderTop | 字典 | 设置上边框样式。 字典格式与 border.border 相同。 |
border.borderBottom | 字典 | 设置下边框样式。 字典格式与 border.border 相同。 |
borderRadius | 字典 | 用于设置边框半径 |
borderRadius.unit | 字符串 | “px”、“rem”、“em”、“vw”或“%” |
borderRadius.number | Number[] | [左上角半径, 右上角半径, 右下角半径, 左下角半径] |
以下脚本示例用于为具有高优先级的列表项设置不同的背景颜色：
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Arcade 的最佳实践与用法说明
下方列出了使用 Arcade 脚本生成动态内容和动态样式的最佳实践与用法说明：
- Experience Builder 中的 Arcade 脚本只支持FeatureLayer、OrientedImageryLayer、SubtypeGroupLayer 和 SubtypeSublayer 图层类型。
- 应用于数据源或数据视图的过滤器和空间过滤器无法自动添加至配置文件数据源。 可使用 getFilteredFeatureSet 函数手动同步过滤器。
- 对于微件格式化配置文件，Arcade 脚本在您运行或应用此脚本时，会使用当前数据执行测试。 例如，如果您使用 selectedFeatures 但未选中任何内容，脚本将显示消息“Arcade 脚本无效”，除非您已处理了未选中任何内容的情况。
- 对于列表项微件格式化配置文件，当您运行或应用 Arcade 脚本时，此脚本会使用第一个列表项执行测试。
- 每个应用程序页面都最多支持 10 个使用微件格式化配置文件的 Arcade 表达式，包括 Arcade 脚本设置的动态内容和动态样式。
- 如果您在多个位置使用同一个聚合值，则应使用添加数据窗口中的 Arcade 选项添加一次该值，然后再在其他位置使用。
- 微件格式化配置文件中使用的字段未自动添加至所用的字段列表。 如果其他位置未引用这些字段，则 Arcade 脚本可能出现运行错误，导致输出错误。