Appeler et ignorer des boîtes de dialogue dans le Kit de développement logiciel (SDK) Teams

Cet article explique comment appeler et fermer des boîtes de dialogue (anciennement appelées modules de tâche) à l’aide du SDK Teams (bibliothèque d’IA Teams). Dans le SDK Teams, les boîtes de dialogue sont appelées à partir d’actions de carte adaptative à l’aide de et TaskFetchAction gérées via des événements d’ouverture et d’envoi de boîte de dialogue sur la App classe.

L’inscription à l’événement varie selon la langue :

• TypeScript : app.on('dialog.open', ...) et app.on('dialog.submit', ...)
• C# : teams.OnTaskFetch(...) et teams.OnTaskSubmit(...)
• Python : @app.on_dialog_open et @app.on_dialog_submit

Le contenu de la boîte de dialogue peut être une carte adaptative ou une page web basée sur une URL.

Les boîtes de dialogue peuvent également être appelées par d’autres approches en fonction de l’architecture de votre application :

• À partir d’onglets utilisant la bibliothèque cliente TeamsJS. Voir Utiliser les boîtes de dialogue dans les onglets.
• À partir de bots utilisant Bot Framework ou des liens profonds. Voir Utiliser des boîtes de dialogue avec des robots.
• À partir d’une URL de lien profond. Voir Lien détaillé pour ouvrir une boîte de dialogue.

Pour obtenir des conseils sur la migration de Bot Framework vers le SDK Teams, consultez Migrer à partir de BotBuilder.

Le tableau suivant résume le fonctionnement des boîtes de dialogue dans le Kit de développement logiciel (SDK) Teams :

