设计 Flexcard 样式

通过设计单个元素、元素内部字段和整个状态的样式，配置 Flexcard 的外观。配置背景、文本和边框；调整维度和元素间距；应用类和内联样式；使您的元素具有响应性等。

1. 从应用程序启动程序中，查找并选择 Flexcard。
2. 展开 Flexcard 并选择版本。
3. 如果需要，停用 Flexcard 以编辑 Flexcard。
4. 在“样式”选项卡上，选择您保存的自定义样式，或根据需要配置样式设置。
5. 要保存设置以便重复使用，请在自定义样式中单击，然后选择另存为。

• 将条件样式添加到 Flexcard 元素
  通过有条件地将样式应用到 Flexcard 元素，向用户显示最相关的信息。在满足基于数据字段值的条件时，更改样式功能，例如文本颜色、背景图像和响应性。例如，在账单状态过期时，在账单 Flexcard 周围添加红色边框。
• 配置 Flexcard 元素维度
  根据贵公司或机构的风格，设置 FlexCard 的尺寸。使用 CSS 值设置 Flexcard 元素的高度属性。打开响应，以便宽度动态调整到页面的可见区域。例如，在更小的设备上，将联系人名字和姓氏的字段宽度扩展到整个页面宽度。为获得更好的用户体验，在笔记本电脑和台式机等较大设备上将宽度限制为 50%。
• 为 Flexcard 创建自定义 CSS 类
  在设置 Flexcard 时，通过在代码编辑器中创建自定义 CSS 类来扩展预配置的样式选项。Omnistudio 会在每次保存 Flexcard 时将 CSS 类保存在 Salesforce 附件中。激活 Flexcard 后，Omnistudio 会将 CSS 文件添加到生成的 Lightning Web 组件软件包中。CSS 文件对其他 Flexcard 元素或元素内部支持的字段可用。
• 将自定义 CSS 应用到 Flexcard
  应用样式表中的 CSS 类，例如全局 Salesforce Lightning 设计系统 (SLDS) 和 Newport。或者，应用您在构建 Flexcard 时创建的类。
• 覆盖全局 SLDS 或 Newport 样式
  通过覆盖 Flexcard 的全局 SLDS 样式来应用您自己的品牌。例如，如果 Flexcard 需要跨多个组件的特定外观，请创建自定义 SLDS 样式，并作为静态资源加载到 Flexcard。对于元素上的微小样式更改，我们建议您使用“样式”选项卡中的设置。

配置 Flexcard 元素维度

根据贵公司或机构的风格，设置 FlexCard 的尺寸。使用 CSS 值设置 Flexcard 元素的高度属性。打开响应，以便宽度动态调整到页面的可见区域。例如，在更小的设备上，将联系人名字和姓氏的字段宽度扩展到整个页面宽度。为获得更好的用户体验，在笔记本电脑和台式机等较大设备上将宽度限制为 50%。

1. 选择 Flexcard 上的元素。
2. 在“样式”选项卡上，要设置相对于视口的默认固定宽度，调整滑块或在画布上拖动元素的边框。

   元素的宽度是 12 列网格的一到 12 个部分。例如，如果您选择 6，元素将占据可用水平空间的 50%。

   

   备注

   您仅可在子卡上使用滑块调整州元素的维度。

3. 如果需要，打开响应，然后为每个视口输入宽度。

   当您使元素响应时，Omnistudio 会将元素的宽度调整到最小的视口断点，以便在移动设备上用作新的默认值。

4. 如果需要，通过从画布上的视口选项列表中选择不同的设备来测试元素的响应。
   

   

   提示

   通过将鼠标悬停在元素上或选择元素，轻松识别响应元素。响应元素会在画布上显示名称旁边的。

响应主题和 CaseId 字段元素

对于给定的客户，您想要在中型和大型视口中并排显示主题和 CaseId 字段元素，并在小型和小型视口中堆叠。

将主题元素的维度设置为这些设置：

