MGT Components are not rendering with MS Teams Toolkit

[krchome]

I didn't get the calendar events, to-do list and file-lists MGT components to render on the Teams browser on my local machine following the instructions in this blog:
https://devblogs.microsoft.com/microsoft365dev/build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio , although I created these artifacts on my M365 work/organisational account which I used to build the project.

I did get the login component to work, however which showed the logged in user
This is the learning outcome 3 as per this blog "Enhance your Teams app by accessing calendar events, to-do tasks and file folders" which could not be achieved.

I have attached an image of the output Teams browser with personal tab minus the contents from the MGT components although the logged in user is correctly rendered

Can you or anybody in the team help solve this urgent issue?
Regards,
Kaushik Roy Chowdhury
Member .NET Foundation

[WyldLynx]

By any chance did you work this out? I have the same scenario, appears to be connecting to graph ok, all scopes have been setup but nothing in the agenda, files and tasks - also checked that data exists.

[krchome]

Thanks and I could not work this out after many tries. The MGT just renders the login component and that's all it does. I have now gievn up on this after wasting several hours on several days. I have communicated to the author on LinkedIn as well as a comment on her video on YouTube but still didn't get a suitable reply.

[aycabas]

Hi @krchome, if you didn't try before, can you please try to add a scopes in the provider and let me know if it works:

<script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
        mgt.Providers.globalProvider = new mgt.Msal2Provider({
            clientId: "@Configuration["TeamsFx:Authentication:ClientId"]",
            loginHint: "@User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value",
            redirectUri: "/blank-auth-end.html",
            loginType: mgt.LoginType.Popup,
            authority: "@Configuration["TeamsFx:Authentication:OAuthAuthority"]",
            scopes: ["User.Read", "User.ReadBasic.All", "Calendars.Read", "Files.Read", "Files.Read.All", "Sites.Read.All", "Tasks.Read", "Tasks.ReadWrite", "People.Read"]
        });
</script>

[GeorgiaGit]

I've injected the code above without any success.

In my case, I don't even get the logged in user

I've built the app using https://devblogs.microsoft.com/microsoft365dev/build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio/ and I've also cloned the app from GitHub.

I get the same behavior every time. I am never prompted to grant Graph permission so the mgt doesn't render.

I put a debugger statement after code snipped above. When it hits the break point, loginHint is empty "". Not sure if that matters.

loginHint: "@User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value",
returns ""

If I hardcode my user name, it has not effect.

[aycabas]

Hi @GeorgiaGit, I am sorry to hear that you are still facing an issue. Did you try to check the browser settings, it might be blocking the pop-up features. You may try to test the productivity dashboard by replacing the person component with the login component which will require a login without single sign on and bring the user profile info:

Login Component:
<mgt-login></mgt-login>

[GeorgiaGit]

Ayca,

Thanks for taking the time to get back to me. Using the login component definitely helped with getting the sample operational!

Thank You!

I'll update once I find out the issue with mgt.LoginType.Popup. The browser doesn't seem to have an issue opening a pop-up when signing in using the control. Pop-Ups are allowed under settings in my browser as well.

[aycabas]

So glad login component helped @GeorgiaGit, keep me posted please if you find out what could be the reason it doesn't work through SSO without the login component.