Étape	Dialogue avec la carte adaptative	Dialogue avec l’URL de la page web
Déclencher le dialogue	1. Envoyez une carte adaptative avec un TaskFetchAction bouton à l’utilisateur. Les données de l’action spécifient value le type de boîte de dialogue à ouvrir. 2. Lorsque l’utilisateur sélectionne le bouton, Teams envoie un appel de tâche à votre application.	1. Envoyez une carte adaptative avec un TaskFetchAction bouton à l’utilisateur. 2. Lorsque l’utilisateur sélectionne le bouton, Teams envoie un appel de tâche à votre application.
Gérer l’événement d’ouverture de boîte de dialogue	3. Dans votre gestionnaire d’ouverture de boîte de dialogue, renvoyez une réponse continue de module de tâche contenant des métadonnées de boîte de dialogue (titre, dimensions et carte adaptative à afficher). En C#, utiliser TaskInfo avec un ContinueTask wrapper. Dans TypeScript, utilisez .CardTaskModuleTaskInfo En Python, utilisez CardTaskModuleTaskInfo dans un TaskModuleContinueResponse.	3. Dans votre gestionnaire d’ouverture de dialogue, renvoyez une réponse continue du module de tâche contenant des métadonnées de boîte de dialogue avec une url propriété pointant vers la page web. Le domaine d’URL doit figurer dans le tableau dans le manifeste de validDomains votre application. En C#, utilisez .TaskInfo Dans TypeScript, utilisez .UrlTaskModuleTaskInfo En Python, utilisez UrlTaskModuleTaskInfo dans un TaskModuleContinueResponse.
Gérer l’envoi de la boîte de dialogue	4. Lorsque l’utilisateur appuie sur un Action.Submit bouton, Teams envoie un appel d’envoi de tâche à votre application avec les données du formulaire. 5. Vous pouvez répondre en : • Ne rien faire (tâche accomplie) • Affichage d’un message (C# : MessageTask, TypeScript/Python : TaskModuleMessageResponse) • Chaînage vers une autre boîte de dialogue (C# : ContinueTask, TypeScript/Python : TaskModuleContinueResponse)	4. La page web appelle la bibliothèque cliente JS Teams pour renvoyer des données. Teams envoie un appel d’envoi de tâche à votre application avec le résultat.

La section suivante décrit les métadonnées de boîte de dialogue qui définissent le contenu et l’apparence d’une boîte de dialogue.

Métadonnées de la boîte de dialogue

Les métadonnées de boîte de dialogue définissent le contenu et l’apparence d’une boîte de dialogue. Chaque langue utilise ses propres types pour représenter ces métadonnées :

• C# : TaskInfo (from Microsoft.Teams.Api.TaskModules)
• TypeScript : CardTaskModuleTaskInfo ou UrlTaskModuleTaskInfo (de @microsoft/teams.api)
• Python : CardTaskModuleTaskInfo ou UrlTaskModuleTaskInfo (de microsoft_teams.api)

Le tableau suivant répertorie les propriétés communes à toutes les langues :

Attribut	Type	Description
title	string	Cet attribut s’affiche sous le nom de l’application, à droite de l’icône de l’application.
height	valeur numérique ou chaîne	Cet attribut peut être un nombre représentant la hauteur du dialogue en pixels, ou small, medium, ou large. En C#, utilisez .Union<int, Size>
width	valeur numérique ou chaîne	Cet attribut peut être un nombre représentant la largeur de la boîte de dialogue en pixels, ou small, medium, ou large. En C#, utilisez .Union<int, Size>
url	string	URL de la page chargée à l’intérieur <iframe> de la boîte de dialogue. Le domaine de l’URL doit se trouver dans le tableau validDomains de l’application dans le manifeste de votre application. À utiliser UrlTaskModuleTaskInfo en TypeScript/Python, ou définir la Url propriété en TaskInfo C#.
card	Pièce jointe	Carte adaptative à afficher dans la boîte de dialogue. En C#, définissez la Card propriété sur TaskInfo avec un Attachment. Dans TypeScript, utilisez cardAttachment() avec CardTaskModuleTaskInfo. En Python, utilisez card_attachment(AdaptiveCardAttachment(...)) avec CardTaskModuleTaskInfo.

Remarque

La fonctionnalité de dialogue exige que les domaines des URL que vous souhaitez charger soient inclus dans le tableau dans le validDomains manifeste de votre application.

La section suivante spécifie le dimensionnement de la boîte de dialogue qui permet à l’utilisateur de définir la hauteur et la largeur de la boîte de dialogue.

Boîte de dialogue dimensionnement

Les valeurs et définir la hauteur et la largeur de la boîte de widthheight dialogue, en pixels. En fonction de la taille de la fenêtre Teams et de la résolution de l’écran, ces valeurs peuvent être réduites proportionnellement tout en conservant les proportions.

Si width et height sont small, mediumou large, la taille du rectangle rouge dans l’image suivante est une proportion de l’espace disponible, 20 %, 50 % et 60 % pour width et 20 %, 50 % et 66 % pour height:

La section suivante fournit des exemples de déclenchement et de gestion de boîtes de dialogue à l’aide du Kit de développement logiciel (SDK) Teams.

Déclencher une boîte de dialogue avec TaskFetchAction

Pour ouvrir une boîte de dialogue, envoyez une carte adaptative à l’aide d’un TaskFetchAction bouton. Lorsque l’utilisateur sélectionne le bouton, Teams envoie un rappel de tâche à votre application. Les données de value chaque bouton spécifient le type de boîte de dialogue à ouvrir (par exemple, { "data": "AdaptiveCard" }).

SDK C# v2.1

using System.Text.Json;
using Microsoft.Teams.Apps;
using Microsoft.Teams.Apps.Schema;
using Microsoft.Teams.Cards;

teams.OnMessage(async (context, cancellationToken) =>
{
    var card = new AdaptiveCard
    {
        Body = new List<CardElement>
        {
            new TextBlock("Task Module Invocation from Adaptive Card")
            {
                Weight = TextWeight.Bolder,
                Size = TextSize.Large
            }
        },
        Actions = new List<Action>
        {
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "AdaptiveCard" } })
            { Title = "Adaptive Card" },
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "CustomForm" } })
            { Title = "Custom Form" },
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "MultiStep" } })
            { Title = "Multi-step Form" }
        }
    };

    TeamsAttachment attachment = TeamsAttachment.CreateBuilder()
        .WithAdaptiveCard(JsonSerializer.SerializeToElement(card))
        .Build();

    await context.SendAsync(new MessageActivityInput().AddAttachment(attachment), cancellationToken);
});

