Building Omnistudio Flexcard

{
  "Name": "{{CardName}}",
  "VersionNumber": 1,
  "OmniUiCardType": "Child",
  "IsActive": false,
  "Description": "{{Description}}",
  "DataSourceConfig": "{\"dataSource\":{\"type\":\"IntegrationProcedures\",\"value\":{\"ipMethod\":\"{{IPType}}_{{IPSubType}}\",\"vlocityAsync\":false,\"inputMap\":{\"recordId\":\"{recordId}\"},\"resultVar\":\"\"},\"orderBy\":{\"name\":\"\",\"isReverse\":\"\"},\"contextVariables\":[]}}",
  "PropertySetConfig": "{\"states\":[{\"conditions\":{\"group\":[],\"id\":\"state-condition-object\",\"operator\":\"\"},\"fields\":[],\"id\":\"state-id-0\",\"isSmartAction\":false,\"name\":\"Active\",\"smartAction\":{},\"styleObject\":{\"class\":\"slds-card\",\"container\":{\"class\":\"slds-card\"}}}],\"title\":\"{{CardTitle}}\",\"iconName\":\"\",\"theme\":\"\",\"isFlyout\":false,\"datasource\":{\"contextVariables\":[],\"orderBy\":{},\"type\":\"\"}}",
  "AuthorName": "{{AuthorName}}"
}


# Credits

Official Salesforce OmniStudio tooling for FlexCard metadata authoring and validation. Primary inspiration for the skill's data source binding patterns and definition structure.

---


<!-- Parent: building-omnistudio-flexcard/SKILL.md -->

# FlexCard Best Practices

## Layout Design Patterns

### Single Card

Use for displaying summary information about a single record. Group related fields into logical sections.

```
┌──────────────────────────────────┐
│  Header: Record Name             │
├──────────────────────────────────┤
│  Section 1: Key Details          │
│  ┌────────────┬─────────────┐    │
│  │ Field A    │ Field B     │    │
│  │ Field C    │ Field D     │    │
│  └────────────┴─────────────┘    │
├──────────────────────────────────┤
│  Section 2: Status               │
│  ┌──────────────────────────┐    │
│  │ Status Badge  │ Date     │    │
│  └──────────────────────────┘    │
├──────────────────────────────────┤
│  [Action Button 1] [Action 2]   │
└──────────────────────────────────┘
```

**Guidelines:**
- Limit to 8-10 fields per card to avoid information overload
- Place the most important fields in the top section
- Use consistent field alignment (label-left or label-top)
- Group related fields in the same row when they share context

### Card List

Use for displaying a collection of related records. Each card in the list renders from one item in the data source array.

```
┌──────────────────────────────────┐
│  Card 1: Record A                │
│  Field 1 | Field 2 | [Action]   │
├──────────────────────────────────┤
│  Card 2: Record B                │
│  Field 1 | Field 2 | [Action]   │
├──────────────────────────────────┤
│  Card 3: Record C                │
│  Field 1 | Field 2 | [Action]   │
└──────────────────────────────────┘
  Showing 1-3 of 15  [Next →]
```

**Guidelines:**
- Keep each list card compact (3-5 fields maximum)
- Include a clear identifier field (Name, Title, or ID) in each card
- Add pagination when the data source can return more than 10 records
- Use consistent card height to maintain visual rhythm
- Provide a "View All" link when the list is truncated

### Tabbed Card

Use when a single record has multiple contexts worth displaying. Each tab represents a different state with its own data source or field set.

```
┌──────────────────────────────────┐
│  [Tab 1: Overview] [Tab 2: History] [Tab 3: Related] │
├──────────────────────────────────┤
│  Tab 1 Content                   │
│  ┌──────────────────────────┐    │
│  │ Fields for this context  │    │
│  └──────────────────────────┘    │
└──────────────────────────────────┘
```

**Guidelines:**
- Limit to 3-5 tabs to avoid horizontal overflow
- Use concise tab labels (1-2 words)
- Load non-active tab data lazily (on tab selection)
- Mark the default active tab based on the most common use case

### Flyout Card

Use for progressive disclosure: show a summary, then expand for details on demand.

```
┌──────────────────────────────────┐
│  Summary: Key Fields  [▼ More]   │
└──────────────────────────────────┘
       ↓ (on cli