Back to Details

sf-flexcard

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

sf-flexcard: OmniStudio FlexCard Creation and Validation

sf-flexcard: OmniStudio FlexCard 创建与验证

Expert OmniStudio engineer specializing in FlexCard UI components for Salesforce Industries. Generate production-ready FlexCard definitions that display at-a-glance information with declarative data binding, Integration Procedure data sources, conditional rendering, and proper SLDS styling. All FlexCards are validated against a 130-point scoring rubric across 7 categories.
专注于Salesforce Industries的FlexCard UI组件的资深OmniStudio工程师。可生成生产级FlexCard定义，通过声明式数据绑定、Integration Procedure数据源、条件渲染及标准SLDS样式，展示概览式信息。所有FlexCard均会通过涵盖7个类别的130分评分准则进行验证。

Core Responsibilities

核心职责

  1. FlexCard Authoring: Design and build FlexCard definitions with proper layout, states, and field mappings
  2. Data Source Binding: Configure Integration Procedure data sources with correct field mapping and error handling
  3. Test Generation: Validate cards against multiple data states (populated, empty, error, multi-record)
  4. Documentation: Produce deployment-ready documentation with data source lineage and action mappings
  1. FlexCard 创作：设计并构建具备合理布局、状态及字段映射的FlexCard定义
  2. 数据源绑定：配置Integration Procedure数据源，实现正确的字段映射与错误处理
  3. 测试生成：针对多种数据状态（已填充、空值、错误、多记录）验证卡片
  4. 文档编制：生成包含数据源谱系与动作映射的可部署文档

Document Map

文档地图

NeedDocumentDescription
Best practicesreferences/best-practices.mdLayout patterns, SLDS, accessibility, performance
Data bindingreferences/data-binding-guide.mdIP sources, field mapping, conditional rendering
需求文档描述
最佳实践references/best-practices.md布局模式、SLDS、可访问性、性能优化
数据绑定references/data-binding-guide.mdIP数据源、字段映射、条件渲染

CRITICAL: Orchestration Order

关键：编排顺序

FlexCards sit at the presentation layer of the OmniStudio stack. Ensure upstream components exist before building a FlexCard that depends on them.
sf-omnistudio-analyze → sf-datamapper → sf-integration-procedure → sf-omniscript → sf-flexcard (you are here)
FlexCards consume data from Integration Procedures and can launch OmniScripts. Build the data layer first, then the presentation layer.
FlexCard位于OmniStudio技术栈的展示层。在构建依赖上游组件的FlexCard前，需确保这些组件已存在。
sf-omnistudio-analyze → sf-datamapper → sf-integration-procedure → sf-omniscript → sf-flexcard（当前环节）
FlexCard从Integration Procedure获取数据，且可启动OmniScript。需先构建数据层，再构建展示层。

Key Insights

核心要点

InsightDetail
Configuration fields
OmniUiCard
uses 
DataSourceConfig
for data source bindings and 
PropertySetConfig
for card layout, states, and actions. There is NO 
Definition
field on 
OmniUiCard
in Core namespace.
Data source bindingData sources bind to Integration Procedures for live data; the IP must be active and deployed before the FlexCard can retrieve data
Child card embeddingFlexCards can embed other FlexCards as child cards, enabling composite layouts with shared or independent data sources
OmniScript launchingFlexCards can launch OmniScripts via action buttons, passing context data from the card's data source into the OmniScript's input
Designer virtual objectThe FlexCard Designer uses 
OmniFlexCardView
as a virtual list object (
/lightning/o/OmniFlexCardView/home
), separate from the 
OmniUiCard
sObject where card records are stored. Cards created via API may not appear in "Recently Viewed" until opened in the Designer.
要点详情
配置字段
OmniUiCard
使用
DataSourceConfig
进行数据源绑定，使用
PropertySetConfig
配置卡片布局、状态与动作。Core命名空间下的
OmniUiCard
无
Definition
字段。
数据源绑定数据源与Integration Procedure绑定以获取实时数据；IP必须处于激活并部署状态，FlexCard才能获取数据
子卡片嵌入FlexCard可嵌入其他FlexCard作为子卡片，实现具备共享或独立数据源的复合布局
OmniScript 启动FlexCard可通过动作按钮启动OmniScript，并将卡片数据源的上下文数据传入OmniScript的输入参数
设计器虚拟对象FlexCard设计器使用
OmniFlexCardView
作为虚拟列表对象（
/lightning/o/OmniFlexCardView/home
），与存储卡片记录的
OmniUiCard
sObject相互独立。通过API创建的卡片在设计器中打开前，可能不会显示在“最近查看”列表中。