SDK<C# 2.1(hérité)

using Microsoft.Teams.Api.Activities;
using Microsoft.Teams.Cards;

teamsApp.OnMessage(async (context) =>
{
    var card = new AdaptiveCard
    {
        Body = new List<CardElement>
        {
            new TextBlock("Task Module Invocation from Adaptive Card")
            {
                Weight = TextWeight.Bolder,
                Size = TextSize.Large
            }
        },
        Actions = new List<Action>
        {
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "AdaptiveCard" } })
            { Title = "Adaptive Card" },
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "CustomForm" } })
            { Title = "Custom Form" },
            new TaskFetchAction(new Dictionary<string, object?> { { "data", "MultiStep" } })
            { Title = "Multi-step Form" }
        }
    };

    await context.Send(new MessageActivity
    {
        Attachments = new List<Attachment>
        {
            new Attachment
            {
                ContentType = new ContentType("application/vnd.microsoft.card.adaptive"),
                Content = card
            }
        }
    });
});

TypeScript

import { Attachment, cardAttachment } from '@microsoft/teams.api';
import { App } from '@microsoft/teams.apps';
import {
  AdaptiveCard,
  TextBlock,
  TaskFetchAction,
} from '@microsoft/teams.cards';

function createTaskModuleAdaptiveCard(): Attachment {
  const card = new AdaptiveCard(
    new TextBlock('Task Module Invocation from Adaptive Card', { weight: 'Bolder', size: 'Large' }),
  ).withVersion('1.4').withActions(
    new TaskFetchAction({ data: 'AdaptiveCard' }).withTitle('Adaptive Card'),
    new TaskFetchAction({ data: 'CustomForm' }).withTitle('Custom Form'),
    new TaskFetchAction({ data: 'MultiStep' }).withTitle('Multi-step Form'),
  );
  return cardAttachment('adaptive', card);
}

app.message(/.*/i, async (context) => {
  await context.send({
    type: 'message',
    attachments: [createTaskModuleAdaptiveCard()],
  });
});

Python

from microsoft_teams.api import MessageActivity, MessageActivityInput
from microsoft_teams.apps import ActivityContext
from microsoft_teams.cards import AdaptiveCard, TextBlock, TaskFetchAction

@app.on_message
async def handle_message(context: ActivityContext[MessageActivity]) -> None:
    adaptive_card = AdaptiveCard(version="1.4").with_body(
        [TextBlock(text="Task Module Invocation from Adaptive Card", weight="Bolder", size="Large")]
    ).with_actions(
        [
            TaskFetchAction(value={"data": "AdaptiveCard"}).with_title("Adaptive Card"),
            TaskFetchAction(value={"data": "CustomForm"}).with_title("Custom Form"),
            TaskFetchAction(value={"data": "MultiStep"}).with_title("Multi-step Form"),
        ]
    )

    message = MessageActivityInput().add_card(adaptive_card)
    await context.send(message)

Gérer l’événement d’ouverture de boîte de dialogue

Lorsque Teams envoie un rappel de tâche, votre application renvoie le contenu de la boîte de dialogue. Le contenu peut être une carte adaptative ou une URL de page web. En C#, encapsulez les métadonnées de la boîte de dialogue dans une ContinueTask réponse. Dans TypeScript, retournez a avec type: 'continue'.TaskModuleResponse En Python, retournez un InvokeResponse contenant un TaskModuleContinueResponse.

SDK C# v2.1

using System.Text.Json;
using Microsoft.Teams.Apps;
using Microsoft.Teams.Apps.Schema;
using Microsoft.Teams.Apps.TaskModules;
using Microsoft.Teams.Cards;

