Using BlazoradeTeams in MainLayout

[gcaumont]

I would like to have a single application that works in both "Teams" and in a browser. For example in browser mode, I need a menu but not in "Teams" mode. I tried using <Template App > and <HostNotAvailableTemplate > in MainLayout.razor to set up the layout. But it doesn't work as expected. It's always the <LoadingTemplate> that's displayed. Could you help? Thank you

[MikaBerglund]

If I understand you correctly, I guess it's just a matter of how you build your application. For sure you can share a lot of functionality between a Teams app and a standard browser app. However, there is some wiring you have to take care of in a Teams App. And that wiring is taken care of for you by the TeamsApplication component.

So, if you build your website as a bunch of Razor components, you can reuse many, if not all, of those also in your Teams application. What I typically do is that I have a Page component that takes care of the routing. That page component just uses a View component and sets its parameters from the route or some other source. That View component then in turn builds up the UI using different components, that all have a specific role and responsibility.

Now, if you would do that for your browser application too, then you could reuse the View components directly in your Teams application with minimal coding required.

Or did I completely misunderstood what you are trying to achieve?

[ronaldpschutte]

https://www.youtube.com/watch?v=v_jLXCR1fzE

[bk-td]

@gcaumont this is exactly what I'm looking for as well. Would need authentication as well, which seems to be the biggest problem. Did you manage to get this working, any thought or idea's you can share?

[Renevdo]

I went for the following implementation, rendering a Teams application without authentication and doing the MSAL login myself, as in a standalone application.

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true"> <Found Context="routeData"> <CascadingValue Value="loggedInUser"> <CurrentUser @bind-LoggedInUser="loggedInUser" /> <TeamsApplication RequireDefaultScopes="false"> <ChildContent>Loading..</ChildContent> <ApplicationTemplate Context="teamsContext"> <CascadingValue Value="@teamsContext"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"> <NotAuthorized> <LoginDisplay /> Not authorized! </NotAuthorized> <Authorizing> <p>Please wait...</p> </Authorizing> </AuthorizeRouteView> </CascadingValue> </ApplicationTemplate> <HostNotAvailableTemplate> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(WebLayout)"> <NotAuthorized> <LoginDisplay /> Not authorized! </NotAuthorized> <Authorizing> <p>Please wait...</p> </Authorizing> </AuthorizeRouteView> </HostNotAvailableTemplate> </TeamsApplication> </CascadingValue> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Congratulations, you've reached outer space.</p> </LayoutView> </NotFound> </Router>