用例开发WorkshopCore concepts设计

注意:以下翻译的准确性尚未经过验证。这是使用 AIP ↗ 从原始英文文本进行的机器翻译。

设计

Workshop的设计允许构建者配置模块的用户界面组织方式。Workshop模块的主要设计组件(标题、页面、部分和覆盖)将在下文中详细描述。可以通过选择设计侧边栏面板并选择要配置的元素,或在主模块视图中选择元素来编辑设计元素。

标题

Workshop模块中的标题用作模块范围的工具栏,用于显示模块标题、标签和按钮。创建新模块时,模块标题将显示在屏幕顶部:

Screenshot of a Workshop module header

选择标题时,点击加号(+)可以将微件如标签和按钮组添加到标题中,使它们在Workshop模块的所有页面中都易于访问。如果模块标题被隐藏,可以通过设计侧边栏面板顶部列表中的标题选项选择它。

配置选项

为模块标题提供的配置选项包括:

  • 切换标题可见性。
  • 为标题设置一个标题。此标题还将用于设置浏览器标签或Carbon工作区标签名称。如果未设置标题,将使用Workshop模块资源名称。
  • 选择自定义颜色为标题文本。
  • 通过选择图标或上传图像启用应用程序徽标。
    • 图标:选择一个图标和一个图标颜色。
    • 图像:从您的Palantir资源中选择图像或从计算机上传。
      • 自定义图像高度。
      • 图像位置:为水平标题选择左、中或右;为垂直标题选择顶部或底部。
  • 切换用户在查看模式中收藏模块的能力。
  • 为标题选择一个背景颜色。
  • 选择标题的方向:模块顶部的水平或左侧的垂直。
  • 为水平标题设置标题高度。

Configuration options for a Workshop module header

配置后,带有自定义图像的水平标题可能如下图所示:

Screenshot of a horizontal module header, configured with a title, tabs, and an export button

您也可以选择配置一个垂直标题,它将在模块的左侧显示。一旦启用垂直方向,您将可以进行额外的设置以进行自定义:

  • 设置垂直标题的宽度。
  • 启用可折叠性,并可以选择默认折叠状态。
  • 为折叠状态添加自定义图像,可以从您的Palantir资源中选择或从计算机上传。
    • 要显示折叠图像,您必须首先设置标题图像。如果选择图标,则在折叠状态下将显示所选图标。

Configuration options for a vertical module header

启用折叠标题时,按钮组和标签微件将具有折叠状态,仅显示图标;在此状态下文本将被省略。所有其他微件将在模块标题折叠时隐藏。

下面的示例显示了配置的垂直模块标题:

Screenshot of a vertical module header, configured with a title, tabs, and an export button

及其折叠状态:

Screenshot of a collapsed vertical module header, configured with a title, tabs, and an export button

页面

页面允许模块构建者在Workshop中构建复杂的多屏应用程序。每个页面都是一个空白画布,模块构建者可以在其上配置一组独特的微件以支持目标工作流。只有模块标题将在页面之间保持不变,以提供给定模块的整体工具栏。

在上面显示的示例模块标题中,标签微件中的每个标签都可以配置为选择一个页面,每个页面配置有不同的用户工作流。

添加页面

可以从屏幕左侧的设计面板中添加页面。要添加页面,请打开设计面板,然后选择顶部的加号(+)。接下来,选择新页面选项,如下所示:

The New Page option from the Layout panel in Workshop.

添加后,新页面将在设计面板中自动选择,您可以开始配置其内容。下图展示了初始化时未配置的默认页面,其中在模块范围标题下有两个垂直分割的部分:

A workshop page is separated into two sections, with more layout options below.

您还可以使用页面底部的设计模板选择器探索其他设计模板。您可以通过将鼠标悬停在图标上预览每个设计的外观。如果您希望使用某个模板,可以选择该图标;页面设计将更新为您选择的那个。

A Workshop page is formatted with an inbox-style layout.

在编辑应用程序时,页面按创建顺序列出。编辑视图中看到的页面顺序对模块行为没有影响。

有关如何通过添加和配置部分来向页面添加内容的更多详细信息,请查看下面的部分文档

使用设计事件切换页面

为了在模块的页面之间导航用户,构建者可以使用设计事件。这可以从微件中触发,例如按钮组或标签。

部分

部分是每个页面和覆盖的组件,允许模块构建者细分用户界面。每个部分配置为包含一个或多个微件,或一个设计,该设计本身可能包含一个或多个部分。

部分设计

要访问部分的可用设计选项,请在模块中的任何空部分上选择设置设计并查看设计选项,如下所示:

Workshop layout selector

当前支持的设计选项包括:

  • 列: 允许部分垂直分割,以有效地在模块中创建一个新列。
  • 行: 允许部分水平分割,以有效地在模块中创建一个新行。在行设计中提供了启用滚动选项。
  • 标签: 在部分顶部添加标签,并允许模块构建者配置部分中每个标签中的不同微件配置。
  • 流: 将当前部分变为垂直滚动容器,以允许模块构建配置超出模块显示界面的微件。
  • 工具栏: 将部分配置为水平工具栏,优化用于较小的微件,如按钮组或指标卡,以及单个输入微件。
  • 循环: 循环设计允许构建者循环遍历一个对象集,使用该对象作为输入为集合中的每个对象显示一个嵌入的模块。了解更多信息,请参阅循环设计文档