teams.OnTaskFetch(async (context, cancellationToken) =>
{
    await Task.CompletedTask;

    // The button's Action.Submit payload arrives on the invoke value, nested under "data".
    string? data = context.Activity.Value?.Data is JsonElement value
        && value.TryGetProperty("data", out JsonElement dataProp)
            ? dataProp.GetString()
            : null;

    if (data == "CustomForm")
    {
        return TaskModuleResponse.CreateBuilder()
            .WithType(TaskModuleResponseTypes.Continue)
            .WithTitle("Custom Form")
            .WithWidth(510)
            .WithHeight(450)
            .WithUrl($"{botEndpoint}/customform")
            .WithFallbackUrl($"{botEndpoint}/customform")
            .Build();
    }

    if (data == "MultiStep")
    {
        var step1Card = new AdaptiveCard
        {
            Version = "1.5",
            Body = new List<CardElement>
            {
                new TextBlock("Multi-step Form: Step 1") { Wrap = true },
                new TextInput { Id = "name", Label = "Name" }
            },
            Actions = new List<Microsoft.Teams.Cards.Action>
            {
                new SubmitAction { Title = "Next" }
            }
        };

        TeamsAttachment step1Attachment = TeamsAttachment.CreateBuilder()
            .WithAdaptiveCard(JsonSerializer.SerializeToElement(step1Card))
            .Build();

        return TaskModuleResponse.CreateBuilder()
            .WithType(TaskModuleResponseTypes.Continue)
            .WithTitle("Multi-step Form")
            .WithWidth(400)
            .WithHeight(300)
            .WithCard(step1Attachment)
            .Build();
    }

    var dialogCard = new AdaptiveCard
    {
        Version = "1.5",
        Body = new List<CardElement>
        {
            new TextInput { Id = "usertext", Label = "Enter text" }
        },
        Actions = new List<Microsoft.Teams.Cards.Action>
        {
            new SubmitAction { Title = "Submit" }
        }
    };

    TeamsAttachment attachment = TeamsAttachment.CreateBuilder()
        .WithAdaptiveCard(JsonSerializer.SerializeToElement(dialogCard))
        .Build();

    return TaskModuleResponse.CreateBuilder()
        .WithType(TaskModuleResponseTypes.Continue)
        .WithTitle("Adaptive Card: Inputs")
        .WithWidth(400)
        .WithHeight(200)
        .WithCard(attachment)
        .Build();
});

SDK<C# 2.1(hérité)

using System.Text.Json;
using Microsoft.Teams.Api.TaskModules;
using Microsoft.Teams.Cards;
using Microsoft.Teams.Common;

teamsApp.OnTaskFetch(async (context) =>
{
    var activity = context.Activity;
    var json = JsonSerializer.Deserialize<JsonElement>(JsonSerializer.Serialize(activity));
    var data = json.GetProperty("value").GetProperty("data").GetProperty("data").GetString();

    TaskInfo taskInfo;

    if (data == "CustomForm")
    {
        taskInfo = new TaskInfo
        {
            Title = "Custom Form",
            Width = new Union<int, Size>(510),
            Height = new Union<int, Size>(450),
            Url = $"{botEndpoint}/customform",
            FallbackUrl = $"{botEndpoint}/customform"
        };
    }
    else if (data == "MultiStep")
    {
        var step1Card = new AdaptiveCard
        {
            Body = new List<CardElement>
            {
                new TextBlock("Step 1 of 2 - Your Name") { Size = TextSize.Large, Weight = TextWeight.Bolder },
                new TextInput { Id = "name", Label = "Name", Placeholder = "Enter your name", IsRequired = true }
            },
            Actions = new List<Action>
            {
                new SubmitAction().WithTitle("Next").WithData(
                    new Union<string, SubmitActionData>(new SubmitActionData
                    {
                        NonSchemaProperties = new Dictionary<string, object?> { { "submissiontype", "multi_step_1" } }
                    }))
            }
        };

        taskInfo = new TaskInfo
        {
            Title = "Multi-step Form",
            Width = new Union<int, Size>(400),
            Height = new Union<int, Size>(300),
            Card = new Attachment
            {
                ContentType = new ContentType("application/vnd.microsoft.card.adaptive"),
                Content = step1Card
            }
        };
    }
    else
    {
        var dialogCard = new AdaptiveCard
        {
            Body = new List<CardElement>
            {
                new TextBlock("Enter Text Here") { Weight = TextWeight.Bolder },
                new TextInput { Id = "usertext", Placeholder = "add some text and submit", IsMultiline = true }
            },
            Actions = new List<Action> { new SubmitAction { Title = "Submit" } }
        };

        taskInfo = new TaskInfo
        {
            Title = "Adaptive Card: Inputs",
            Width = new Union<int, Size>(400),
            Height = new Union<int, Size>(200),
            Card = new Attachment
            {
                ContentType = new ContentType("application/vnd.microsoft.card.adaptive"),
                Content = dialogCard
            }
        };
    }

    return new Response(new ContinueTask(taskInfo));
});