• 响应式：打开

• 大滑块和中滑块：10

• 滑块越来越小：12

将 CaseId 元素的维度设置为这些设置：

• 响应式：打开

• 大滑块和中滑块：2

• 滑块越来越小：12

为 Flexcard 创建自定义 CSS 类

在设置 Flexcard 时，通过在代码编辑器中创建自定义 CSS 类来扩展预配置的样式选项。Omnistudio 会在每次保存 Flexcard 时将 CSS 类保存在 Salesforce 附件中。激活 Flexcard 后，Omnistudio 会将 CSS 文件添加到生成的 Lightning Web 组件软件包中。CSS 文件对其他 Flexcard 元素或元素内部支持的字段可用。

警告

谨慎使用自定义 CSS，避免将 DOM 元素定向到您不拥有的组件。更改组件的内部结构可能会破坏您的 CSS。Salesforce 可能随时更新组件实施，Salesforce 支持无法帮助解决自定义 CSS 问题。

1. 在 Flexcard 页眉中，单击，然后选择添加自定义 CSS。
2. 输入自定义类。
3. 要在页面页眉中将这些样式加载为样式表，请打开加载为全局 CSS。

   如果没有，Omnistudio 仅会在 Flexcard 的标题中加载样式。

4. 保存更改。

将自定义 CSS 应用到 Flexcard

应用样式表中的 CSS 类，例如全局 Salesforce Lightning 设计系统 (SLDS) 和 Newport。或者，应用您在构建 Flexcard 时创建的类。

1. 选择 Flexcard 上的元素。
2. 在“样式”选项卡的“自定义 CSS”下，根据需要输入 CSS 类名称。
   

   备注

   内联 CSS 样式会覆盖容器和元素类。

3. 要将自定义类应用到元素，在“属性”面板中，输入 CSS 类作为附加或额外类。

   Omnistudio 支持图标、数据表、图像和切换的自定义类。

具有交替背景颜色的分组数据表元素

您有一个数据表，显示按个案类型分组的客户个案。

• 要替换正文行的背景颜色并为组标题设置不同的背景颜色：
  1. 创建这些自定义 CSS 类：

     • 数据表元素的alt-table-rows

     • 小组标题的alt-bg-group-wrapper

     .alt-table-rows .tableRow:nth-child(even) {
         background:#cccccc;
     }
     
     .alt-table-rows .tableRow:nth-child(odd) {
         background:#ebebeb;
     }
     
     .alt-table-rows .alt-bg-group-wrapper.tableRow {
         background-color: #000000;
         color: #ffffff;
     }
     
     .branded-header {
         font-variant: small-caps;
         border-top: 1px dotted #8d1818;
         border-bottom: 1 px dotted #8d1818;
         padding: 1rem;
         color: #999999;
     }
     

  2. 在“样式”选项卡的“自定义类”中，输入 alt-table-rows。
  3. 在属性中，输入 alt-bg-group-wrapper 作为附加或额外类。

覆盖全局 SLDS 或 Newport 样式

通过覆盖 Flexcard 的全局 SLDS 样式来应用您自己的品牌。例如，如果 Flexcard 需要跨多个组件的特定外观，请创建自定义 SLDS 样式，并作为静态资源加载到 Flexcard。对于元素上的微小样式更改，我们建议您使用“样式”选项卡中的设置。

重要

直接在 Flexcard 上加载自定义 Newport 样式会覆盖自定义全局 Newport 样式。

1. 获取 Flexcard 主题的全局样式：
   • SLDS：见Lightning设计系统下载。
   • 新端口：请参阅将全局品牌应用于 Omniscripts。
2. 根据需要自定义样式。

   见Lightning应用程序和组件。

3. 从压缩文件上传自定义样式作为静态资源。

   请参阅创建静态资源。

4. 从“设置”中，展开“样式选项”部分，并输入静态资源名称。
   请参阅配置 Flexcard 设置。