Workflow (5-Phase Pattern)

工作流（5阶段模式）

Phase 1: Requirements Gathering

阶段1：需求收集

Before building, clarify these with the stakeholder:
QuestionWhy It Matters
What is the card's purpose?Determines layout type and data density
Which data sources are needed?Identifies required Integration Procedures
What object context does it run in?Determines record-level vs. list-level display
What actions should the card expose?Drives button/link configuration and OmniScript integration
What layout best fits the use case?Single card, list, tabbed, or flyout
Are there conditional display rules?Fields or sections that appear/hide based on data values
构建前，需与干系人明确以下内容：
问题重要性
卡片的用途是什么？决定布局类型与数据密度
需要哪些数据源？确定所需的Integration Procedure
运行的对象上下文是什么？决定是记录级还是列表级展示
卡片需暴露哪些动作？驱动按钮/链接配置及OmniScript集成
哪种布局最适合该用例？单卡片、列表、标签页或弹出式
是否有条件显示规则？根据数据值显示/隐藏字段或区域

Phase 2: Design & Layout

阶段2：设计与布局

Card Layout Options

卡片布局选项

Layout TypeUse CaseDescription
Single CardRecord summaryOne card displaying fields from a single record
Card ListRelated recordsRepeating cards bound to an array data source
Tabbed CardMulti-contextMultiple states displayed as tabs within one card
Flyout CardDetail on demandExpandable detail panel triggered from a summary card
布局类型用例描述
单卡片记录摘要展示单条记录字段的单个卡片
卡片列表关联记录绑定到数组数据源的重复卡片
标签页卡片多上下文在单个卡片内以标签页形式展示多个状态
弹出式卡片按需查看详情从摘要卡片触发的可展开详情面板

Data Source Configuration

数据源配置

Each FlexCard data source connects to an Integration Procedure (or other source type) and maps response fields to display elements.
FlexCard → Data Source (type: IntegrationProcedure)
         → IP Name + Input Mapping
         → Response Field Mapping → Card Elements
  • Map IP response fields to card display elements using 
    {datasource.fieldName}
    merge syntax
  • Configure input parameters to pass record context (e.g., 
    {recordId}
    ) to the IP
  • Set data source order when multiple sources feed the same card
每个FlexCard数据源均连接到Integration Procedure（或其他类型的数据源），并将响应字段映射到展示元素。
FlexCard → 数据源（类型：IntegrationProcedure）
         → IP名称 + 输入映射
         → 响应字段映射 → 卡片元素
  • 使用
    {datasource.fieldName}
    合并语法将IP响应字段映射到卡片展示元素
  • 配置输入参数以传递记录上下文（如
    {recordId}
    ）到IP
  • 当多个数据源为同一卡片提供数据时，设置数据源顺序

Action Button Design

动作按钮设计

Action TypePurposeConfiguration
Launch OmniScriptStart a guided processOmniScript Type + SubType, pass context params
NavigateGo to record or URLRecord ID or URL template with merge fields
Custom ActionPlatform event, LWC, etc.Custom action handler with payload mapping
动作类型用途配置
启动OmniScript启动引导流程OmniScript类型+子类型，传递上下文参数
导航跳转到记录或URL记录ID或带合并字段的URL模板
自定义动作平台事件、LWC等带负载映射的自定义动作处理器

Conditional Visibility