TypeScript

import {
  Attachment,
  TaskModuleRequest,
  TaskModuleResponse,
  UrlTaskModuleTaskInfo,
  CardTaskModuleTaskInfo,
  cardAttachment,
} from '@microsoft/teams.api';
import { AdaptiveCard, TextBlock, TextInput, SubmitAction } from '@microsoft/teams.cards';

function createTextInputCard(): Attachment {
  const card = new AdaptiveCard(
    new TextBlock('Enter Text Here', { weight: 'Bolder' }),
    new TextInput({ id: 'usertext', placeholder: 'add some text and submit', isMultiline: true }),
  ).withVersion('1.0').withActions(
    new SubmitAction({ title: 'Submit' }),
  );
  return cardAttachment('adaptive', card);
}

function createMultiStepStep1Card(): Attachment {
  const card = new AdaptiveCard(
    new TextBlock('Step 1 of 2 - Your Name', { size: 'Large', weight: 'Bolder' }),
    new TextInput({ id: 'name', label: 'Name', placeholder: 'Enter your name', isRequired: true }),
  ).withVersion('1.4').withActions(
    new SubmitAction({ title: 'Next', data: { submissiontype: 'multi_step_1' } }),
  );
  return cardAttachment('adaptive', card);
}

app.on('dialog.open', async (context) => {
  const taskModuleRequest = context.activity.value as TaskModuleRequest;
  const cardData = taskModuleRequest.data?.data ?? 'AdaptiveCard';

  if (cardData === 'CustomForm') {
    const taskInfo: UrlTaskModuleTaskInfo = {
      title: 'Custom Form',
      width: 510,
      height: 450,
      url: `${BOT_ENDPOINT}/CustomForm/`,
      fallbackUrl: `${BOT_ENDPOINT}/CustomForm/`,
    };
    return { task: { type: 'continue', value: taskInfo } } as TaskModuleResponse;
  }

  if (cardData === 'MultiStep') {
    const taskInfo: CardTaskModuleTaskInfo = {
      title: 'Multi-step Form',
      width: 400,
      height: 300,
      card: createMultiStepStep1Card(),
    };
    return { task: { type: 'continue', value: taskInfo } } as TaskModuleResponse;
  }

  // Default: AdaptiveCard
  const taskInfo: CardTaskModuleTaskInfo = {
    title: 'Adaptive Card: Inputs',
    width: 400,
    height: 200,
    card: createTextInputCard(),
  };
  return { task: { type: 'continue', value: taskInfo } } as TaskModuleResponse;
});

Python

from microsoft_teams.api import (
    AdaptiveCardAttachment,
    CardTaskModuleTaskInfo,
    InvokeResponse,
    TaskFetchInvokeActivity,
    TaskModuleContinueResponse,
    TaskModuleResponse,
    UrlTaskModuleTaskInfo,
    card_attachment,
)
from microsoft_teams.apps import ActivityContext
from microsoft_teams.cards import AdaptiveCard, SubmitAction, SubmitActionData, TextBlock, TextInput

