Task Modules｜Mastering Microsoft Teams Bots 4.1

4.1 Task Modules

By now, you’ve built a bot that can handle messages, guide conversations, and even render rich cards. But sometimes, the most efficient way to interact with users isn't through a sequence of chat messages — it’s through a form. A UI. A proper dialog box.

Enter Task Modules: full-fledged modal windows you can launch from your bot in Microsoft Teams. They can display HTML content (your own web page or app), collect structured input, and return values to your bot seamlessly.

Think of Task Modules as a way to embed a mini app inside a message — perfect for surveys, configuration, ticket creation, or anything too complex for a card or dialog.

4.1.1 What Is a Task Module?

A Task Module is a modal window that appears inside Microsoft Teams. It can host:

• An embedded web page (usually served from your own bot’s backend)
• JSON-formatted Adaptive Card content (in lightweight use cases)

It’s launched via an Action.Submit or invoke action and can return data to the bot upon closing.

4.1.2 Common Use Cases

• Filling out forms (IT tickets, vacation requests)
• Editing structured data
• Displaying complex UIs like tables or charts
• Configuring a tab or bot feature

4.1.3 Launching a Task Module

You typically launch a Task Module from a button in an Adaptive Card:

{
  "type": "Action.Submit",
  "title": "Open Form",
  "data": {
    "msteams": {
      "type": "task/fetch"
    },
    "action": "openForm"
  }
}
  

Your bot will receive a task/fetch invoke event. You can respond by returning a Task Module payload:

// Node.js
return {
  task: {
    type: "continue",
    value: {
      title: "Form Entry",
      height: "medium",
      width: "medium",
      url: "https://yourserver.com/form",
      fallbackUrl: "https://yourserver.com/fallback"
    }
  }
};
  

4.1.4 Receiving Data from the Task Module

When the user submits or closes the modal, your bot receives a task/submit invoke. You can handle the data and return a final message or update.

// Example: handling task/submit
if (context.activity.name === "task/submit") {
  const submittedData = context.activity.value;
  await context.sendActivity(`Thanks! You submitted: ${JSON.stringify(submittedData)}`);
}
  

4.1.5 Security and UX Considerations

• Always validate data submitted from the frontend
• Consider adding authentication to your embedded pages
• Use adaptive sizing (e.g., height: "medium") to match content length
• Keep interactions short and focused — Task Modules are meant for quick tasks

4.1.6 Developer Tip: Reuse Frontend

One advantage of Task Modules is that you can reuse existing frontend code (React, Vue, Blazor) — just make sure it runs securely under HTTPS and handles token-based auth if needed.

4.1.7 Summary

Task Modules are where your Teams bot begins to feel like a real app. They offer the best of both worlds: natural integration with Teams conversations, and the power of full-fledged web UI for complex interactions.

In the next section, we’ll explore Proactive Messaging — how your bot can initiate conversations, notify users, and push timely updates that make it feel truly smart.