Loading...
Loading...
Compare original and translation side by side
OmniUiCardomnistudio-omniscript-generateomnistudio-integration-procedure-generateomnistudio-dependencies-analyzeplatform-metadata-deployOmniUiCardomnistudio-omniscript-generateomnistudio-integration-procedure-generateomnistudio-dependencies-analyzeplatform-metadata-deploy| Need | Document | Description |
|---|---|---|
| Best practices | references/best-practices.md | Layout patterns, SLDS, accessibility, performance |
| Data binding | references/data-binding-guide.md | IP sources, field mapping, conditional rendering |
| 需求 | 文档 | 描述 |
|---|---|---|
| 最佳实践 | references/best-practices.md | 布局模式、SLDS规范、可访问性、性能优化 |
| 数据绑定 | references/data-binding-guide.md | IP数据源、字段映射、条件渲染 |
omnistudio-dependencies-analyze → omnistudio-datamapper-generate → omnistudio-integration-procedure-generate → omnistudio-omniscript-generate → omnistudio-flexcard-generate (you are here)omnistudio-dependencies-analyze → omnistudio-datamapper-generate → omnistudio-integration-procedure-generate → omnistudio-omniscript-generate → omnistudio-flexcard-generate(当前环节)| Insight | Detail |
|---|---|
| Configuration fields | |
| Data source binding | Data sources bind to Integration Procedures for live data; the IP must be active and deployed before the FlexCard can retrieve data |
| Child card embedding | FlexCards can embed other FlexCards as child cards, enabling composite layouts with shared or independent data sources |
| OmniScript launching | FlexCards can launch OmniScripts via action buttons, passing context data from the card's data source into the OmniScript's input |
| Designer virtual object | The FlexCard Designer uses |
| 要点 | 详情 |
|---|---|
| 配置字段 | |
| 数据源绑定 | 数据源与Integration Procedures绑定以获取实时数据;IP必须已激活并部署,FlexCard才能获取数据 |
| 子卡片嵌入 | FlexCard可嵌入其他FlexCard作为子卡片,实现共享或独立数据源的复合布局 |
| OmniScript启动 | FlexCard可通过操作按钮启动OmniScript,并将卡片数据源的上下文数据传入OmniScript的输入参数 |
| 设计器虚拟对象 | FlexCard设计器使用 |
| Question | Why 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 Procedures |
| 运行的对象上下文是什么? | 决定记录级还是列表级展示 |
| 卡片需提供哪些操作? | 驱动按钮/链接配置及OmniScript集成 |
| 哪种布局最适合该场景? | 单卡片、列表、标签页或弹出式 |
| 是否存在条件显示规则? | 根据数据值显示/隐藏字段或区域 |
references/best-practices.mdreferences/best-practices.md| Layout Type | Use Case | Description |
|---|---|---|
| Single Card | Record summary | One card displaying fields from a single record |
| Card List | Related records | Repeating cards bound to an array data source |
| Tabbed Card | Multi-context | Multiple states displayed as tabs within one card |
| Flyout Card | Detail on demand | Expandable detail panel triggered from a summary card |
| 布局类型 | 适用场景 | 描述 |
|---|---|---|
| 单卡片 | 记录摘要 | 展示单条记录字段的卡片 |
| 卡片列表 | 关联记录 | 绑定数组数据源的重复卡片 |
| 标签页卡片 | 多上下文 | 在单张卡片内以标签页形式展示多种状态 |
| 弹出式卡片 | 按需查看详情 | 从摘要卡片触发的可展开详情面板 |
FlexCard → Data Source (type: IntegrationProcedure)
→ IP Name + Input Mapping
→ Response Field Mapping → Card Elements{datasource.fieldName}{recordId}FlexCard → 数据源(类型:IntegrationProcedure)
→ IP名称 + 输入映射
→ 响应字段映射 → 卡片元素{datasource.fieldName}{recordId}| Action Type | Purpose | Configuration |
|---|---|---|
| Launch OmniScript | Start a guided process | OmniScript Type + SubType, pass context params |
| Navigate | Go to record or URL | Record ID or URL template with merge fields |
| Custom Action | Platform event, LWC, etc. | Custom action handler with payload mapping |
| 操作类型 | 用途 | 配置 |
|---|---|---|
| 启动OmniScript | 启动引导流程 | OmniScript类型+子类型,传递上下文参数 |
| 导航 | 跳转到记录或URL | 记录ID或包含合并字段的URL模板 |
| 自定义操作 | 平台事件、LWC等 | 带负载映射的自定义操作处理程序 |
references/data-binding-guide.mdreferences/scoring-rubric.mdreferences/data-binding-guide.mdreferences/scoring-rubric.mdplatform-metadata-deploy--dry-runOmniUiCardsf project deploy startCannot find OmniIntegrationProcedureEntity not foundplatform-metadata-deploy--dry-runOmniUiCardsf project deploy startCannot find OmniIntegrationProcedureEntity not found| Scenario | What to Verify |
|---|---|
| Populated data | All fields render correctly, merge fields resolve |
| Empty data | Empty-state message displays, no broken merge fields |
| Error state | Graceful handling when IP returns an error or times out |
| Multi-record | Card list renders correct number of items, pagination works |
| Action buttons | OmniScript launches with correct pre-populated data |
| Conditional fields | Visibility rules toggle correctly based on data values |
| Mobile | Card layout adapts to smaller viewport widths |
| 场景 | 验证内容 |
|---|---|
| 已填充数据 | 所有字段正确渲染,合并字段解析正常 |
| 空数据 | 显示空状态提示,无损坏的合并字段 |
| 错误状态 | IP返回错误或超时后优雅处理 |
| 多记录 | 卡片列表渲染正确数量的条目,分页功能正常 |
| 操作按钮 | OmniScript启动并正确预填充数据 |
| 条件字段 | 可见性规则根据数据值正确切换 |
| 移动端 | 卡片布局适配较小视口宽度 |
| Anti-Pattern | Why It's Wrong | Correct Approach |
|---|---|---|
| Referencing non-existent IP data sources | Card fails to load data at runtime | Verify IP exists and is active before binding |
| Hardcoded colors in styles | Breaks SLDS theming and dark mode | Use SLDS design tokens and CSS custom properties |
| Missing accessibility attributes | Fails WCAG compliance | Add |
| Excessive nested child cards | Performance degrades with deep nesting | Limit to 2 levels of nesting; flatten where possible |
| Ignoring empty states | Broken UI when data source returns no records | Configure explicit empty-state messaging |
| Hardcoded record IDs | Card breaks across environments | Use merge fields and context-driven parameters |
| 反模式 | 问题原因 | 正确做法 |
|---|---|---|
| 引用不存在的IP数据源 | 运行时卡片无法加载数据 | 绑定前验证IP存在且已激活 |
| 样式中使用硬编码颜色 | 破坏SLDS主题与暗黑模式 | 使用SLDS设计令牌与CSS自定义属性 |
| 缺少可访问性属性 | 不符合WCAG合规要求 | 添加 |
| 过度嵌套子卡片 | 深度嵌套会导致性能下降 | 限制嵌套层级为2级;尽可能扁平化结构 |
| 忽略空状态 | 数据源无记录返回时UI损坏 | 配置明确的空状态提示信息 |
| 硬编码记录ID | 跨环境使用时卡片失效 | 使用合并字段与上下文驱动的参数 |
| Category | Points | Criteria |
|---|---|---|
| Design & Layout | 25 | Appropriate layout type, logical field grouping, responsive design, consistent spacing, clear visual hierarchy |
| Data Binding | 20 | Correct IP references, proper merge field syntax, input parameter mapping, multi-source coordination |
| Actions & Navigation | 20 | Action buttons configured correctly, OmniScript launch params mapped, navigation targets valid, action labels descriptive |
| Styling | 20 | SLDS tokens used (no hardcoded colors), consistent typography, proper use of card/tile patterns, dark mode compatible |
| Accessibility | 15 | |
| Testing | 15 | Verified with populated data, empty state, error state, multi-record scenario, and mobile viewport |
| Performance | 15 | Data source calls minimized, child card nesting limited (max 2 levels), no redundant IP calls, lazy loading for non-visible states |
references/scoring-rubric.md| 类别 | 分值 | 标准 |
|---|---|---|
| 设计与布局 | 25 | 布局类型恰当、字段分组合理、响应式设计、间距一致、视觉层次清晰 |
| 数据绑定 | 20 | IP引用正确、合并字段语法规范、输入参数映射正确、多数据源协调得当 |
| 操作与导航 | 20 | 操作按钮配置正确、OmniScript启动参数映射正确、导航目标有效、操作标签描述清晰 |
| 样式 | 20 | 使用SLDS令牌(无硬编码颜色)、排版一致、正确使用卡片/磁贴模式、兼容暗黑模式 |
| 可访问性 | 15 | 交互元素添加 |
| 测试 | 15 | 已验证已填充数据、空状态、错误状态、多记录场景及移动端视口 |
| 性能 | 15 | 数据源调用最少化、子卡片嵌套受限(最多2级)、无冗余IP调用、非可见状态使用懒加载 |
references/scoring-rubric.mdscripts/flexcard-commands.sh<org><Name>scripts/flexcard-commands.sh<org><Name>DataSourceConfigOmniUiCardPropertySetConfigIMPORTANT: There is NOfield onDefinitionin Core namespace. UseOmniUiCardfor data sources andDataSourceConfigfor layout.PropertySetConfig
assets/omni-ui-card.jsonDataSourceConfigOmniUiCardDataSourceConfigPropertySetConfig重要提示:Core命名空间下的无OmniUiCard字段。请使用Definition配置数据源,使用DataSourceConfig配置布局。PropertySetConfig
assets/omni-ui-card.jsonDataSourceConfig| Type | | When to Use |
|---|---|---|
| Integration Procedure | | Primary pattern; calls an IP for live data |
| SOQL | | Direct query (use sparingly; prefer IP for abstraction) |
| Apex Remote | | Custom Apex class invocation |
| REST | | External API call via Named Credential |
| Custom | | Custom data provider (pass JSON body directly) |
| 类型 | | 适用场景 |
|---|---|---|
| Integration Procedure | | 主要模式;调用IP获取实时数据 |
| SOQL | | 直接查询(谨慎使用;优先选择IP进行抽象) |
| Apex Remote | | 调用自定义Apex类 |
| REST | | 通过命名凭证调用外部API |
| Custom | | 自定义数据提供程序(直接传递JSON主体) |
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响应: FlexCard合并字段:
───────────── ─────────────────────
{ "Name": "Acme Corp" } → {Name}
{ "Account": { → {Account.Name}
"Name": "Acme Corp"
}
}
{ "records": [ → {records[0].Name} (单条记录)
{ "Name": "Acme" } 或使用卡片列表布局迭代
]
}| Context Variable | Source | Example |
|---|---|---|
| Current record page | Pass to IP to query related data |
| Running user | Filter data by current user |
| URL parameter or parent card | Pass from parent FlexCard or URL |
| 上下文变量 | 来源 | 示例 |
|---|---|---|
| 当前记录页面 | 传递给IP以查询关联数据 |
| 当前运行用户 | 根据当前用户过滤数据 |
| URL参数或父卡片 | 从父FlexCard或URL传递 |
| Skill | Relationship to omnistudio-flexcard-generate |
|---|---|
| omnistudio-integration-procedure-generate | Build the IP data sources that FlexCards consume |
| omnistudio-omniscript-generate | Build the OmniScripts that FlexCard action buttons launch |
| omnistudio-datamapper-generate | Build DataRaptors/DataMappers that IPs use under the hood |
| omnistudio-dependencies-analyze | Analyze dependency chains across FlexCards, IPs, and OmniScripts |
| platform-metadata-deploy | Deploy FlexCard metadata along with upstream dependencies |
| experience-lwc-generate | Build custom LWC components embedded within FlexCards |
| 技能 | 与omnistudio-flexcard-generate的关系 |
|---|---|
| omnistudio-integration-procedure-generate | 构建FlexCard依赖的IP数据源 |
| omnistudio-omniscript-generate | 构建FlexCard操作按钮可启动的OmniScript |
| omnistudio-datamapper-generate | 构建IP底层使用的DataRaptor/DataMapper |
| omnistudio-dependencies-analyze | 分析FlexCard、IP及OmniScript之间的依赖链 |
| platform-metadata-deploy | 部署FlexCard元数据及上游依赖项 |
| experience-lwc-generate | 构建嵌入FlexCard的自定义LWC组件 |
| Scenario | Handling |
|---|---|
| Empty data | Configure an explicit empty-state with a user-friendly message; do not show raw "No data" or blank card |
| Error states | Display a meaningful error message when the IP data source fails; log the error for debugging |
| Mobile responsiveness | Use single-column layout for mobile; avoid horizontal scrolling; test at 320px viewport width |
| Long text values | Truncate with ellipsis and provide a flyout or tooltip for full text |
| Large record sets | Use card list with pagination; limit initial load to 10-25 records |
| Null field values | Use conditional visibility to hide fields with null values rather than showing empty labels |
| Mixed data freshness | When multiple data sources have different refresh rates, display a "last updated" indicator |
| 场景 | 处理方式 |
|---|---|
| 空数据 | 配置明确的空状态并显示友好提示;请勿显示原始的“无数据”或空白卡片 |
| 错误状态 | IP数据源失败时显示有意义的错误提示;记录错误以便调试 |
| 移动端响应性 | 移动端使用单列布局;避免横向滚动;在320px视口宽度下测试 |
| 长文本值 | 使用省略号截断文本,并提供弹出框或工具提示显示完整文本 |
| 大型记录集 | 使用带分页的卡片列表;初始加载限制为10-25条记录 |
| 空字段值 | 使用条件可见性隐藏空值字段,而非显示空标签 |
| 混合数据新鲜度 | 当多个数据源刷新频率不同时,显示“最后更新”指示器 |
| Factor | FlexCard | LWC |
|---|---|---|
| Build method | Declarative (drag-and-drop) | Code (JS, HTML, CSS) |
| Data binding | Integration Procedure merge fields | Wire service, Apex, GraphQL |
| Best for | At-a-glance information display | Complex interactive UIs |
| Testing | Manual + data state verification | Jest unit tests + manual |
| Customization | Limited to OmniStudio framework | Full platform flexibility |
| Reuse | Embed as child cards | Import as child components |
| When to choose | Standard card layouts with IP data | Custom behavior, animations, complex state |
| 因素 | FlexCard | LWC |
|---|---|---|
| 构建方式 | 声明式(拖拽) | 编码(JS、HTML、CSS) |
| 数据绑定 | Integration Procedure合并字段 | Wire服务、Apex、GraphQL |
| 最佳适用场景 | 概览信息展示 | 复杂交互UI |
| 测试方式 | 手动测试+数据状态验证 | Jest单元测试+手动测试 |
| 定制能力 | 受限于OmniStudio框架 | 全平台灵活性 |
| 复用方式 | 作为子卡片嵌入 | 作为子组件导入 |
| 选择时机 | 使用IP数据的标准卡片布局 | 自定义行为、动画、复杂状态 |
sfsf project deploy startscripts/flexcard-commands.shomnistudio__OmniUiCardsfdx-project.jsonscripts/flexcard-commands.shsf api request rest --method POST --body @file.jsonNameVersionNumberOmniUiCardTypeChildDataSourceConfigPropertySetConfigsf data create record --valuesIsActive=truesfsf project deploy startscripts/flexcard-commands.shomnistudio__OmniUiCardsfdx-project.jsonscripts/flexcard-commands.shsf api request rest --method POST --body @file.jsonNameVersionNumberOmniUiCardTypeChildDataSourceConfigPropertySetConfigsf data create record --valuesIsActive=trueassets/omni-ui-card.jsonOmniUiCardDataSourceConfigPropertySetConfigassets/omni-ui-card.jsonOmniUiCardDataSourceConfigPropertySetConfig| File | When to read |
|---|---|
| Phase 3 — Generation: OmniUiCard record template including DataSourceConfig JSON structure |
| Phase 2 — Layout patterns, SLDS compliance, accessibility requirements, and performance guidance |
| Phase 2-3 — Data source types, merge field syntax, input parameter mapping, and multi-source coordination |
| Phase 3 — Full per-criterion breakdown of all 7 scoring categories (130 points) |
| Phase 4 — All CLI commands for querying, retrieving, and deploying FlexCard metadata |
| 文件 | 阅读时机 |
|---|---|
| 阶段3——生成:包含DataSourceConfig JSON结构的OmniUiCard记录模板 |
| 阶段2——布局模式、SLDS合规性、可访问性要求及性能优化指南 |
| 阶段2-3——数据源类型、合并字段语法、输入参数映射及多数据源协调方式 |
| 阶段3——所有7个评分类别的完整逐项细则(130分) |
| 阶段4——查询、检索及部署FlexCard元数据的所有CLI命令 |