@app.on_dialog_open
async def handle_dialog_open(context: ActivityContext[TaskFetchInvokeActivity]):
    data = context.activity.value.data
    card_data = data.get("data") if isinstance(data, dict) else data

    if card_data == "CustomForm":
        return InvokeResponse(
            body=TaskModuleResponse(
                task=TaskModuleContinueResponse(
                    value=UrlTaskModuleTaskInfo(
                        title="Custom Form",
                        width=510,
                        height=450,
                        url=f"{os.getenv('BOT_ENDPOINT', 'http://localhost:3978')}/customform",
                        fallback_url=f"{os.getenv('BOT_ENDPOINT', 'http://localhost:3978')}/customform",
                    )
                )
            )
        )

    elif card_data == "MultiStep":
        dialog_card = AdaptiveCard(version="1.4").with_body([
            TextBlock(text="Step 1 of 2 - Your Name", size="Large", weight="Bolder"),
            TextInput().with_id("name").with_label("Name").with_placeholder("Enter your name").with_is_required(True),
        ]).with_actions([
            SubmitAction().with_title("Next").with_data(
                SubmitActionData().with_data({"submissiontype": "multi_step_1"})
            ),
        ])

        return InvokeResponse(
            body=TaskModuleResponse(
                task=TaskModuleContinueResponse(
                    value=CardTaskModuleTaskInfo(
                        title="Multi-step Form",
                        width=400,
                        height=300,
                        card=card_attachment(AdaptiveCardAttachment(content=dialog_card)),
                    )
                )
            )
        )

    dialog_card = AdaptiveCard(version="1.0").with_body([
        TextBlock(text="Enter Text Here", weight="Bolder"),
        TextInput().with_id("usertext").with_placeholder("add some text and submit").with_is_multiline(True),
    ]).with_actions([
        SubmitAction().with_title("Submit"),
    ])

    return InvokeResponse(
        body=TaskModuleResponse(
            task=TaskModuleContinueResponse(
                value=CardTaskModuleTaskInfo(
                    title="Adaptive Card: Inputs",
                    width=400,
                    height=200,
                    card=card_attachment(AdaptiveCardAttachment(content=dialog_card)),
                )
            )
        )
    )

Gérer l’envoi de la boîte de dialogue

Lorsqu’un utilisateur appuie Action.Submit dans une boîte de dialogue, Teams envoie un appel d’envoi de tâche à votre application. Vous pouvez répondre en terminant la tâche, en affichant un message ou en ouvrant une autre boîte de dialogue (par exemple, pour enchaîner des formulaires à plusieurs étapes).

SDK C# v2.1

using System.Text.Json;
using Microsoft.Teams.Apps.TaskModules;
using Microsoft.Teams.Cards;

teams.OnTaskSubmit(async (context, cancellationToken) =>
{
    var activity = context.Activity;
    var json = JsonSerializer.Deserialize<JsonElement>(JsonSerializer.Serialize(activity));
    var submitData = JsonSerializer.Deserialize<Dictionary<string, object>>(
        json.GetProperty("value").GetProperty("data").GetRawText());
    var submissionType = submitData?.GetValueOrDefault("submissiontype")?.ToString();

    if (submissionType == "multi_step_1")
    {
        var name = submitData["name"]?.ToString();
        var step2Card = new AdaptiveCard
        {
            Body = new List<CardElement>
            {
                new TextBlock("Step 2 of 2 - Your Email") { Size = TextSize.Large, Weight = TextWeight.Bolder },
                new TextInput { Id = "email", Label = "Email", Placeholder = "Enter your email", IsRequired = true }
            },
            Actions = new List<Action>
            {
                new SubmitAction().WithTitle("Submit").WithData(
                    new Union<string, SubmitActionData>(new SubmitActionData
                    {
                        NonSchemaProperties = new Dictionary<string, object?>
                        {
                            { "submissiontype", "multi_step_2" },
                            { "name", name! }
                        }
                    }))
            }
        };

        TeamsAttachment step2Attachment = TeamsAttachment.CreateBuilder()
            .WithAdaptiveCard(JsonSerializer.SerializeToElement(step2Card))
            .Build();

        return TaskModuleResponse.CreateBuilder()
            .WithType(TaskModuleResponseTypes.Continue)
            .WithTitle("Multi-step Form: Step 2")
            .WithWidth(400)
            .WithHeight(300)
            .WithCard(step2Attachment)
            .Build();
    }

    if (submissionType == "multi_step_2")
    {
        await context.SendAsync($"Hi {submitData["name"]}, thanks for submitting! Your email is {submitData["email"]}", cancellationToken);
        return TaskModuleResponse.CreateBuilder()
            .WithType(TaskModuleResponseTypes.Message)
            .WithMessage("Multi-step form completed!")
            .Build();
    }

    var usertext = submitData?.GetValueOrDefault("usertext")?.ToString();
    await context.SendAsync($"You submitted: {usertext}", cancellationToken);
    return TaskModuleResponse.CreateBuilder()
        .WithType(TaskModuleResponseTypes.Message)
        .WithMessage("Thanks for submitting!")
        .Build();
});

