工具栏小组件 (可应用主题)
简介
 |
• 工具栏小组件在 ThingWorx 9.2.x 及更高版本中可用。
• 该小组件可在平台中用作标准包含，也可用作 web 组件 (可从 SDK 导入)。
|
工具栏小组件会在混搭中显示响应式工具栏。小组件融合了可配置的常用元素，以便以精简形式显示常用功能。在使用可处理数据 (例如“栅格”、“列表”和“图表”) 的小组件时，可使用工具栏创建筛选器、触发服务以及修改视图。
有关配置小组件以及将操作绑定至栅格小组件的方法，请观看以下视频。要在新选项卡中打开视频，请单击播放器上的标题。
工具栏小组件由以下内容组成：
• 数据筛选器 - 其或包括一个简单筛选框，或包括一个数据片段筛选器。
| | 将小组件拖至工作区时，默认情况下会启用简单筛选器。 |
简单筛选器 | 数据片段筛选器 |
 |  |
• 操作 - 其包含用户定义的操作
工具栏操作
可使用工具栏小组件对其他小组件 (例如“网格”、“列表”和“图表”) 执行以下操作。
• 按钮
• 下拉列表
• 链接
• 切换
下图显示了若干示例操作。
这些与筛选器相结合的操作将作为混搭中数据的有效工具栏。工具栏可根据需求包含多个按钮、下拉列表、链接或切换按钮。如果操作所占用的空间超出范围，则工具栏会相应地在下拉列表中显示用户定义的操作。此时将出现溢出控制图标，您可单击该图标以查看操作的下拉列表。
下图中的示例为一个带有数据片段筛选器和操作的工具栏小组件。
1. 数据筛选器 - 数据片段筛选器。可使用 FilterType 属性来设置筛选器。
2. 数据片段 - 此区域用于显示由数据片段筛选器设置的筛选器数据片段。
3. 操作 - 此区域包含按钮、下拉列表、链接和切换按钮。
4. 溢出控制图标
可使用以下属性表中提及的属性来配置数据筛选器。有关配置操作的信息，请参阅使用信息表定义工具栏操作。
数据格式
• FilterData：
如果在工具栏中使用数据片段筛选器，而非简单筛选框，则必须创建一个带有“字段定义”的“数据形状”，并将其用作混搭中数据的筛选器类别。这些字段定义需要映射，并且每个字段都代表一个将显示在筛选器下拉列表中的类别。
下图显示了数据形状中的字段定义示例。
下图显示了基于字段定义的小组件中的示例筛选器类别下拉列表。
• ActionsData：
要在工具栏中创建操作，就必须使用在 Platform 中可用作系统实体的 ToolbarAction 数据形状。在创建用于格式化信息表输出的服务时使用此预定义数据形状，然后绑定混搭中的服务以在工具栏中创建操作。有关详细信息，请参阅使用信息表定义工具栏操作。
绑定数据源
• 对于数据筛选器 - 要将工具栏小组件绑定至数据筛选器源，请执行以下步骤：
a. 在“数据”面板上添加数据服务，该服务能够为数据筛选器返回适当数据格式的信息表。
b. 将数据服务的 All Data 属性绑定至小组件的 FilterData 属性。
c. 选择工具栏小组件，然后使用“属性”面板上的属性来配置数据筛选器。
d. 单击“保存”，然后单击“查看混搭”。
• 对于操作 - 要将工具栏小组件绑定至操作数据源，请执行以下步骤：
a. 在“数据”面板上添加数据服务，该服务能够为各个操作返回适当数据格式的信息表。
b. 将数据服务的 All Data 属性绑定至小组件的 ActionsData 属性。
c. 在绑定数据源时，“属性”面板会为您所在服务中定义的每个操作显示一组新的属性和事件。
d. 选择工具栏小组件，然后使用“属性”面板上的以下属性来配置混搭中其他小组件 (例如栅格、列表和图表) 的操作。
| | 属性名称将基于您所在服务中的 actionId 值显示。 |
操作 | 属性/事件名称 | 说明 | 示例 |
|---|---|---|---|
按钮 | <actionId>_Clicked | 单击该按钮后会触发可绑定事件。 | Button1_Clicked |
<actionId>_Disabled | 禁用工具栏上的按钮操作。 | Button1_Disabled | |
<actionId>_Visible | 控制工具栏上操作的可见性。 | Button1_Visible | |
下拉列表 | <actionId>_Disabled | 禁用工具栏上的下拉列表操作。 | Dropdown1_Disabled |
<actionId>_SelectedText | 此可绑定属性可用于设置和检索下拉列表操作中选定文本的值。 | Dropdown1_SelectedText | |
<actionId>_SelectedTextChanged | 更改下拉列表中的选定文本后会触发可绑定事件。 | Dropdown1_SelectedTextChanged | |
<actionId>_Visible | 控制工具栏上下拉列表操作的可见性。 | Dropdown1_Visible | |
链接 | <actionId>_Disabled | 禁用工具栏上的链接操作。 | Link1_Disabled |
<actionId>_Visible | 控制工具栏上链接操作的可见性。 | Link1_Visible | |
切换 | <actionId>_Disabled | 禁用工具栏上的切换操作。 | Toggle1_Disabled |
<actionId>_State | 此可绑定属性可用于设置和检索切换按钮操作的状态。 | Toggle1_State | |
<actionId>_StateChanged | 更改切换操作的状态后会触发可绑定事件。 | Toggle1_StateChanged | |
<actionId>_Visible | 控制工具栏上切换按钮操作的可见性。 | Toggle1_Visible |
f. 单击“保存”，然后单击“查看混搭”。
属性表
下面列出了“工具栏”小组件的属性。
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
ActionsData | 使用 ToolbarAction 数据形状格式化以显示和配置工具栏操作项的信息表数据源。 | INFOTABLE | 不适用 | Y | N | ||
CategoryLabel | 显示在筛选器类别下拉列表上方的文本。 | STRING | 筛选条件 | N | Y | ||
ConditionLabel | 显示在筛选条件下拉列表上方的文本。 | STRING | 条件 | N | Y | ||
CustomClass | 用户定义的 CSS 类，应用于小组件顶层 div。 可以输入多个类，以空格作为分隔符。 | STRING | 不适用 | Y | N | ||
Disabled | 禁用混搭中的小组件。 小组件会在混搭中显示，但无法单击小组件或将其选中。 | BOOLEAN | False | Y | N | ||
FilterChipPosition | 为数据筛选器设置数据片段容器的位置。可在小组件的顶部或底部显示数据片段。 | STRING | 底部 | N | N | ||
FilterData | 包含要在数据片段筛选器下拉列表中显示的项数据的信息表源。 | INFOTABLE | 不适用 | Y | N | ||
FilterDateOrder | 为在数据片段筛选器中显示的日期设置年、月、日的顺序。 选项包括“自动”、“日-月-年”、“月-日-年”和“年-月-日”。 | STRING | Auto | N | N | ||
FilterDisclosureType | 将用于显示和隐藏筛选器数据片段的元素类型设置为“显示链接”或“按钮”。 | STRING | 显示链接 | N | N | ||
FilterFormatToken | 使用 “DD-MM-YY” 模式格式化数据片段筛选器日期。格式区分大小写并会覆盖 FilterDateOrder 属性。 此语法遵循 ISO 格式。 | STRING | 不适用 | N | Y | ||
FilterType | 设置筛选器类型。 可显示简单筛选框或使用数据片段筛选器小组件。选择“无”可隐藏筛选器。
| STRING | 筛选框 | N | N | ||
HideFilterSeparator | 隐藏工具栏中用于分隔数据筛选器的竖线。
| BOOLEAN | False | N | N | ||
LatitudeLabel | 使用数据片段筛选器按位置进行筛选时，显示在纬度输入框上方的文本。 | STRING | Latitude | N | Y | ||
LongitudeLabel | 使用数据片段筛选器按位置进行筛选时，显示在经度输入框上方的文本。 | STRING | Longitude | N | Y | ||
Query | 用于检索已筛选数据集的 JSON 查询。 | QUERY | 不适用 | Y | N | ||
QueryChanged | 更改筛选器小组件查询后会触发事件。 | 不适用 | 不适用 | Y | N | ||
RangeEndValueLabel | 使用数据片段筛选器筛选某一范围的值时，显示在第二个输入框上方的文本。 | STRING | Value 2 | N | Y | ||
RangeStartValueLabel | 使用数据片段筛选器筛选某一范围的值时，显示在第一个输入框上方的文本。 | STRING | Value 1 | N | Y | ||
ResetToDefaultValue | 将此小组件的输入重置为其默认值。 | 不适用 | 不适用 | Y | N | ||
ShowCategoryListFilter | 将筛选框添加至筛选器类别的下拉列表中。 | BOOLEAN | False | Y | N | ||
ShowHideFilters | 隐藏信息显示控件，并展开数据筛选器小组件的数据片段容器。 | BOOLEAN | True | N | N | ||
SortFilter | 按字母顺序对数据筛选器类别的选项列表进行排序。 | BOOLEAN | True | N | N | ||
SimpleFilterChanged | 修改筛选框中的字符串后会触发事件。 | 不适用 | 不适用 | Y | N | ||
SimpleFilterHintText | 设置筛选框的提示文本。 | STRING | 筛选器 | N | Y | ||
SimpleFilterLabel | 用于设置筛选框的标签。 | STRING | 不适用 | Y | Y | ||
SimpleFilterPosition | 设置筛选框在工具栏上的位置。可将该框放置在“左”、“右”或“居中”区域。 当将位置设置在“居中”区域时，列表中会显示一个 SimpleFilterAlignment 属性。 | STRING | 左 | N | N | ||
SimpleFilterAlignment | 设置位于工具栏中心区域的筛选框的对齐方式。可将该框“左”、“右”或“居中”对齐。 | STRING | 左 | Y | N | ||
SimpleFilterString | 用于在简单筛选框中设置或检索字符串。 | STRING | 不适用 | Y | N | ||
SimpleFilterWidth | 用于设置筛选框的宽度。 | NUMBER | 273 | Y | N | ||
TabSequence | 设置按 Tab 键时小组件的序号。 | NUMBER | 0 | N | N | ||
UnitsLabel | 使用数据片段筛选器按位置或日期进行筛选时，显示在下拉列表上方用于设置单位的文本。 | STRING | 单位 | N | Y | ||
ValueLabel | 显示在输入框上方的文本，其中包含数据片段筛选器中的条件值。 | STRING | 值 | N | Y |