条件可见性

  • Show/hide fields based on data values using visibility conditions
  • Show/hide entire card states based on data source results
  • Display empty-state messaging when data source returns no records
  • 根据数据值使用可见性规则显示/隐藏字段
  • 根据数据源结果显示/隐藏整个卡片状态
  • 当数据源无返回记录时，显示空状态提示信息

Phase 3: Generation & Validation

阶段3：生成与验证

  1. Generate the FlexCard definition JSON
  2. Validate all data source references resolve to active Integration Procedures
  3. Run the 130-point scoring rubric (see Scoring section below)
  4. Verify merge field syntax matches IP response structure
  5. Check accessibility attributes on all interactive elements
  1. 生成FlexCard定义JSON
  2. 验证所有数据源引用均指向激活的Integration Procedure
  3. 运行130分评分准则（见下方评分部分）
  4. 验证合并字段语法与IP响应结构匹配
  5. 检查所有交互元素的可访问性属性

Phase 4: Deployment

阶段4：部署

  1. Ensure all upstream Integration Procedures are deployed and active
  2. Deploy the FlexCard metadata (
    OmniUiCard
    )
  3. Activate the FlexCard in the target org
  4. Embed the FlexCard in the target Lightning page, OmniScript, or parent FlexCard
  1. 确保所有上游Integration Procedure已部署并激活
  2. 部署FlexCard元数据（
    OmniUiCard
    ）
  3. 在目标组织中激活FlexCard
  4. 将FlexCard嵌入目标Lightning页面、OmniScript或父FlexCard

Phase 5: Testing

阶段5：测试

Test each FlexCard against multiple data scenarios:
ScenarioWhat to Verify
Populated dataAll fields render correctly, merge fields resolve
Empty dataEmpty-state message displays, no broken merge fields
Error stateGraceful handling when IP returns an error or times out
Multi-recordCard list renders correct number of items, pagination works
Action buttonsOmniScript launches with correct pre-populated data
Conditional fieldsVisibility rules toggle correctly based on data values
MobileCard layout adapts to smaller viewport widths
针对多种数据场景测试每个FlexCard：
场景验证内容
已填充数据所有字段正确渲染，合并字段解析正常
空数据显示空状态提示，无损坏的合并字段
错误状态IP返回错误或超时的情况下优雅处理
多记录卡片列表渲染正确数量的条目，分页功能正常
动作按钮OmniScript启动并预填充正确数据
条件字段可见性规则根据数据值正确切换
移动端卡片布局适配较小视窗宽度

Generation Guardrails

生成约束

Avoid these patterns when generating FlexCard definitions:
Anti-PatternWhy It's WrongCorrect Approach
Referencing non-existent IP data sourcesCard fails to load data at runtimeVerify IP exists and is active before binding
Hardcoded colors in stylesBreaks SLDS theming and dark modeUse SLDS design tokens and CSS custom properties
Missing accessibility attributesFails WCAG complianceAdd 
aria-label
, 
role
, and keyboard handlers
Excessive nested child cardsPerformance degrades with deep nestingLimit to 2 levels of nesting; flatten where possible
Ignoring empty statesBroken UI when data source returns no recordsConfigure explicit empty-state messaging
Hardcoded record IDsCard breaks across environmentsUse merge fields and context-driven parameters
生成FlexCard定义时需避免以下模式：
反模式问题所在正确做法
引用不存在的IP数据源卡片在运行时无法加载数据绑定前验证IP存在且已激活
样式中使用硬编码颜色破坏SLDS主题与暗黑模式使用SLDS设计令牌与CSS自定义属性
缺失可访问性属性不符合WCAG合规要求添加
aria-label
、
role
及键盘处理器
过度嵌套子卡片深层嵌套会导致性能下降最多嵌套2层；尽可能扁平化结构
忽略空状态数据源无返回记录时UI损坏配置明确的空状态提示信息
硬编码记录ID跨环境时卡片失效使用合并字段与上下文驱动的参数

Scoring Rubric (130 Points)

评分准则（130分）

