Teams Messaging Extension with embedded web view - structure of web application

Question

Once again I need help with my messaging extension. I want to show a custom web view within my messaging extension, like here https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/action-commands/create-task-module?tabs=dotnet ("With an embedded web view"). I now do not understand how the web application must be written and what the messaging extension is doing/calling in detail. So just entering a normal url will not work, I already tested. Does anyone can explain which kind of endpoint/structure my web application needs to get successfully called by messaging extension? I'm a little bit confused with the documentation MS provides.

Thanks for your help!

UPDATE: I want to describe more detailed what I'm doing

after user clicks messaging extension in my bot "OnTeamsMessagingExtensionFetchTaskAsyn" is called.
then the following is executed:

'

 var response = new MessagingExtensionActionResponse()
        {
                    Task = new TaskModuleContinueResponse()
                    {
                        Value = new TaskModuleTaskInfo()
                        {
                            Height = "large",
                            Width = "large",
                            Title = "Example task module",
                            Url = "https://xxxxxx.eu.ngrok.io/messages/messages",                            
                        },
                    },
                };
                return response;

when I debug my web application on "https://xxxxxx.eu.ngrok.io/messages/messages" I see that MessagesController is called which then wants to display the corresponding view

'

public IActionResult Messages()
{
    return View();
}
public MessagesController()
{
}

But the page is not showing up. Teams says it cannot reach the app.

UPDATE 2

I added the domain of my web application to "messageHandlers" in manifest, but it doesn't work
web site is not showing up when user hits message extension

then I tried another type of ActionResponse (the one that is used for configuration) and that worked

  return new MessagingExtensionActionResponse
  {
      ComposeExtension = new MessagingExtensionResult
      {
          Type = "config",
          SuggestedActions = new MessagingExtensionSuggestedAction
          {
               Actions = new List<CardAction>
               {
                   new CardAction
                   {
                       Type = ActionTypes.OpenUrl,
                       Value = "https://xxxxx.eu.ngrok.io/messages/messages",
                   },
                },
          },
      },
  };

UPDATE 3

picture 1 - browser dev tools are showing, that connection to website is established

picture 2 - with dev tools I forced teams to load iframe

Hilton Giesenow Hilton Giesenow · Accepted Answer · 2021-01-26T11:36:35

I'd suggest having a look at the various samples provided for this. There are samples in the Bot Framework sample gallery (https://github.com/pnp/teams-dev-samples/tree/master/samples) and also in the Teams PnP Samples (https://github.com/pnp/teams-dev-samples/tree/master/samples). You can also look in the overall Teams Sample gallery viewer at https://pnp.github.io/teams-dev-samples/.

There's a lot of discussion in the comments, but in the end the showLoadingIndicator setting was set to true, which was a complicating factor in this question as well and needed to be changed (or handled better in the web page - see here for more: Microsoft-Teams: Unable to test personal tab because of "There was a problem reaching this app" error)

Teams Messaging Extension with embedded web view - structure of web application

1 Answers