Teams Task Module URL is not loading the HTML, using ngrok url it works

87 Views Asked by At

When the user clicks an action button, the task module opens up but HTML is not getting loaded inside it.

enter image description here

If I use ngrok URL it works, when I replace it with the actual server URL it is not working.

Here actual server URL domain is the same messaging endpoint domain.

Messaging endpoint: https://xx.abc.efg.com/msteams/api/messages

HTML endpoint: https://xx.abc.efg.com/msteams/api/test

   {
      width: 500,
      height: 450,
      title: 'Task Module Fetch Example',
      url: `https://xx.abc.efg.com/msteams/api/test`,
      fallbackUrl: `https://xx.abc.efg.com/msteams/api/test`
    }

If I update URL with ngrok URL it works,

{
      width: 500,
      height: 450,
      title: 'Task Module Fetch Example',
      url: `https://cf6b-27-7-XXXx.ngrok-free.app/msteams/api/test`,
      fallbackUrl: `https://cf6b-27-7-XXXX.ngrok-free.app/msteams/api/test`
    }

If I directly open the HTML endpoint in the browser, my server logs show the route is reachable and the server responds with HTML.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://statics.teams.cdn.office.net/sdk/v1.5.2/js/MicrosoftTeams.min.js" asp-append-version="true"></script>

    <title>Microsoft Teams Task Module Tester - Custom Form</title>
</head>

<body>
    <script>
        microsoftTeams.initialize();
    </script>
    <div>Custom Form</div>
</body>

</html>

enter image description here

But when the user clicks the button task module opens but route /msteams/api/test is not even being hit for the HTML page.

0

There are 0 best solutions below