All FlexCards are validated against 7 categories. Thresholds: ✅ 90+ (Deploy) | ⚠️ 67-89 (Review) | ❌ <67 (Block - fix required)
CategoryPointsCriteria
Design & Layout25Appropriate layout type, logical field grouping, responsive design, consistent spacing, clear visual hierarchy
Data Binding20Correct IP references, proper merge field syntax, input parameter mapping, multi-source coordination
Actions & Navigation20Action buttons configured correctly, OmniScript launch params mapped, navigation targets valid, action labels descriptive
Styling20SLDS tokens used (no hardcoded colors), consistent typography, proper use of card/tile patterns, dark mode compatible
Accessibility15
aria-label
on interactive elements, keyboard navigable actions, sufficient color contrast, screen reader friendly field labels
Testing15Verified with populated data, empty state, error state, multi-record scenario, and mobile viewport
Performance15Data source calls minimized, child card nesting limited (max 2 levels), no redundant IP calls, lazy loading for non-visible states
所有FlexCard均会通过7个类别进行验证。阈值：✅ 90分及以上（可部署） | ⚠️ 67-89分（需审查） | ❌ 67分以下（需修复，阻止部署）
类别分值标准
设计与布局25布局类型合适、字段分组合理、响应式设计、间距一致、视觉层次清晰
数据绑定20IP引用正确、合并字段语法规范、输入参数映射正确、多数据源协调有序
动作与导航20动作按钮配置正确、OmniScript启动参数映射正常、导航目标有效、动作标签描述清晰
样式20使用SLDS令牌（无硬编码颜色）、排版一致、正确使用卡片/磁贴模式、兼容暗黑模式
可访问性15交互元素带有
aria-label
、动作支持键盘导航、颜色对比度足够、字段标签适配屏幕阅读器
测试15已验证填充数据、空状态、错误状态、多记录场景及移动端视窗
性能15数据源调用最小化、子卡片嵌套受限（最多2层）、无冗余IP调用、非可见状态使用懒加载

Scoring Breakdown Detail

评分细节

Design & Layout (25 points)

设计与布局（25分）

CriterionPointsDescription
Layout type matches use case5Single, list, tabbed, or flyout chosen appropriately
Field grouping is logical5Related fields are visually grouped together
Responsive behavior5Card adapts to different viewport widths
Consistent spacing5Margins and padding follow SLDS spacing scale
Visual hierarchy5Primary information is prominent, secondary is de-emphasized
标准分值描述
布局类型匹配用例5单卡片、列表、标签页或弹出式选择恰当
字段分组合理5相关字段在视觉上分组展示
响应式表现5卡片适配不同视窗宽度
间距一致5边距与内边距遵循SLDS间距规范
视觉层次5主要信息突出，次要信息弱化

Data Binding (20 points)

数据绑定（20分）

CriterionPointsDescription
IP references are valid5All referenced IPs exist and are active
Merge field syntax correct5
{datasource.field}
paths resolve to actual IP response fields
Input parameters mapped5Record context passed correctly to IP inputs
Multi-source coordination5Multiple data sources load in correct order without conflicts
标准分值描述
IP引用有效5所有引用的IP均存在且已激活
合并字段语法正确5
{datasource.field}
路径与实际IP响应字段匹配
输入参数映射正确5记录上下文正确传递到IP输入参数
多数据源协调5多个数据源按正确顺序加载，无冲突

Actions & Navigation (20 points)

动作与导航（20分）

CriterionPointsDescription
Action buttons functional5All buttons trigger their configured actions
OmniScript params mapped5Context data flows correctly into launched OmniScripts
Navigation targets valid5Record and URL navigation resolves correctly
Labels are descriptive5Action labels clearly communicate what the action does
标准分值描述
动作按钮功能正常5所有按钮触发配置的动作
OmniScript参数映射正确5上下文数据正确传入启动的OmniScript
导航目标有效5记录与URL导航解析正常
标签描述清晰5动作标签清晰说明动作内容

Styling (20 points)

样式（20分）

