Microsoft 365 Community Microsoft Graph, 27 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build task automation solution between Planner and GitHub using Microsoft Graph

Description

In this 16-minute developer-focused demo, Anoop Tatti looks at interactions between GitHub (or any app) and Planner via Microsoft Graph. Use case – create a PR (pull request) that lands as actionable Planner task for repo’s owner. PR initiates workflow that calls a GitHub action. Graph handles authentication and Planner task creation. Task in Planner contains link to PR. Code walk-through - node.js project, 3 .ts files, uses MSAL, app reg in Azure AD. Conversation.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on March 2, 2023.

Demo Presenter
• Anoop Tatti (Content+Cloud) | @anooptells

Community Call Conversation
• aka.ms/Mar2-Demo1

Supporting materials
• Article - New Microsoft Graph Planner API capabilities now available | https://devblogs.microsoft.com/microsoft365dev/new-microsoft-planner-api-capabilities-now-available-in-microsoft-graph/
• Code snippet - create_task_on_pull_request.yaml | https://gist.github.com/anoopt/21a5ed9a251d7ae8eb991a310380a194
• Article - Create a task with Microsoft Graph using MSAL | https://github.com/marketplace/actions/create-a-task-with-microsoft-graph-using-msal

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

So in this session, we'll be looking at using app only model uh with Microsoft graph API support planner, with that I hope that this presentation goes according to the plan uh right. So just quickly about myself, my name is Anup I'm, a Microsoft MVP and the developer at a company called content. Cloud here are the various links that I use for my social media platforms. You can follow me on those if Direct, okay.

B

So, uh let's start with the first slide, which is about Microsoft graph and I'm sure everyone knows about Microsoft craft, so I've just taken these two sentences from the uh docs.microsoft.com, so Microsoft craft is the gateway to data and intelligence in Microsoft 365, and it provides a programmability model that we can use to access tremendous amount of data in Microsoft, 365 windows and Enterprise mobility and security uh in today's demo, we'll be focusing on getting Microsoft 365 data using Microsoft graph. So this slide is about interacting with Microsoft graph.

B

On the left side, we've got an extra external app, so this is the app that we will be building and uh in order to access Microsoft 365 data, which is on the right side that Microsoft 365 data can be anything, be it in SharePoint or planner, or anything else, Outlook calendar or not. So for our external app to access Microsoft, 365 data, we need Microsoft graph and the process is quite straightforward. Our external app uh asks Microsoft Microsoft graph to get us.

B

The data from Microsoft 365 Microsoft cloud verifies that everything with the external app is correct, as in it has got the required permissions and the client ID secrets and certificates. Everything is proper uh if, if all of that is okay, Microsoft graph will get the data from Microsoft 365.

B

and then pass that back to our external app. So there are several types of apps we can develop. One of such apps is GitHub, so, as you can see, on the left side, we've got GitHub and if GitHub has to access Microsoft 365 data, then we can use Microsoft graph and then get the data. And that's what we'll be looking at today. In particular, we'll be looking at interacting with the planner from GitHub, so what we'll do is we'll use Microsoft graph to interact with planner and then pass that data back to GitHub.

B

So in order to do that, what we'll do is we'll look at the repository in GitHub and that repository on on GitHub will have a GitHub workflow, and this workflow runs on a pull request.

B

So when there is a full request say on the main branch, this particular GitHub workflow will run, which we'll have a look at in a minute and then that workflow calls something called as a GitHub action that GitHub action has some code which passes the data to Microsoft graph and then Microsoft graph. Once it gets the data from from this GitHub action, it verifies the authentication say uh you know the client, ID and secret will be passed and the permissions uh so with that Microsoft Curve will verify that the app has got uh proper permissions.

B

And if that is the case, then Microsoft graph issues an instruction uh to create a planner task. And once that is done, we can see the planner task in the planner, and users can interact with that class. So this is just one example scenario of how we can use Microsoft graph in order to interact with planner tasks, and in this case the application we are using is GitHub, but that can be any other application as well all right with that in mind.

B

Let's take a look at the demo, so let me set up the scene here. What I have here is a user called Megan Bowen, obviously so, and I have opened a GitHub repository, which is aptly named as workflow test.

B

um So myself and Megan are the owners of this repository now. What I'll do is I have opened this repository as Megan I'll switch to the develop branch and then make a small change and create a pull request. So let's do that. What I'll do is I'll just edit the readme, and then you know this. Yes, demo add some nice text here and then commit that change, and then, if I go back to the repository, it says that the dev branch has been changed, so I can create a pull request.

B

So what I'll do is I'll go ahead and create a pull request.

B

And give it a nice title and the nice description and create that pull request right now. What this will do is this will trigger a workflow. So for that, what I'll do is I'll just switch to my GitHub account and then open the same repository and then I'll just go on to actions, and we can see that the workflow has triggered and it is running now. What this workflow will do is like I showed you in the slide earlier. It calls cir GitHub action, which then goes ahead and creates the task.

B

So, as you can see over here, um if I just zoom in a bit, the workflow calls a GitHub action called Ms graph, create task, and that task goes ahead and uh you know creates a task in in the planner.

B

Now, if we look at the planner plan itself, so here's the planner plant and, as you can see over here, there's a bucket called as pull request and in that bucket a new task has been created which says, review the pull request and if I open that it has got the title of the pull request, and it also has got the uh the link to the pull request. So, as the owner of this repository, um you know, I have a task in my planner and then I can click on that link.

B

And then you know, look at that pull request and go ahead and you.

A

B

Merge the pull request or close or or take any other action in this case. I'll just go ahead and more stable requests and then once that is done, I go back to my planner plan and.

A

B

Completed yeah, so that's the simple use case that we have here now just before showing you the code. I wanted to show you that we've got an app registration in.

A

B

And in that app registration, if I zoom in a bit that particular app has got tasks, dot, resite dot all permission and because it will be using this permission in order to create tasks in the planner. With that in mind, let me go back to the slides again.

B

So, just to recap, uh what we saw was a GitHub workflow which triggered on pull request and that called a GitHub action which then pass the data to Microsoft Microsoft graph uh then went ahead and created a task in the planner. Now our main focus here is the GitHub action which is used to call Microsoft graph. That's the one which we saw run earlier in the workflow, so that particular GitHub action is nothing but a node.js project.

B

So let's have a look at the code of that and uh you know that and see how the task gets created. Okay, so what you're seeing on the screen now is the code of that GitHub action. The link for this will be shared uh soon. uh I I have a slide for that uh towards the end, so this particular GitHub action. uh You know if you see on the right side. uh It's you know it's a normal node.js project. We've got our source folder and this and lib.

B

So it's just like a normal node.js project that you have I have focused here on the package.json file and we are using two particular packages here. One is azure slash, m cell node and the other one is Microsoft, slash, Microsoft graph client. These two packages are needed in order to interact with Microsoft graph okay, so this particular GitHub action has three main files: the auth.ts, graph.ts and main.ts.

B

All the code that I'll be showing you here will be in these three main files right. So, firstly, firstly, when the GitHub action triggers uh what we do is we pass certain details to this GitHub action. So uh I have highlighted all the details over here. uh What I'll just do is I'll quickly show you the workflow as to how we are passing this data so that uh it'll it'll it'll all make sense. So if I just go back to the workflow that we saw earlier.

B

It was this one and we saw that uh you know the the action was called over here and then all the details were passed. So if I quickly show you the workflow itself, sorry.

B

Just this one, so uh we can see here that we call this particular action and then pass all the details like the client, IDE client secret, the tenant ID, the plan, the bucket and other different, uh the title and the user ID uh to whom the task must be assigned so from the workflow. We are calling this particular GitHub action.

B

uh Now, if I go back to the slides again, so when the GitHub action is called, we get all the details from the workflow and then what we do is we parse all those details, Within These different variables. Once that is done, uh we create a new object for graph when we call that code. What happens? Is it just runs the Constructor in the graph.ds file with the client, ID secret and the tent ID that goes ahead and creates a new object of the auth class and over here in the Constructor of auth.ts.

B

We can see that we are, you know, creating a confidential client application. Now you might have seen this particular code in in various samples that are provided by Microsoft on how to use Microsoft graph. So I have just you know, taken this code from one of those samples. All we are doing here is creating an object of confidential client application.

B

Once that is done, uh we go back to the main.ts file. Here we create an object of the type planner task in this. We have the plan ID the bucket ID, the due date, whom to whom it must be assigned and the priority now uh and then, once we have that task object, we pass it to the graph dot, create task method. What does this do? uh As per the name? It creates task, but before that it has to get the craft client.

B

So we have this function called as get client and the get client function. uh We uh you know it first has to get the access token in order to get the access token. What we do here is uh you know we we compose the client credential requests, first, in which we pass the scope, which is craft.com dot default, and then we, let's skip cash S2. This is optional. If we set it to true, then it will skip the token cache on every request.

B

We can set it to false as well based on the requirement uh and then what we do is we call this important method, which is acquire token by client credential. uh Now, that's part of the MSL library and Microsoft have done all the hard work on. uh You know writing that method. So all we have to do is just call that method, and then, with that we get the access token and then once we have the access token. uh What we do is now uh we we create the graph client.

B

uh So for that we, uh in order to do that, we have to firstly create the auth provider and then, uh as you can see over here, we then just call the client, dot, init method and pass in the auth provider to that now.

B

This is part of the Microsoft graph client library that we saw earlier in the package store Json right with that we have the graph client and once we have the graph client, uh all we have to do is just call the graph API endpoint of in order to create create a planar task. In this case it is slash, planner, slash tasks and we post the task object that we saw earlier and once that is done, graph API goes ahead and creates the task in the planner.

B

So that was the code as you saw. It was very simple: uh we just called Microsoft graph in order to create a task all right, so in summary, uh Microsoft craft planner API now has app only permissions. This was I, think done a couple of months back. It already had delegated permissions, but there was a request for app.

B

Only permissions and Microsoft have now provided us that with that um and in order to use this, we have to create an Azure IDI, app registration and that particular application needs to needs to have tasks, dot, uh read dot all permission. If we are only uh you know, doing read activities.

B

uh If you want to do read and write activities, then the permission is tasks Dot trickitrite.all and we saw a scenario using GitHub in which a GitHub action uh was used to create a task, and then that particular GitHub action was called by a workflow which runs on pull, request and uh I'm. Sure there will be other scenarios in which this can be used in order to create tasks in in a planner.

B

Here are some links that were used as part of this demo and I see them in the chat already and with that I pass it back to you. David thank.

A

You awesome yeah. This is really really cool again. I love these Better Together scenarios that show how we can use the technologies that we all use together in a variety of ways. So thank you for highlighting that those links are in the chat, foreign.