🎴 Module 08: Enhance with Adaptive Cards

Codename: OPERATION SHOWCASE
Time: 40 minutes
Scenario: Present a Logged Ticket as a Rich Card

🎯 Learning Objectives

By the end of this module, you will be able to:

Explain what Adaptive Cards are and when to use them
Design an Adaptive Card with the JSON schema
Have Bit present a logged ticket as a rich card instead of plain text
Bind live values (ticket number, priority, etc.) into the card
Test the card in the Preview pane

🧭 Overview

In Module 07, when Bit logs a ticket he confirms it as plain text. That works, but a rich card is clearer and more professional — especially once Bit is published to Microsoft Teams.

In this module you'll give Bit an Adaptive Card so that, after smart-triage logs a ticket, he presents a tidy confirmation card: ticket number, summary, category, priority, status, requestor — and a button to open the ticket in SharePoint.

🧭 Where this fits Bit's story. This module makes an existing capability (the ticket from Module 07) look better. If you'd rather practice on the software flow, the same technique applies to a software-request card — see the alternative at the end.

🧰 Prerequisites

Bit with the smart-triage skill and the Create item / Send email tools from Module 07.

🏫 In the facilitated workshop, you'll already have logged a ticket in Module 07. If you're at the office, complete Module 07 first.

🧩 What Are Adaptive Cards?

Adaptive Cards are a platform-agnostic schema for UI cards. Originally developed by Microsoft, they're now an open standard supported across Microsoft Teams, Outlook, Copilot Studio agents, Windows notifications, and more.

Why Use Adaptive Cards?

Plain Text	Adaptive Card
Simple, fast	Rich, visual, branded
Limited formatting	Full control over layout and buttons
Plain data dump	Structured, scannable
No interactivity	Buttons, input fields, actions

Example use cases:

Ticket confirmation (this module) — number, priority, status, and a link
Approval requests — request details + Approve/Reject buttons
Order confirmation — summary, total, tracking link
Survey / feedback — inline rating or comment form

Example Adaptive Card showing a ticket confirmation with fields and a "View in SharePoint" button

🆕 How Adaptive Cards Work for Bit

Classic Copilot Studio put an Adaptive Card node inside a topic. Bit is a generative agent built from skills, so the approach is simpler — and it's the method this module uses:

Give Bit the card as its own skill (adaptive-card). The card JSON lives inside the skill, with one firm rule: render the card, never show the JSON.
Tell the skill that logs the ticket (smart-triage) to present its result as that card.

Bit's orchestrator does the rest — it renders the card and fills the ${…} placeholders from the ticket smart-triage just created. No topic, no node; it fits how Bit already works.

The transferable ideas are unchanged: design the card JSON, and decide which values bind into it.

🧪 Lab 8.1: Design the Ticket Confirmation Card

Objective: Author the Adaptive Card JSON for a logged ticket.

Adaptive Cards are defined with JSON. Here's the ticket confirmation card — a header, the summary, a FactSet of ticket details, and an open-in-SharePoint button:

json

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "🎫 Ticket logged",
      "weight": "Bolder",
      "size": "Large"
    },
    {
      "type": "TextBlock",
      "text": "${title}",
      "wrap": true,
      "spacing": "None",
      "isSubtle": true
    },
    {
      "type": "FactSet",
      "facts": [
        { "title": "Ticket #", "value": "${ticketNumber}" },
        { "title": "Category", "value": "${category}" },
        { "title": "Priority", "value": "${priority}" },
        { "title": "Status", "value": "${status}" },
        { "title": "Requestor", "value": "${requestor}" }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "View in SharePoint",
      "url": "${ticketUrl}"
    }
  ]
}

What this card includes:

A header and the ticket summary (${title})
A FactSet — ticket number, category, priority, status, requestor
An Action.OpenUrl button to view the item in SharePoint

Data binding: the ${...} placeholders are filled at runtime with the values from the ticket smart-triage just created.

