Unlocking Microsoft Teams Extensibility with Messaging Extensions - Bot Framework and Action Cards for Inventory Management

Microsoft Teams provides robust extensibility options that enable developers to enhance the platform’s functionality. One of the standout features for extending Teams is Messaging Extensions, which allows users to interact with external systems and services directly from within the Teams chat interface. Today, we'll focus on integrating Bot Framework with Messaging Extensions, using Action Cards for inventory management in a Tee Storage scenario. This setup not only lets users view inventory data but also manipulate it directly from the Teams chat interface.

What are Messaging Extensions with Bot Framework and Action Cards?

Messaging Extensions are a key aspect of Microsoft Teams apps that extend the functionality of the chat interface. When combined with the Bot Framework, they allow for powerful interactions with external services. Action Cards are a type of rich, interactive message card that enables users to take actions such as submitting data, making choices, or triggering workflows, all within Teams.

In the context of an inventory management system (like Tee Storage), Action Cards allow users to perform tasks such as updating inventory, adjusting stock levels, and retrieving item details. Through the Bot Framework, the extension can communicate with external APIs to retrieve and manipulate data, all while providing an interactive and seamless user experience in Teams.

How Does It Work?

1. Bot Framework Integration: The Bot Framework enables your app to communicate with users via the Teams chat interface. By using the Bot Framework's messaging capabilities, you can send Action Cards that present users with interactive options (such as buttons, forms, or input fields).

2. Action Cards: Action Cards provide rich, formatted messages that allow users to take actions directly within Teams. For example, in an inventory management app, an Action Card can display an item’s stock level and offer options like "Increase Stock," "Decrease Stock," or "View Details."

3. User Interaction: When users interact with the Action Card (e.g., by pressing a button to update the stock level), the Bot Framework sends the action data to the backend service, which then manipulates the inventory data (e.g., updating the stock count in the Tee Storage database).

4. Backend Integration: The backend system, such as a database or external API, handles the logic for updating and retrieving data. The Bot Framework facilitates the communication between Teams and this system, ensuring that data updates are reflected in real-time.

Example: Tee Storage Inventory Management with Action Cards

Imagine you're building a Tee Storage inventory management system in Teams, where users can view and manipulate inventory data through interactive Action Cards. Here’s a sample Action Card for updating the stock level of a specific item:

Copycopy code to clipboard
{
    "type": "adaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Tee Storage: Inventory Update",
            "weight": "bolder",
            "size": "large"
        },
        {
            "type": "TextBlock",
            "text": "Item: Cotton T-Shirt",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Current Stock: 50",
            "wrap": true
        },
        {
            "type": "Input.Number",
            "id": "newStockLevel",
            "placeholder": "Enter new stock level",
            "value": "50",
            "min": 0
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Update Stock",
                    "data": {
                        "action": "updateStock",
                        "itemId": "12345"
                    }
                },
                {
                    "type": "Action.Submit",
                    "title": "View Details",
                    "data": {
                        "action": "viewDetails",
                        "itemId": "12345"
                    }
                }
            ]
        }
    ],
    "version": "1.0"
}

Key Components:

• TextBlock: Displays item details such as the name and current stock level.
• Input.Number: Allows users to input a new stock level, which will be submitted when the user updates the inventory.
• Action.Submit: Two actions are available—"Update Stock" to submit the updated inventory count and "View Details" to retrieve more information about the item.

Bot Framework Logic

When the user submits the Action Card, the Bot Framework triggers an action based on the button they selected. For example, when the "Update Stock" button is pressed, the bot will send the new stock level to the backend for processing:

Copycopy code to clipboard
public class InventoryBot : ActivityHandler
{
    protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
    {
        var value = turnContext.Activity.Value as JObject;
        var action = value?["action"]?.ToString();
        
        if (action == "updateStock")
        {
            var newStockLevel = int.Parse(value?["newStockLevel"]?.ToString());
            var itemId = value?["itemId"]?.ToString();
            
            // Call backend API to update stock level in Tee Storage
            var success = await UpdateStockLevelAsync(itemId, newStockLevel);
            
            // Provide feedback to the user
            if (success)
            {
                await turnContext.SendActivityAsync("Stock updated successfully!");
            }
            else
            {
                await turnContext.SendActivityAsync("Failed to update stock. Please try again.");
            }
        }
        else if (action == "viewDetails")
        {
            // Call backend API to retrieve item details
            var itemDetails = await GetItemDetailsAsync(itemId);
            
            // Send item details back to the user
            await turnContext.SendActivityAsync($"Item Details: {itemDetails}");
        }
    }
    
    private async Task<bool> UpdateStockLevelAsync(string itemId, int newStockLevel)
    {
        // Logic to update stock in Tee Storage backend
        return true;
    }
    
    private async Task<string> GetItemDetailsAsync(string itemId)
    {
        // Logic to retrieve item details from Tee Storage backend
        return "Cotton T-Shirt - Size: M, Color: Red";
    }
}

Requirements for Creating Action-based Extensions with the Bot Framework

To create Action-based Extensions with the Bot Framework, you'll need the following:

1. Bot Registration: Register your bot in the Azure portal and obtain a bot ID and secret for authentication.
2. Teams Toolkit: Use Teams Toolkit to develop, test, and deploy your bot within Microsoft Teams.
3. Backend API: Set up a backend API to manage inventory data (e.g., a database or service that stores Tee Storage items).
4. Manifest Configuration: Define your Action-based Extensions and bot functionality in the Teams app manifest, making sure the Action Cards and their actions are correctly configured.

Use Cases for Action-based Extensions with Action Cards

1. Inventory Management: As shown in the example, users can view, update, and manage inventory levels directly from Teams using Action Cards.
2. Order Processing: Sales teams can approve, reject, or track orders in real-time using Action Cards, streamlining the order fulfillment process.
3. Task Management: Users can interact with task management systems, updating task statuses or assigning tasks using Action Cards.
4. Customer Service: Support teams can use Action Cards to update customer tickets, track issues, and escalate requests from within Teams.

Conclusion

Action-based Extensions, when combined with the Bot Framework and Action Cards, offer a seamless way to integrate Microsoft Teams with external systems. In the example of Tee Storage, users can view and update inventory data directly within Teams, improving productivity and streamlining workflows. With the power of the Bot Framework, you can create interactive, real-time experiences that let users manipulate data, trigger workflows, and interact with third-party services—all from within Teams.

By leveraging Teams Toolkit and the Bot Framework, developers can build powerful integrations for a wide range of use cases, whether it's inventory management, order processing, or customer service automation.

Let me know if you need further adjustments or if you’d like to explore more features!