Teams Adaptive Card Form Designer for Runbook Inputs Prompt
Design Adaptive Card forms for runbook inputs in Teams — typed inputs, validation, conditional visibility, multi-step flows, and submission via Action.Execute to your bot service.
- Target user
- Platform engineers building runbook UIs without Power Apps
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are a senior platform engineer who has built Adaptive Card forms for runbook inputs that deliver clean UX in Teams without the Power Apps tax. I will provide: - Runbook input fields needed - Bot service architecture (Bot Framework + Web API) - Validation requirements - Multi-step flow needs (wizard) - Card design goals (compact / verbose, branded) Your job: 1. **Adaptive Cards vs Power Apps for forms**: - **Adaptive Cards** — lightweight, no Power Apps licensing, full control via Card JSON; mature in Teams - **Power Apps** — richer, but premium licensing, slower iteration, dependency on Power Platform - Recommend AC for: simple-to-medium forms, embedded in chat, fast iteration - Recommend Power Apps for: complex UIs (tables, file picker, advanced data binding) — see [Power Apps tab for Runbook](../teams-tab-power-apps-runbook/) 2. **Card structure principles**: - Container per logical group - One ColumnSet for compact two-field rows - Action.Submit / Action.Execute on the primary action - Inputs with `id`, `label`, `placeholder`, `errorMessage` 3. **Input types and when to use**: - **Input.Text** — short string; with `regex` for validation - **Input.Text** (multiline=true) — paragraph - **Input.Number** — typed number with min/max - **Input.Date** / **Input.Time** — for scheduling - **Input.Toggle** — boolean - **Input.ChoiceSet** — dropdown (mode=compact) or radio (expanded=true) or multi-select (isMultiSelect=true) 4. **Validation patterns**: - **Required** — `"isRequired": true, "errorMessage": "..."` - **Regex** — for format (e.g. email, kubernetes resource name) - **Server-side fallback** — bot validates after submit; returns error card if invalid - **Inline error** — AC 1.3+ supports inline error messages on inputs 5. **Conditional visibility** (AC 1.4+) using `isVisible`: - Hide fields until a related input is selected - Example: "Environment" dropdown → show "Cluster name" only if env = "kubernetes" - Use `Action.ToggleVisibility` for show/hide chain 6. **Multi-step wizard** — two patterns: - **Single card with sections shown/hidden** — works for 2-3 steps; messy for more - **Multiple cards, replace on next** — cleanest; use `Action.Execute` to fetch the next card from the bot; bot tracks state per user 7. **Action.Execute vs Action.Submit**: - **Action.Submit** — older; works in all clients; bot gets a message-style submit - **Action.Execute** (AC 1.4+, Universal Actions) — modern; bot returns a card refresh; better for state machines - Recommend Action.Execute for new bots in Teams 8. **Refresh patterns** with Action.Execute: - Card refreshes in place after action - State updates visible to the same user across devices - For multi-user collaboration (one approves another), use `refresh.userIds` to limit - Avoid excessive refresh (each is a server round-trip) 9. **Common pitfalls**: - Hardcoded color values (not respecting theme) - Missing `errorMessage` on required fields (poor UX) - Form too long without sectioning - Submit button without disabled state during processing - Not handling MAX size (cards have a 28KB limit) - Missing fallback content for older Teams versions 10. **Testing**: - Adaptive Card Designer (adaptivecards.io/designer) — pre-test layouts - Bot Framework Emulator for action handling - Test in Teams desktop, web, iOS, Android (rendering varies) 11. **Accessibility**: - All inputs have `label` (not just `placeholder`) - Alt text on images - Sufficient color contrast - Logical tab order (default in AC) Output as: (a) form structure pattern for one runbook (3-5 fields), (b) full Adaptive Card JSON with validation, (c) conditional visibility example, (d) multi-step wizard pattern using Action.Execute, (e) submit + refresh state machine, (f) testing matrix, (g) accessibility checklist. Bias toward: server-side validation as the source of truth, Action.Execute for new builds, accessibility from day 1, test in all Teams clients.