💡 Tip: Validate any card JSON in the Adaptive Cards Designer — paste it, add sample data, and preview before wiring it into Bit.

✅ Checkpoint: You have a valid ticket confirmation card.

🧪 Lab 8.2: Give Bit the Card as a Skill, Then Have `smart-triage` Use It

Objective: Add the card to Bit as its own skill, then tell smart-triage to present the logged ticket as that card. This is the exact method shown in this module's screenshots.

Step 1 — Create the `adaptive-card` skill

In Bit, open Skills → + Add a skill → Create from blank (the same place you built your skills in Module 07).

Set it up exactly like this — the name, description, the render-don't-show rule, and the card JSON inside the skill:

markdown

---
name: adaptive-card
description: This is what the adaptive card should look like. Replace the blanks with dynamic values.
---
# Instructions
Never show the JSON — just render it in the conversation with the dynamic values:

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    { "type": "TextBlock", "text": "🎫 Ticket logged", "weight": "Bolder", "size": "Large" },
    { "type": "TextBlock", "text": "${title}", "wrap": true, "spacing": "None", "isSubtle": true },
    {
      "type": "FactSet",
      "facts": [
        { "title": "Ticket #", "value": "${ticketNumber}" },
        { "title": "Category", "value": "${category}" },
        { "title": "Priority", "value": "${priority}" },
        { "title": "Status", "value": "${status}" },
        { "title": "Requestor", "value": "${requestor}" }
      ]
    }
  ],
  "actions": [
    { "type": "Action.OpenUrl", "title": "View in SharePoint", "url": "${ticketUrl}" }
  ]
}

Save the skill.

📥 Prefer to upload? Grab the ready-made file and use Upload a skill instead: adaptive-card.md.

Step 2 — Tell `smart-triage` to present the card

Open your smart-triage skill (from Module 07) and add this section — keep everything the skill already does:

markdown

# Confirm with a card
After creating the ticket, present the confirmation as the Ticket Confirmation
Adaptive Card, filling: ticketNumber, title, category, priority, status,
requestor, and ticketUrl (the SharePoint item link). Do not render the JSON,
just the card. Still send the confirmation email as before.

Save the skill.

💡 Why this works: smart-triage produces the ticket values; the adaptive-card skill holds the layout. Bit's orchestrator connects the two — it renders the card (not the raw JSON) and drops the live values into the ${…} placeholders. The line "Do not render the JSON, just the card" is what stops Bit from printing the JSON as text.

✅ Checkpoint: Bit has an adaptive-card skill, and smart-triage is told to confirm tickets with the card.

🧪 Lab 8.3: Test the Card

Preview → new chat → log a ticket (as in Module 07):

text

My laptop won't connect to any monitor and I've tried two cables. Please log a ticket.

After smart-triage creates the row, Bit presents the ticket confirmation card — number, category, priority, status, requestor, and the View in SharePoint button.

Verify:

✅ The fields show the real ticket values
✅ The button opens the SharePoint item
✅ The confirmation email still sends

✅ Checkpoint: Bit confirms tickets with a rich, interactive card.

🔀 Alternative: A Software-Request Card

The same technique fits the software flow. Instead of a ticket, present a software-request card from software-installation-request:

json

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    { "type": "TextBlock", "text": "💿 Software request", "weight": "Bolder", "size": "Large" },
    {
      "type": "FactSet",
      "facts": [
        { "title": "Application", "value": "${application}" },
        { "title": "Distribution", "value": "${distribution}" },
        { "title": "Approval needed", "value": "${approvalNeeded}" }
      ]
    }
  ]
}

This is a great place to practice once you've automated approvals in Module 09 — the card can show whether a request is self-service or awaiting manager sign-off.

🚀 Advanced Adaptive Card Features

Input Fields

Collect data directly in the card:

json

{ "type": "Input.Text", "id": "note", "placeholder": "Add a note for the help desk" }

Action.OpenUrl