SDK<C# 2.1(hérité)

using System.Text.Json;
using Microsoft.Teams.Api.TaskModules;
using Microsoft.Teams.Cards;
using Microsoft.Teams.Common;

teamsApp.OnTaskSubmit(async (context) =>
{
    var activity = context.Activity;
    var json = JsonSerializer.Deserialize<JsonElement>(JsonSerializer.Serialize(activity));
    var submitData = JsonSerializer.Deserialize<Dictionary<string, object>>(
        json.GetProperty("value").GetProperty("data").GetRawText());
    var submissionType = submitData?.GetValueOrDefault("submissiontype")?.ToString();

    if (submissionType == "multi_step_1")
    {
        var name = submitData["name"]?.ToString();
        var step2Card = new AdaptiveCard
        {
            Body = new List<CardElement>
            {
                new TextBlock("Step 2 of 2 - Your Email") { Size = TextSize.Large, Weight = TextWeight.Bolder },
                new TextInput { Id = "email", Label = "Email", Placeholder = "Enter your email", IsRequired = true }
            },
            Actions = new List<Action>
            {
                new SubmitAction().WithTitle("Submit").WithData(
                    new Union<string, SubmitActionData>(new SubmitActionData
                    {
                        NonSchemaProperties = new Dictionary<string, object?>
                        {
                            { "submissiontype", "multi_step_2" },
                            { "name", name! }
                        }
                    }))
            }
        };

        var taskInfo = new TaskInfo
        {
            Title = "Multi-step Form: Step 2",
            Width = new Union<int, Size>(400),
            Height = new Union<int, Size>(300),
            Card = new Attachment
            {
                ContentType = new ContentType("application/vnd.microsoft.card.adaptive"),
                Content = step2Card
            }
        };

        return new Response(new ContinueTask(taskInfo));
    }

    if (submissionType == "multi_step_2")
    {
        await context.Send($"Hi {submitData["name"]}, thanks for submitting! Your email is {submitData["email"]}");
        return new Response(new MessageTask("Multi-step form completed!"));
    }

    var usertext = submitData?.GetValueOrDefault("usertext")?.ToString();
    await context.Send($"You submitted: {usertext}");
    return new Response(new MessageTask("Thanks for submitting!"));
});

TypeScript

import {
  TaskModuleRequest,
  TaskModuleResponse,
  CardTaskModuleTaskInfo,
} from '@microsoft/teams.api';

