View webpage on button click on Hero Card in Microsoft Teams - node.js

Question

I have a message extension running in MS Teams.
The search list displays the Hero Card.
On selecting one of them it displays something like below in the chat.
Part of code that displays the button:
...
heroCard.content.buttons = [{
type: 'invoke',
title: 'Open Attachment',
value: {
type: "task/fetch",
messageId: "12345",
}
}];
I am looking to run my angular app on clicking Open Attachment which displays the documents.

Answer 1

I figured out the way to proceed using Microsoft Docs: Use task modules from bots
First I need to tweak the hero card button to pass my data.
...
heroCard.content.buttons = [{
type: 'invoke',
title: 'Open Attachment',
value: {
type: "task/fetch",
messageId: "12345",
data: attachments
}
}];
The second thing is to handle the fetch request:
async handleTeamsTaskModuleFetch(context, action) {
var attachments = action.data.data
return {
task: {
type: 'continue',
value: {
height: 400,
width: 400,
title: 'View Documents',
url: `https://example.io?data=${attachments}`
}
}
};
}
Note: the URL must be in the valid domain of the manifest - otherwise you'll see the blank page.
The below is the final output: