Microsoft Groups Tab Software that makes use of the Graph API and Change FreeBusy Info

Microsoft Groups Tab Software that makes use of the Graph API and Change FreeBusy Info In my final submit I went over the brand new Graph perform known as getSchedule and the way this can be utilized to get the FreeBusy info for a Person (or Assembly Room, Useful resource Mailbox and many others) and show that as a desk just like the schedule assistant in Outlook.

On this submit I will present you the way you are able to do the identical factor in a Groups tab utility which will provide you with an output one thing like the next

The steps this app takes to show that is firstly

Step 1.

Authentication – The app authenticates to the Microsoft Graph API utilizing the javascript ADAL utilizing the silent Authentication movement for tab functions which is defined intimately right here .

Step 2

Get the Group Members – As soon as it has an Entry-Token it then Will get the members of the present Group from the Graph by first getting the Id from the Context of the group at present in focus from the Groups Consumer SDK after which making a request to the Teams Endpoint


Schedule Request – Make a schedule request of the Members of the Group (word this operation is barely in Beta in the mean time). This returns the FreeBusy info for the members of the group in 30 minute timeslots for the working hours interval I am displaying. Observe the Timezone from the browser (or Groups Consumer) is used right here. Incorrect Time zone of timezone variations are one thing that may have an effect on the outcomes of this operation.


Construct the HTML to Show- Construct the above FreeBusy desk from the Outcomes


Get the UesrPhotos –   Backfill the person images asynchronously utilizing the Graph images endpoint.

That is it for the rundown on the purposeful aspect of how this Tab app works for extra of an outline on how Tab apps work basically take a look at my final submit which works a bit extra in depth on this. I’ve rewritten many of the code from that submit so its now ES6 and implements each guarantees and async features in JavaScript which eliminants a variety of muddle,logic fog and call-backs code the plagued the unique (if you happen to nonetheless utilizing IE none this may work but when your nonetheless utilizing IE your most likely utilizing Microsoft comedian chat).

I’ve additionally applied a config file in

So something that wanted to be hardcoded within the app is on this file which is principally

        clientId : “2cff1b6d-82d4-4dc0-9ac4-7f35b06cc64a”  – this the Azure App registration which it is best to create your personal of that may listing

        redirectUri : “/TeamsFB/app/silent-end.html” – From the Azure App registration

        authwindow :  “/TeamsFB/app/auth.html” – For the Slient Auth features

        hostRoot: “” – For the relative references within the js recordsdata

this makes it simple if you wish to change the host or use ngrok to host it, eg simply change hostRoot, Azure RedirectURI to the ngrok handle and try to be good to go.

Permissions for Azure App registration

As a result of this app accesses varied graph endpoints totally different oauth Grants should be allowed eg

  • Group members Person.Learn and Group.Learn.All
  • FreeBusyInformation   Calendar.Learn
  • UserPhotos Person.ReadBasic.All
Set up and Pre-Req

Azure app registration – you want to have an app registration that’s Authorised inside you tenant (see my final submit for extra particulars)

Aspect Loading – To make use of customized tab functions you first have to allow aspect loading of Apps within the Workplace365 Admin portal ref .The necessary half is  Sideloading is the way you add an app to Groups by importing a zipper file on to a group. Sideloading helps you to take a look at an app because it’s being developed. It additionally helps you to construct an app for inner use solely and share it along with your group with out submitting it to the Groups app catalog within the Workplace Retailer. “

As it is a customized utility you want to use the “upload a custom app” hyperlink which is offered whenever you click on ManageTeam-Apps tab see
(Observe if you happen to do not see  the “upload a custom app” examine that you’ve got aspect loading of apps enabled in your tenant config)

What you add here’s a Zip file containing your manifest file and two pictures that you just manifest refers to for eg
   “icons”: {
    “outline”: “Outline32.png”,
    “color”: “Colour192.png”

For this pattern that is situated in

These icons are what’s used within the UI to characterize your utility.

All of the code for this pattern is offered in GitHub right here

Its additionally hosted in GitHub pages if in case you have a improvement tenant and wish to take a look at it (you will have to first use the admin consent URL listed above).

Leave a Reply