app.on('dialog.submit', async (context) => {
  const taskModuleRequest = context.activity.value as TaskModuleRequest;
  const data = taskModuleRequest.data || {};
  const submissionType = typeof data === 'object' ? data.submissiontype : undefined;

  if (submissionType === 'multi_step_1') {
    const taskInfo: CardTaskModuleTaskInfo = {
      title: 'Multi-step Form: Step 2',
      width: 400,
      height: 300,
      card: createMultiStepStep2Card(data.name),
    };
    return { task: { type: 'continue', value: taskInfo } } as TaskModuleResponse;
  }

  if (submissionType === 'multi_step_2') {
    const { name, email } = data;
    await context.send(`Hi ${name}, thanks for submitting! Your email is ${email}`);
    return { task: { type: 'message', value: 'Multi-step form completed!' } } as TaskModuleResponse;
  }

  // Default: adaptive card text input
  const usertext = data?.usertext;
  await context.send(`You submitted: ${usertext}`);
  return { task: { type: 'message', value: 'Thanks for submitting!' } } as TaskModuleResponse;
});

Python

from microsoft_teams.api import (
    AdaptiveCardAttachment,
    CardTaskModuleTaskInfo,
    InvokeResponse,
    TaskModuleContinueResponse,
    TaskModuleMessageResponse,
    TaskModuleResponse,
    TaskSubmitInvokeActivity,
    card_attachment,
)
from microsoft_teams.apps import ActivityContext
from microsoft_teams.cards import AdaptiveCard, SubmitAction, SubmitActionData, TextBlock, TextInput

@app.on_dialog_submit
async def handle_dialog_submit(context: ActivityContext[TaskSubmitInvokeActivity]):
    data = context.activity.value.data
    submission_type = data.get("submissiontype") if isinstance(data, dict) else None

    if submission_type == "multi_step_1":
        name = data.get("name")
        next_card = AdaptiveCard(version="1.4").with_body([
            TextBlock(text="Step 2 of 2 - Your Email", size="Large", weight="Bolder"),
            TextInput().with_id("email").with_label("Email").with_placeholder("Enter your email").with_is_required(True),
        ]).with_actions([
            SubmitAction().with_title("Submit").with_data(
                SubmitActionData().with_data({"submissiontype": "multi_step_2", "name": name})
            ),
        ])

        return InvokeResponse(
            body=TaskModuleResponse(
                task=TaskModuleContinueResponse(
                    value=CardTaskModuleTaskInfo(
                        title="Multi-step Form: Step 2",
                        width=400,
                        height=300,
                        card=card_attachment(AdaptiveCardAttachment(content=next_card)),
                    )
                )
            )
        )

    if submission_type == "multi_step_2":
        name = data.get("name")
        email = data.get("email")
        await context.send(f"Hi {name}, thanks for submitting! Your email is {email}")
        return InvokeResponse(
            body=TaskModuleResponse(task=TaskModuleMessageResponse(value="Multi-step form completed!"))
        )

    usertext = data.get("usertext") if data else None
    await context.send(f"You submitted: {usertext}")
    return InvokeResponse(
        body=TaskModuleResponse(task=TaskModuleMessageResponse(value="Thanks for submitting!"))
    )

Instructions relatives au clavier et à l’accessibilité

Pour les boîtes de dialogue basées sur des URL qui chargent du contenu HTML, vérifiez l’accessibilité du clavier :

• Utilisez l’attribut tabindex dans vos balises HTML pour contrôler les éléments qui peuvent être ciblés et pour définir la navigation séquentielle au clavier avec les touches Tab et Maj-Tab .
• Manipulez correctement la touche Échap dans le code JavaScript pour votre page de boîte de dialogue.

Microsoft Teams garantit que la navigation au clavier fonctionne correctement de l’en-tête de la boîte de dialogue à votre HTML et vice-versa.

Exemple de code

Exemple de nom	Description	.NET	Node.js	Python
Modules de tâche du bot	Cet exemple d’application montre comment utiliser les boîtes de dialogue (appelées modules de tâche dans TeamsJS v1.x) à l’aide du SDK IA Teams.	View	View	View

Étape suivante

Utiliser des boîtes de dialogue dans des onglets

Voir aussi

• Cartes et boîtes de dialogue
• Vue d’ensemble du SDK Teams
• Boîtes de dialogue dans le SDK Teams
• Cartes adaptatives dans le SDK Teams
• Migrer à partir de BotBuilder