#49 Tip: Show files from Microsoft 365 as cards

Every day we create files. Files represent our thoughts, plans, and ideas. By putting it all “on paper”, we can collaborate with others and use our collective intelligence to work smarter.

Files play a central role in our work. Not surprisingly, many collaborative apps that we build on Microsoft 365, integrate with files that we and others in our organization create.

In its latest version, Microsoft Graph Toolkit introduced a new component for showing files. With just a single line of code, you can show your files, files from your team, or files relevant to you. One line of code - that’s all you need, to show files in your app using Microsoft Graph Toolkit.

Like all toolkit’s components, the File list comes with its UI modeled after Microsoft’s Fluent UI design language. And like any other component, you can change its presentation to suit your needs. If the standard list view isn’t what you need, and you’d prefer to show files as document cards, here’s how you’d do it using hTWOo - a community-driven HTML and CSS implementation of the Fluent UI design.

Using Microsoft Graph Toolkit is the easiest way to connect your app to Microsoft 365. Have you tried it yet? If not, I’d highly recommend that you take the learning path that will teach you everything you need to know to use the toolkit in your apps.