How to pass custom data into teams task module from bot adaptive card

Question

I have a teams bot (nodejs) that renders an adaptive card with some table data. We want to provide a richer data viewing experience by iframing a javascript widget inside of a task module that will display the data using interactive D3 charts.

Basically the adaptive card will have a "see more" button, which will invoke a task module containing the html contents.

The part I can't figure out is how to access the data from the html inside the task module. I realize that there is a global object called microsoftTeams that contains metadata and context, but it doesn't seem specific to the adaptive card that was clicked (the adaptive card that invoked the task module). It has much more global info used for teams such as the user and conversation metadata.

I was able to insert the data into the taskInfo object when invoking the task module as a custom param. So my question is, is there a way to access the taskInfo object from inside the HTML iframe?

Ghojzilla Ghojzilla · Accepted Answer · 2021-03-24T09:17:58

I am using query strings to get data from the server to the client (There might be a better way, hopefully @Saonti-MSFT comes back with an easier/cleaner way).

This is my task object:

task: {
  type: "continue",
  value: {
    url: `${process.env.HostName}?message=${JSON.stringify(Buffer.from(message).toString("base64"))}`,
    width: 500, 
    height: 736
  },
}

On the client side I then get the search query and convert it back do the following

const urlParams = new URLSearchParams(window.location.search);
const message = urlParams.get('message');

// Needed to remove the quotes and convert spaces to "+" as this was getting lost
const data = atob(message.replace(/"/g,"").replace(/\s/g, "+"));

NOTE: I was only doing this for a single string, but I don't see why would couldn't use an object if you converted it to a string on the server then parsed it on the client.

Hope this helps

How to pass custom data into teams task module from bot adaptive card

2 Answers