Open a link when a button is clicked (used above for the SharePoint item).

Conditional Formatting

Show/hide elements based on data with $when:

json

{ "type": "TextBlock", "text": "⚠️ Critical — fully blocked", "$when": "${priority == 'Critical'}" }

Accessibility

Always include altText for images and clear, descriptive button labels for screen readers.

🛠️ Troubleshooting Adaptive Cards

Issue 1: Card doesn't render (blank or error)

JSON syntax — validate in the Adaptive Cards Designer
Schema version — try 1.5 (or lower if your channel doesn't support it)
Placeholder names — make sure the skill fills the exact ${...} names used in the card

Issue 2: Fields are blank

The skill didn't pass a value for that placeholder — check the smart-triage instructions list every field
Test with the question you know produces a complete ticket

Issue 3: The button doesn't open the item

${ticketUrl} wasn't populated — have the skill include the SharePoint item link when it creates the ticket

🧠 Key Takeaways

Adaptive Cards provide rich, interactive UI for agent responses
JSON-based — defined with the Adaptive Card schema; validate in the designer
New experience — give Bit the card template and let a skill present its result as the card (no topic nodes)
Data binding — ${...} placeholders are filled from the skill's values
Platform-agnostic — cards render in Teams, Outlook, and web
Actions — buttons can open URLs, submit data, or collect input

🏗️ What You've Built

Bit now confirms a logged ticket with a rich Adaptive Card — number, category, priority, status, requestor, and a link to the SharePoint item — instead of plain text.

⏭️ Next Steps

In Module 09: Automate Approvals with Workflows, you'll handle the trickier case — software that needs a manager's approval — using the new Workflows designer, and call it from the software-installation-request skill.

Course Navigation: ← Module 07 | Course Index | Next: Module 09 →

🎴 Module 08: Enhance with Adaptive Cards ​

🎯 Learning Objectives ​

🧭 Overview ​

🧰 Prerequisites ​

🧩 What Are Adaptive Cards? ​

Why Use Adaptive Cards? ​

🆕 How Adaptive Cards Work for Bit ​

🧪 Lab 8.1: Design the Ticket Confirmation Card ​

🧪 Lab 8.2: Give Bit the Card as a Skill, Then Have smart-triage Use It ​

Step 1 — Create the adaptive-card skill ​

Step 2 — Tell smart-triage to present the card ​

🧪 Lab 8.3: Test the Card ​

🔀 Alternative: A Software-Request Card ​

🚀 Advanced Adaptive Card Features ​

Input Fields ​

Action.OpenUrl ​

Conditional Formatting ​

Accessibility ​

🛠️ Troubleshooting Adaptive Cards ​

Issue 1: Card doesn't render (blank or error) ​

Issue 2: Fields are blank ​

Issue 3: The button doesn't open the item ​

🧠 Key Takeaways ​

🏗️ What You've Built ​

⏭️ Next Steps ​

🎴 Module 08: Enhance with Adaptive Cards

🎯 Learning Objectives

🧭 Overview

🧰 Prerequisites

🧩 What Are Adaptive Cards?

Why Use Adaptive Cards?

🆕 How Adaptive Cards Work for Bit

🧪 Lab 8.1: Design the Ticket Confirmation Card

🧪 Lab 8.2: Give Bit the Card as a Skill, Then Have `smart-triage` Use It

Step 1 — Create the `adaptive-card` skill

Step 2 — Tell `smart-triage` to present the card

🧪 Lab 8.3: Test the Card

🔀 Alternative: A Software-Request Card

🚀 Advanced Adaptive Card Features

Input Fields

Action.OpenUrl

Conditional Formatting

Accessibility

🛠️ Troubleshooting Adaptive Cards

Issue 1: Card doesn't render (blank or error)

Issue 2: Fields are blank

Issue 3: The button doesn't open the item

🧠 Key Takeaways

🏗️ What You've Built

⏭️ Next Steps