CriterionPointsDescription
SLDS tokens used5Colors, fonts, spacing via design tokens
Consistent typography5Text sizes follow SLDS type scale
Card pattern compliance5Uses standard SLDS card or tile patterns
Dark mode compatible5No hardcoded colors; works with SLDS dark theme
标准分值描述
使用SLDS令牌5通过设计令牌设置颜色、字体、间距
排版一致5文本大小遵循SLDS字体规范
符合卡片模式5使用标准SLDS卡片或磁贴模式
兼容暗黑模式5无硬编码颜色；适配SLDS暗黑主题

Accessibility (15 points)

可访问性（15分）

CriterionPointsDescription
ARIA labels on interactive elements5Buttons, links, and inputs have accessible names
Keyboard navigable5All actions reachable via Tab, activated via Enter/Space
Color contrast sufficient5Meets WCAG 2.1 AA contrast ratio (4.5:1 for text)
标准分值描述
交互元素带有ARIA标签5按钮、链接与输入框具备可访问名称
支持键盘导航5所有动作可通过Tab键访问，Enter/Space键激活
颜色对比度足够5符合WCAG 2.1 AA对比度标准（文本为4.5:1）

Testing (15 points)

测试（15分）

CriterionPointsDescription
Populated data verified3Card renders correctly with full data
Empty state verified3Empty-state message displays properly
Error state verified3Graceful handling of IP errors
Multi-record verified3Card list renders correct items
Mobile viewport verified3Layout adapts to small screens
标准分值描述
已验证填充数据3卡片在数据完整时渲染正常
已验证空状态3空状态提示正确显示
已验证错误状态3优雅处理IP错误
已验证多记录3卡片列表渲染正确条目
已验证移动端视窗3布局适配小屏幕

Performance (15 points)

性能（15分）

CriterionPointsDescription
Data source calls minimized5No redundant or duplicate IP invocations
Child card nesting limited5Maximum 2 levels of nested child cards
Lazy loading for hidden states5Non-visible tabs/flyouts load on demand
标准分值描述
数据源调用最小化5无冗余或重复IP调用
子卡片嵌套受限5最多嵌套2层子卡片
隐藏状态懒加载5非可见标签页/弹出式按需加载

CLI Commands

CLI 命令

bash
undefined
bash
undefined

Query active FlexCards in the org

查询组织中激活的FlexCard

sf data query -q "SELECT Id,Name,DataSourceConfig,PropertySetConfig,IsActive FROM OmniUiCard WHERE IsActive=true" -o <org>
sf data query -q "SELECT Id,Name,DataSourceConfig,PropertySetConfig,IsActive FROM OmniUiCard WHERE IsActive=true" -o <org>

Retrieve a specific FlexCard by name

按名称检索特定FlexCard

sf project retrieve start -m OmniUiCard:<Name> -o <org>
sf project retrieve start -m OmniUiCard:<Name> -o <org>

Deploy a FlexCard to the target org

将FlexCard部署到目标组织

sf project deploy start -m OmniUiCard:<Name> -o <org>
sf project deploy start -m OmniUiCard:<Name> -o <org>

Retrieve all FlexCards

检索所有FlexCard

sf project retrieve start -m OmniUiCard -o <org>
sf project retrieve start -m OmniUiCard -o <org>

Deploy all OmniStudio metadata (FlexCards + dependencies)

部署所有OmniStudio元数据（FlexCard + 依赖项）

sf project deploy start -m OmniUiCard -m OmniIntegrationProcedure -m OmniScript -o <org>

---
sf project deploy start -m OmniUiCard -m OmniIntegrationProcedure -m OmniScript -o <org>

---

Data Source Binding

数据源绑定

FlexCard Data Source Configuration

FlexCard 数据源配置

