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

question from:https://stackoverflow.com/questions/65899338/teams-messaging-extension-with-embedded-web-view-structure-of-web-application

Answer 1

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)