Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Doc Feature][Compound button for Adaptive Cards][3968537] #11722

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+64 −0
Draft

[Doc Feature][Compound button for Adaptive Cards][3968537] #11722

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2aa7f82
Compound button for Adaptive Cards
v-preethah Oct 22, 2024
2df03ca
content refinement
v-preethah Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions msteams-platform/task-modules-and-cards/cards/cards-format.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -830,6 +830,70 @@ The following code shows an example of formatting for Markdown connector cards:

---

## CompoundButton in Adaptive Cards

The Compoundbutton element in an Adaptive Card offers a user experience similar to that of suggested prompts in an AI bot. This feature in Adaptive Card provides an out-of-the-box solution for creating these buttons.

<image placeholder>

Here's an example of how the CompoundButton element can be used in an Adaptive Card:

```json
{
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "CompoundButton",
"title": "Summarize",
"icon": {
"name": "TextBulletList"
},
"subTitle": "Review key points in file",
"height": "stretch",
"badge": "New"
}
]
}
```

This element simplifies the process for developers allowing them to create intuitive and responsive UI components with minimal effort.

**CompoundButton schema**

The following table lists the parameters the CompoundButton element:

| Property name | Required | Type | Description |
|---------|---------|---------|---------|
| `type` | ✔️ | String | It must be `CompoundButton` and it's an inherited property. |
| `id` | | String | It's an inherited property. |
| `requires` | | Object | It's an inherited property. |
| `isVisible` | | Boolean | It's an inherited property. |
| `separator ` | | Boolean | It's an inherited property. |
| `height ` | | String | `auto`, `stretch` <br> It's an inherited property. |
| `horizontalAlignment ` | | String | `left`, `center`, `right` <br> It's an inherited property. |
| `Spacing ` | | String | `None`, `small`, `default`, `medium`, `large`, `extraLarge` <br> It's an inherited property. |
| `targetWidth ` | | String | `veryNarrow`, `narrow`, `standard`, `wide` <br> It's an inherited property. |
| `icon ` | | String | The iconInfo object are `name`, `size`, `style`, and `color`. |
| `icon.name` | ✔️ | String | The name of the icon, as per the Fluent icon directory. Same as the name of the new Icon element. |
| `icon.size` | | String | `xxSmall`, `xSmall`, `Small`, `Standard`, `Medium`, `Large`, `xLarge`, `xxLarge` |
| `icon.style` | | String | `Regular`, `Filled` |
| `icon.color` | | String | `default`, `dark`, `light`, `accent`, `good`, `warning`, `attention` |
| `badge ` | | String | Markdown isn't supported. |
| `title ` | ✔️ | String | Markdown isn't supported. |
| `description ` | | String | Markdown isn't supported. |
| `select Action` | | | It's an action object. All actions are allowed except Action.ShowCard. |

The following table lists the `iconInfo` object properties:

| Property name | Required | Type | Description |
|---------|---------|---------|---------|
| `name` | ✔️ | String | The name of the icon, as per the Fluent icon directory. Same as the name of the new Icon element. |
| `size` | | String | `xxSmall`, `xSmall`, `Small`, `Standard`, `Medium`, `Large`, `xLarge`, `xxLarge` |
| `style` | | String | `Regular`, `Filled` |
| `color` | | String | `default`, `dark`, `light`, `accent`, `good`, `warning`, `attention` |

## CodeBlock in Adaptive Cards

The `CodeBlock` element enables you to share code snippets as richly formatted Adaptive Cards in Teams chats, channels, and meetings. Adaptive Cards with the `CodeBlock` element make the code snippet easy to read as the indentation, numbering, and syntax highlighting match the programming language. Additionally, you can add action buttons to view the code at its source or edit the code in integrated development environments (IDEs) such as Microsoft Visual Studio or Microsoft Visual Studio Code.
Expand Down