The 
DataSourceConfig
field on 
OmniUiCard
contains the data source bindings as JSON. The 
PropertySetConfig
field contains the card layout, states, and field definitions.
IMPORTANT: There is NO 
Definition
field on 
OmniUiCard
in Core namespace. Use 
DataSourceConfig
for data sources and 
PropertySetConfig
for layout.
json
{
  "dataSource": {
    "type": "IntegrationProcedures",
    "value": {
      "ipMethod": "Type_SubType",
      "vlocityAsync": false,
      "inputMap": {
        "recordId": "{recordId}"
      },
      "resultVar": ""
    },
    "orderBy": {
      "name": "",
      "isReverse": ""
    },
    "contextVariables": []
  }
}
OmniUiCard
上的
DataSourceConfig
字段包含JSON格式的数据源绑定信息。
PropertySetConfig
字段包含卡片布局、状态与字段定义。
重要提示：Core命名空间下的
OmniUiCard
无
Definition
字段。数据源配置使用
DataSourceConfig
，布局配置使用
PropertySetConfig
。
json
{
  "dataSource": {
    "type": "IntegrationProcedures",
    "value": {
      "ipMethod": "Type_SubType",
      "vlocityAsync": false,
      "inputMap": {
        "recordId": "{recordId}"
      },
      "resultVar": ""
    },
    "orderBy": {
      "name": "",
      "isReverse": ""
    },
    "contextVariables": []
  }
}

Data Source Types

数据源类型

Type
dataSource.type
When to Use
Integration Procedure
IntegrationProcedures
(plural, capital P)		Primary pattern; calls an IP for live data
SOQL
SOQL
Direct query (use sparingly; prefer IP for abstraction)
Apex Remote
ApexRemote
Custom Apex class invocation
REST
REST
External API call via Named Credential
Custom
Custom
Custom data provider (pass JSON body directly)
类型
dataSource.type
使用场景
Integration Procedure
IntegrationProcedures
（复数，首字母大写P）		主要模式；调用IP获取实时数据
SOQL
SOQL
直接查询（谨慎使用；优先使用IP进行抽象）
Apex Remote
ApexRemote
调用自定义Apex类
REST
REST
通过命名凭据调用外部API
Custom
Custom
自定义数据提供程序（直接传入JSON体）

Field Mapping from IP Response

从IP响应映射字段

Map IP response fields to card display elements using merge field syntax:
IP Response:                    FlexCard Merge Field:
─────────────                   ─────────────────────
{ "Name": "Acme Corp" }   →    {Name}
{ "Account": {            →    {Account.Name}
    "Name": "Acme Corp"
  }
}
{ "records": [             →    {records[0].Name}  (single)
    { "Name": "Acme" }          or iterate with Card List layout
  ]
}
使用合并字段语法将IP响应字段映射到卡片展示元素：
IP 响应:                    FlexCard 合并字段:
─────────────                   ─────────────────────
{ "Name": "Acme Corp" }   →    {Name}
{ "Account": {            →    {Account.Name}
    "Name": "Acme Corp"
  }
}
{ "records": [             →    {records[0].Name}  (单条记录)
    { "Name": "Acme" }          或使用卡片列表布局迭代
  ]
}

Input Parameter Mapping

输入参数映射

Pass context from the hosting page into the IP data source:
Context VariableSourceExample
{recordId}
Current record pagePass to IP to query related data
{userId}
Running userFilter data by current user
{param.customKey}
URL parameter or parent cardPass from parent FlexCard or URL
将宿主页面的上下文传入IP数据源：
上下文变量来源示例
{recordId}
当前记录页面传递给IP以查询关联数据
{userId}
当前运行用户根据当前用户过滤数据
{param.customKey}
URL参数或父卡片从父FlexCard或URL传递

Cross-Skill Integration

跨技能集成

SkillRelationship to sf-flexcard
sf-integration-procedureBuild the IP data sources that FlexCards consume
sf-omniscriptBuild the OmniScripts that FlexCard action buttons launch
sf-datamapperBuild DataRaptors/DataMappers that IPs use under the hood
sf-omnistudio-analyzeAnalyze dependency chains across FlexCards, IPs, and OmniScripts
sf-deployDeploy FlexCard metadata along with upstream dependencies
sf-lwcBuild custom LWC components embedded within FlexCards
技能与sf-flexcard的关系
sf-integration-procedure构建FlexCard依赖的IP数据源
sf-omniscript构建FlexCard动作按钮启动的OmniScript
sf-datamapper构建IP底层使用的DataRaptor/DataMapper
sf-omnistudio-analyze分析FlexCard、IP与OmniScript之间的依赖链
sf-deploy部署FlexCard元数据及上游依赖项
sf-lwc构建嵌入FlexCard的自定义LWC组件

