Add Adaptive Card Form

Quick Start

Step 1: Create a ContentPage with FormContent

Create a new file in your Pages/ directory:

using Microsoft.CommandPalette.Extensions;
using Microsoft.CommandPalette.Extensions.Toolkit;
using System.Text.Json.Nodes;

namespace YourExtension;

internal sealed partial class MyFormPage : ContentPage
{
    private readonly MyForm _form = new();

    public MyFormPage()
    {
        Name = "Open";
        Title = "My Form";
        Icon = new IconInfo("\uECA5");
    }

    public override IContent[] GetContent() => [_form];
}

internal sealed partial class MyForm : FormContent
{
    public MyForm()
    {
        TemplateJson = """
        {
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "type": "AdaptiveCard",
            "version": "1.6",
            "body": [
                {
                    "type": "Input.Text",
                    "label": "Name",
                    "id": "Name",
                    "isRequired": true,
                    "errorMessage": "Name is required",
                    "placeholder": "Enter your name"
                }
            ],
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit"
                }
            ]
        }
        """;
    }

    public override CommandResult SubmitForm(string payload)
    {
        var formInput = JsonNode.Parse(payload)?.AsObject();
        if (formInput == null)
        {
            return CommandResult.GoHome();
        }

        var name = formInput["Name"]?.ToString() ?? "Unknown";
        return CommandResult.ShowToast($"Hello, {name}!");
    }
}

Step 2: Register the Page

In your CommandsProvider, add the form page:

_commands = [
    new CommandItem(new MyFormPage()) { Title = "My Form" },
];

Step 3: Deploy and Test

1. Deploy your extension
2. In Command Palette, run Reload
3. Navigate to your form and submit it

Key Concepts

TemplateJson

The JSON layout of your form (from Adaptive Cards schema). Design it at https://adaptivecards.io/designer/

DataJson (Optional)

Dynamic data binding using ${...} placeholders in your TemplateJson:

TemplateJson = """{ "body": [{ "type": "TextBlock", "text": "${title}" }] }""";
DataJson = """{ "title": "Dynamic Title" }""";

SubmitForm

Called when the user submits. Parse payload as JSON to read input values by their id.

Mixing Content Types

You can combine forms with markdown on the same page:

public override IContent[] GetContent() => [
    new MarkdownContent("# Instructions\nFill out the form below."),
    _form,
];

Common Form Patterns

See form-patterns.md for template JSON for common form types.

Documentation

• Get user input with forms
• Adaptive Card Designer
• Adaptive Cards Schema