Search code examples
botframeworkmicrosoft-teamsadaptive-cards

How to send data back from modal Task popup back to home tab with Teams Adaptive Card Tab app


I am using the Microsoft example https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/csharp

I have this running in my Azure environment just fine.

I would like figure out how to pass data from the modal popup back to the home Tab ("homeTab") and cause a refresh of the cards on the homeTab adding a text control to display the new value. (Age)

I have added a new control on the modal Popup (age) that is a dropdown to pick an age group.

Sample with new field on modal popup

This part of the solutions works, and pressing the "Close" button sends the correct task/submit event with the new data (Age) in the payload:

protected override Task<TaskModuleResponse> OnTeamsTaskModuleSubmitAsync(ITurnContext<IInvokeActivity> turnContext, TaskModuleRequest taskModuleRequest, ...

taskModuleRequest.Data ==

{{
  "msteams": {
    "type": "task/submit"
  },
  "Age": "18-29"
}}

I can't figure out the mechanics of getting the data from this event (task/submit) back into the homeTab??? I am missing something fundamental?


Solution

  • When the user finishes with a task module invoked from a bot, the bot always receives a task/submit invoke message. Task modules with Adaptive Cards work similarly to the HTML or JavaScript case. The major difference is that since there's no JavaScript when you're using Adaptive Cards, there's no way to call tasks.submitTask(). Instead, Teams takes the data object from Action.Submit and returns it as the payload of the task/submit event.

    You can try with below code snippet-

    private HttpResponseMessage HandleInvokeMessages(Activity activity)
        {
            var activityValue = activity.Value.ToString();
            if (activity.Name == "task/fetch")
            {
                Models.BotFrameworkCardValue<string> action;
                try
                {
                    action  = JsonConvert.DeserializeObject<Models.TaskModuleActionData<string>>(activityValue).Data;
                }
                catch (Exception)
                {
                    action = JsonConvert.DeserializeObject<Models.BotFrameworkCardValue<string>>(activityValue);
                }
    
                Models.TaskInfo taskInfo = GetTaskInfo(action.Data);
                Models.TaskEnvelope taskEnvelope = new Models.TaskEnvelope
                {
                    Task = new Models.Task()
                    {
                        Type = Models.TaskType.Continue,
                        TaskInfo = taskInfo
                    }
                };
                return Request.CreateResponse(HttpStatusCode.OK, taskEnvelope);
    
            }
            else if (activity.Name == "task/submit")
            {
                ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
                Activity reply = activity.CreateReply("Received = " + activity.Value.ToString());
                connector.Conversations.ReplyToActivity(reply);
            }
            return new HttpResponseMessage(HttpStatusCode.Accepted);
        }
    

    Sample Link-https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/app-task-module/csharp/Microsoft.Teams.Samples.TaskModule.Web/Controllers/MessagesController.cs#L84