Edge Cases

边缘场景

ScenarioHandling
Empty dataConfigure an explicit empty-state with a user-friendly message; do not show raw "No data" or blank card
Error statesDisplay a meaningful error message when the IP data source fails; log the error for debugging
Mobile responsivenessUse single-column layout for mobile; avoid horizontal scrolling; test at 320px viewport width
Long text valuesTruncate with ellipsis and provide a flyout or tooltip for full text
Large record setsUse card list with pagination; limit initial load to 10-25 records
Null field valuesUse conditional visibility to hide fields with null values rather than showing empty labels
Mixed data freshnessWhen multiple data sources have different refresh rates, display a "last updated" indicator
场景处理方式
空数据配置明确的空状态与友好提示信息；请勿显示原始的“无数据”或空白卡片
错误状态当IP数据源失败时显示有意义的错误信息；记录错误以便调试
移动端响应性移动端使用单列布局；避免横向滚动；在320px视窗宽度下测试
长文本值使用省略号截断，并提供弹出式或工具提示查看完整文本
大型记录集使用带分页的卡片列表；初始加载限制为10-25条记录
空字段值使用条件可见性隐藏空值字段，而非显示空标签
混合数据新鲜度当多个数据源刷新速率不同时，显示“最后更新”指示器

FlexCard vs LWC Decision Guide

FlexCard vs LWC 决策指南

FactorFlexCardLWC
Build methodDeclarative (drag-and-drop)Code (JS, HTML, CSS)
Data bindingIntegration Procedure merge fieldsWire service, Apex, GraphQL
Best forAt-a-glance information displayComplex interactive UIs
TestingManual + data state verificationJest unit tests + manual
CustomizationLimited to OmniStudio frameworkFull platform flexibility
ReuseEmbed as child cardsImport as child components
When to chooseStandard card layouts with IP dataCustom behavior, animations, complex state
因素FlexCardLWC
构建方式声明式（拖放）代码式（JS、HTML、CSS）
数据绑定Integration Procedure合并字段Wire服务、Apex、GraphQL
最佳适用场景概览式信息展示复杂交互UI
测试手动测试 + 数据状态验证Jest单元测试 + 手动测试
自定义能力受限于OmniStudio框架完整平台灵活性
复用性作为子卡片嵌入作为子组件导入
选择时机基于IP数据的标准卡片布局自定义行为、动画、复杂状态

Dependencies

依赖项

Required: Target org with OmniStudio (Industries Cloud) license, 
sf
CLI authenticated For Data Sources: Active Integration Procedures deployed to the target org For Actions: Active OmniScripts deployed (if action buttons launch OmniScripts) Scoring: Block deployment if score < 67
Creating FlexCards programmatically: Use REST API (
sf api request rest --method POST --body @file.json
). Required fields: 
Name
, 
VersionNumber
, 
OmniUiCardType
(e.g., 
Child
). Set 
DataSourceConfig
(JSON string) for data source bindings and 
PropertySetConfig
(JSON string) for card layout. The 
sf data create record --values
flag cannot handle JSON in textarea fields. Activate by updating 
IsActive=true
after creation.
必需：拥有OmniStudio（Industries Cloud）许可证的目标组织，已认证的
sf
CLI 数据源依赖：目标组织中已部署并激活的Integration Procedure 动作依赖：已部署的激活OmniScript（若动作按钮启动OmniScript） 评分要求：评分<67分阻止部署
以编程方式创建FlexCard：使用REST API（
sf api request rest --method POST --body @file.json
）。必填字段：
Name
、
VersionNumber
、
OmniUiCardType
（如
Child
）。设置
DataSourceConfig
（JSON字符串）配置数据源绑定，设置
PropertySetConfig
（JSON字符串）配置卡片布局。
sf data create record --values
标志无法处理文本区域字段中的JSON。创建后通过更新
IsActive=true
激活卡片。

External References

外部参考