复制部分

剪切、复制和粘贴选项可用于模块中的整个部分和单个微件,为更快的模块构建体验提供工具。

粘贴部分或微件时,构建者有两种选择来管理新部分或微件的输入变量:

  • 使用相同输入变量粘贴: 粘贴一个新部分或微件,重用复制部分或微件的输入变量。
  • 使用重复输入变量粘贴: 粘贴一个新部分或微件,使用与复制部分或微件的输入变量匹配的新创建输入变量。

The cut, copy, and paste options for a section or widget are highlighted.

覆盖

当某些部分仅在工作流程中上下文相关时才应出现时,可以使用覆盖。覆盖将作为所选页面之上的一层出现。

与页面类似,您可以从屏幕左侧的设计面板中添加覆盖。要添加覆盖,请选择顶部的加号(+)。接下来,选择新覆盖选项,如下所示:

The New overlay option from the Layout panel in Workshop.

配置选项

  • 覆盖名称: 此设置确定在Workshop编辑器中引用此覆盖的名称。特别是在覆盖事件中相关。
  • 显示覆盖标题: 此设置确定是否显示默认覆盖标题。覆盖标题附带默认关闭按钮,并提供其他配置选项:
    • 标题: 此设置允许配置将在覆盖标题中显示的标题。
    • 图标: 此设置允许选择将在覆盖标题中标题左侧显示的图标。
  • 基于变量的可见性: 此设置允许选择一个布尔变量,以确定覆盖是否应可见。此设置允许在模块加载时初始可见状态的覆盖,并启用对覆盖可见状态的高级控制。当与嵌入模块结合使用时,此设置也可能很有用,因为这允许通过设置变量值事件在父模块和子模块之间共享和设置覆盖状态。更改覆盖可见状态的设计事件将更新此变量的值。
  • 关闭时: 此选项允许在关闭覆盖时可选地配置运行一个Workshop 事件。如果基于变量的可见性配置了来自对象属性或变量变换的布尔变量,则此事件可用于重置导致覆盖处于打开状态的条件。
  • 点击背景关闭覆盖: 此切换决定覆盖是否应由于用户选择覆盖之外的区域而关闭。
  • 在覆盖后添加背景: 此切换决定是否应在覆盖后添加不透明背景。默认情况下启用,有助于将用户的注意力集中在打开的覆盖上。

覆盖类型

目前,Workshop支持两种覆盖类型:抽屉式导航和模态框。下面详细解释了这些类型。

抽屉式导航

抽屉式导航是从屏幕侧面滑出的覆盖。可用的配置选项包括:

  • 位置: 选择右侧或左侧位置以确定抽屉将从屏幕的哪一侧出现。
  • 大小: 设置抽屉的宽度。

模态框

模态框是出现在屏幕中央的覆盖。大小是特定于模态框覆盖的唯一可用配置选项。

样式格式

Workshop提供对各种样式格式设置的控制,以便应用构建者可以更灵活地定制其模块的设计和感觉。配置选项包括标题格式、背景颜色、边框样式等。这些选项在页面、部分和微件级别可用。

标题格式

当在部分上启用标题时,可以添加标题格式选项。有三种可用格式:

  • 块状: 部分标题位于正文上方的独立容器中。
  • 包含: 部分标题看起来像是在正文区域内包含。
  • 浮动: 部分标题出现在正文区域上方,并在父部分的背景上可见。
Image demonstrating the three types of header formats available

背景颜色

可以为页面、部分和微件添加背景颜色,以帮助视觉上分割模块的各个部分。有五种可用的色调,适用于亮模式和暗模式,以及透明选项。

Background color options Background color examples

边框样式

可以在部分和微件上配置边框样式,使模块内看起来具有不同的提升级别。有四个可用选项:

  • 有边框: 标准的单一轮廓围绕部分或微件。
  • 外部投影: 边框外部的阴影,使部分或微件看起来有提升。
  • 内部阴影: 边框内部的阴影,使部分或微件看起来有压抑。
  • 无边框: 没有轮廓,使部分或微件融入背景。
Border style options Border style examples

填充控制

可以为页面和部分配置填充,以在所有子组件周围设置一致的填充量或空间。填充在组件之间增加空间,以提供模块的分离和透气性。有五个可用选项:

  • 无填充: 标准选项,不在子组件周围添加填充。
  • 紧凑: 在子组件周围添加16像素的填充。
  • 常规: 在子组件周围添加24像素的上下填充和48像素的左右填充。
  • 大: 在子组件周围添加40像素的上下填充和62像素的左右填充。
  • 自定义: 允许自定义定义在子组件周围设置的填充级别。

内部部分样式: 可选选择一种预定义的部分样式应用于所有子部分:

Demonstration of various styles of inner section padding style