Search code examples
node.jsbotframeworkmicrosoft-teams

How to retrieve Adaptive Card data on Microsoft Teams bot?


I have a bot created using Microsoft Bot Framework on Microsoft Teams. Once the dialog ends, I ask user for the feedback using the following Adaptive Card :

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "msteams": {
        "width": "Full"
    },
    "body": [
    {
        "type": "Container",
        "items": [
        {
            "type": "Container",
            "items": [
            {
                "type": "TextBlock",
                "text": "Feedback",
                "horizontalAlignment": "center",
                "weight": "bolder",
                "size": "large",
                "isSubtle": true,
                "color": "accent"
            },
            {
                "type": "TextBlock",
                "text": "What would you like to share with us?",
                "horizontalAlignment": "center",
                "weight": "bolder",
                "isSubtle": true
            },
            {
                "type": "ColumnSet",
                "columns": [
                {
                    "type": "Column",
                    "items": [
                    {
                        "type": "ActionSet",
                        "actions": [{
                            "type": "Action.ToggleVisibility",
                            "title": "Question",
                            "targetElements": [
                            {  
                                "elementId" : "Question",
                                "isVisible": true
                            },
                            {  
                                "elementId" : "Suggestion",
                                "isVisible": false 
                            },
                            {  
                                "elementId" : "Comments",
                                "isVisible": false 
                            }] 
                        }]
                    }]
                },
                {
                    "type": "Column",
                    "items": [
                    {
                        "type": "ActionSet",
                        "actions": [{
                            "type": "Action.ToggleVisibility",
                            "title": "Suggestion",
                            "targetElements": [
                            {  
                                "elementId" : "Question",
                                "isVisible": false
                            },
                            {  
                                "elementId" : "Suggestion",
                                "isVisible": true 
                            },
                            {  
                                "elementId" : "Comments",
                                "isVisible": false 
                            }] 
                        }]
                    }]
                },
                {
                    "type": "Column",
                    "items": [
                    {
                        "type": "ActionSet",
                        "actions": [{
                            "type": "Action.ToggleVisibility",
                            "title": "Comments",
                            "targetElements": [
                            {  
                                "elementId" : "Question",
                                "isVisible": false
                            },
                            {  
                                "elementId" : "Suggestion",
                                "isVisible": false 
                            },
                            {  
                                "elementId" : "Comments",
                                "isVisible": true 
                            }] 
                        }]
                    }]
                }]
            },
            {
                "type": "Input.Text",
                "id": "Question",
                "placeholder": "Enter Your Question...",
                "maxLength": 500,
                "isMultiline": true,
                "isVisible": true
            },
            {
                "type": "Input.Text",
                "id": "Suggestion",
                "placeholder": "Give Your Suggestion...",
                "maxLength": 500,
                "isMultiline": true,
                "isVisible": false
            },
            {
                "type": "Input.Text",
                "id": "Comments",
                "placeholder": "Give Your Feedback...",
                "maxLength": 500,
                "isMultiline": true,
                "isVisible": false
            },
            {
                "type": "ActionSet",
                "actions": [{
                    "type": "Action.Submit",
                    "title": "Submit Feedback",
                    "data": {
                        "msteams": {
                            "type": "imBack",
                            "value": "Feedback Submitted."
                        }
                    },
                    "style": "positive"
                }]
            }]
        }]
    }]
}

So, once the user selects either of the three options Question , Suggestion , Comments and adds the feedback in the Input.Text box , I want to get that information and send it back to the user in the chat. How do I achieve this?


Solution

  • This is what has worked for me. So instead of using

    "data": {
        "msteams": {
            "type": "imBack",
            "value": "Feedback Submitted."
         }
    },
    

    in the adaptive card actions I have just kept it as

    "actions": [{
        "type": "Action.Submit",
        "title": "Submit Feedback",
    }]
    

    After this I added a function in the dialog as

    async getFeedBack(stepContext) {
            let authHeaders = stepContext.options;
            if(stepContext.context.activity.value) {
                let feedBackData = stepContext.context.activity.value;
                feedBackData['Question'] = feedBackData['Question'] ? feedBackData['Question'] : ' ';
                feedBackData['Suggestion'] = feedBackData['Suggestion'] ? feedBackData['Suggestion'] : ' ';
                feedBackData['Comments'] = feedBackData['Comments'] ? feedBackData['Comments'] : ' ';
                const card = CardFactory.heroCard(
                    'Your Feedback',
                    '<b>Question:</b> ' + feedBackData['Question'] + '<br>' + '<b>Suggestion:</b> ' + feedBackData['Suggestion'] + '<br>' + '<b>Comments:</b> ' + feedBackData['Comments'],
                    null
                );
                card.id = stepContext.context.activity.replyToId;
                const message = MessageFactory.attachment(card);
                message.id = stepContext.context.activity.replyToId;
                await stepContext.context.updateActivity(message);
                await stepContext.context.sendActivity({ type: ActivityTypes.Typing });
                await stepContext.context.sendActivity("Thank You for your feedback.");
            }
            return await stepContext.endDialog(authHeaders);
        }
    

    The above function ensures that I get the Feedback and also updates the adaptive card into the hero card so that I can withhold user from making anymore updates to the feedback.