Using Graph API to build better work context in Teams

Teams is amazing - but it's yet another silo. Let's fix that by bringing all relevant info of a Group right into it!

Comment

Inspiration

Microsoft Teams is AWESOME. Our team uses it all the time, and it replaced most of Skype for Business -conversations (and the persistent chat is great!). It also surfaces deocuments decently... But that's about it. It's lacking actual intranet integration, Planner is quite hidden, Outlook is another silo, calendar is nowhere to be seen... And nothing in Teams looks like the organization's branding otherwise looks like (except for maybe the suite bar..?).

I felt that there's a pretty low-hanging fruit to grab here. Adding a Teams-tab that brings together data from the Group's other resources and something from the organization's SharePoint intranet, too.

What it does

It integrates SharePoint-based intranet to a Teams channel via tab bringing any custom branding (and the footer!) from the intranet to the teams tab, too, and also shares the same footer (via reusable content list)! It also offers easy access to (Group) email, tasks (both in Outlook and Planner), a graphical representation of users (both current and potential), and surfaces the last modified documents from multiple folders to one view - which is one thing, where Teams out-of-the-box is somewhat clunky.

How I built it

With VSCode! I used the standard(?) ADAL-library for authentication to access Graph API, microsoftTeams JS-library for Teams integration (it's got the configuration steps and all that, too, since it's a Teams add-on), and Bootstrap for styles.

Challenges I ran into

  • Getting group photos was a PAIN! I finally ended up implementing that in a completely different manner than most of my code.
  • Authentication was somewhat difficult to get to work, but mostly because I used an outdated sample. It was only like 10 months old, but things change fast...
  • I'm not a designer - first version of the tab looked horribly. And it's still quite rough around the edges..

Accomplishments that I'm proud of

  • Authentication works pretty well, SPO-integration (fetching custom styles etc) works quite nicely.
  • Graph API is a real pleasure to use, and it was fun implementing all the different calls there, even if documentation is sometimes a bit flaky.

What I learned

  • Became better at using Bootstrap
  • Got a lot of practical experience in how to twist Graph API to work like I'd like it to!
  • Learned to (1) craft straightlinks to Planner tasks and (2) fix quite a few AAD -authentication issues.

I blogged a lot about my findings in my blog, at [link]https://www.koskila.net[/link]! And I still have enough findings for a couple of new posts - this experience will keep me blogging for a while :)

What's next for Using Graph API to build better work context in Teams

  • I built it with Typescript, but trying to introduce React turned out to take too much time with this tight of a deadline. I'd love to refactor it to use React, and then use Office UI Fabric to get better persona and document -cards!
  • When Microsoft publishes an API to programmatically provision Teams tabs, I'd like to provision one for each new Group

Built With

Share this project:

Updates