Power Apps Custom Connector using Microsoft Graph APIs

hello everyone uh today i'm going to uh show you a quick tutorial on how to create a custom connector in powerapps that uses graph apis microsoft graph apis so some context i said a lot i said custom connector i said graph apis but let's first understand why and what's going on here one is why custom connector those who are familiar with powerapps you might know that powerapps has a lot of out-of-band connectors that lot of things available out of box to let you access your data inside your organization or any other data sources but there could be some gaps and there are some gaps where you want something special something that's not available in the out of box connector and that's where these custom connectors are very helpful second is so why microsoft graph api uh if you're not familiar with microsoft graph api uh you should definitely check it out by the way along with this video i'm also publishing a medium article i'll put the link to that in the description below but here is that article that i'm publishing where i'll talk about microsoft graph api and i'll also give the link so if you have not seen that i encourage that you definitely go check out the link microsoft has great documentation on what is this microsoft graph api i'm just looking at this overview of microsoft graph it's a very powerful powerful set of apis that allows you to access different cloud services data so if you scroll down here you'll see different services of microsoft uh for example one node of of course office 365 insights calendar groups what have you uh you can make use of all the data in your power apps and any app for that matter but since we are talking about power apps here uh you can use it in the powerapps um so so very very useful when it comes to uh using some of this data from office 365 or onenote or teams or any other microsoft cloud products microsoft graph apis are very useful and now combine that with the custom connector and if something is not available very well in the outer band connector this tutorial is going to be very very helpful i talked about the medium article that i'm also publishing along with that and i'll leave the description one thing it's a fun fact uh i was a pm at microsoft and about three years ago i wrote an article on a very similar topic it's still available in the microsoft blog site and in my medium article i have given description of that it is this article and i use the same concept very similar concept and this article became very popular it's it's funny that people still write to me for this article ask me questions uh so it's it's great but a few things have changed since then in fact few things have become easier in microsoft powerapps so in this tutorial i will take slightly different approach but high level concept and use cases are roughly the same for example in the article that i wrote three years ago i use something called swagger file it's also called open api that file i had to kind of create and i put the link in the previous article but it's not easy and people still sometimes struggle to create the swagger file now microsoft has power apps has a different feature that doesn't require you to create the swagger file microsoft does it for you so we'll follow that approach so hopefully that gives you enough context on what are these different technologies that we're going to be using in this tutorial uh and why they're important in what kind of situations and what kind of use cases uh you can use these concepts in your powerapps so what will we build today uh we'll build a custom connector we'll use one of the graph api so let me talk about going back to microsoft graph documentation here is the graph documentation it has different uh different apis as you can see you can expand on any of these and you can see what's available there for you to make use of the one that we will be using is for users uh and this is the graph api that the user again this has many different application and the one that we'll be using will allow us to list the users in the organization i mentioned that graph also has something called graph explorer this is a fantastic tool written by microsoft so what that allows you sometimes documentations are very dry and they look abstract like looking at this different signature of different apis go to graph explorer and you can see for different kinds of apis you can just play around for example this is the api that i'm going to use in my application just say run query and you can see what kind of response you're going to get back i have signed in using one of my colleagues account here um and it shows me how what information is relevant for my organization but even if you don't sign in you can get some sample information so i encourage that you do play around but anyway so this is the api that we'll be using but you know what the concepts that we will be covering here it will be useful for any of the other graph api so for example if you want to do something on top of one note and that's what i see some of my customers and colleagues doing you can use the same concept it's just that you have to use the specifics of that api all right so what are the high level steps there are four high level steps and i have outlined those four high level steps also in this article that i am writing i was talking about high level steps are these four so what are those one is first you have to decide what graphic graph api to use and play around in the graph explorer we kind of briefly did that uh check out the documentation of microsoft play around with microsoft graph explorer and then pick okay so this is the api we want for my use case and this is what that api looks like the next step is you have to register that app in azure active directory and i'll talk more about why you have to do it but at high level if you register an app in azure active directory it allows you to use uh allows this app to use microsoft azure active directory identity identity platform so what that means is these graph apis happen to be apis that use microsoft identity so your microsoft account id and that's why you have to register that app in this active directory so that when we use it in powerapps platform uh the authentication mechanism that we're going to use will say that we want oauth it's a special type of authentication mechanism using azure active directory authentication these are a little bit of advanced concepts for people so if you are a beginner in power apps and this is the first video you're watching this might be too much for you because it requires that you understand a little bit about authentication what are these identity platform meaning what are the apis so if you are a newbie in powerapps who is not comfortable with these concepts i recommend that you first brush up your basic concepts and we have other videos for that uh this is more for slightly more advanced developers advanced people who want to make use of these advanced concepts in their power apps so you have to create a as a third step high level step you'll create a custom connector uh where you will use the app that you registered in the prior step in azure active directory okay so that that's how you create the connector we'll go through the details of how to do that and the last step is you're pretty much done you have your connector you have tested it but now it's time for you to use so it should be the most simple step once you have done the heavy lifting and uh created the connector using the apis that you chose to do but just to complete the loop just to show the complete scenario i'll also show you how to use that connected new power apps app all right so let's go through them one by one first step we briefly covered that but just to show that again go to this documentation of microsoft once you have your use case in mind and scenario in mind look at their documentation check out different services that they have and decide what you want definitely i'll recommend that look at graph explorer and try out these different apis this will give you very good idea of what kind of request you have to pass what can headers you get in the request and response here's the preview of the response what is the header in fact some of these information will be very useful when we when we create the connector in powerapps because they will ask you for some sample for request body header response and response header so for this tutorial we are just using this api so i have already decided that for my use case because i want to list all the users in my organization so with that we're pretty much done with this step let's look at the next step register an app in azure active directory and authorize it to use graph api so how to do that so this is an azure active directory so you have to go to azure portal here's my azure portal you'll see different services here i'm going to use azure active directory that's where you have to register your app and i say app it's not an app that you're creating it's like way of saying that these apis or whatever you have is allowed to use microsoft azure active directory resources so this is your active directory of uh it's called azure active directory uh sometimes i say active directory technically there's also another product called active directory azure active directory has similar features and similar functionality but this is not exactly the same going more into details of that is outside of the scope of this video but just be aware that if you just call it active directory that's not technically correct you have to say azure active directory all right so within azure active directory uh you see different options on the left nav i'll make it slightly bigger so that we can see it clearly you see different options in the left navigation and i'm looking for app registration so this is app registration is what i'm looking at you see my cursor i'll click on this and you will see that there's some app that i had already registered as preparing for this what i have to do is click on new registration that's how you register the new app give some friendly name i'll just say craftdemo what is the supported account type in this case i'm just going to use my own organization that means you're allowed to use directory within my own company which is fine and the common one for most of the scenarios now the last one although it says redirect uri is optional but for our scenario because we'll be using this in power apps as a custom connector where we'll have to ask some special privilege we do need to provide it so what value do you provide here uh you should go back to my article and i'll put the link here scroll down to the section where i have talked about this step and i have put what do you need to say here as the redirect uri so i'm just going to copy this here and put this back in this all right so with this information i'm just going to click register and now my app is getting registered there's not much that i had to do here now notice that i also got an application id or client id let's copy it i will need that in a later step and remember that and in my article i keep mentioning that so that you don't forget to do it it's not a big deal if you forget this id uh but still it will be handy to because you can always come back and get it but still it's it's a good practice to keep it somewhere so that you don't have to keep looking for it [Music] so for now i'm just gonna uh where should i keep it i should have opened a notepad but let me just open this note okay and let me create and i'll put this id okay and id just so that i don't forget there's another thing that we will need later and i'll come to it when we go to that step all right so we uh going back to my azure portal i have created an app and i have the app id next thing that i have to do is grant the right permissions to this app so we talked about so let me tell more about what that means now this api is now registered it can use uh active directory azure active directory identity identity platform what permission it has because not everybody is allowed to do whatever they want to because of security uh because of security limitations you go back to graph explorer or even documentation this also tells you if you look at modify permissions on what kind of permissions different apis in this category need so for the particular api that we are using in this tutorial i did some experiment and i know that apart from user read which is obvious and by default everybody gets it because you can sign in and read your own profile it's not a big deal but i also need since i'm listing all the users in the graph i also need additional permission that allows me to read the directory so how do i do that i clicked on adding and permission and the different options here but since we are using graph i'm going to use graph here and i'll click on delegated permissions and you will see uh there are different options here so different kinds of formations for different use case for my case i'll just look at directory um and within directory i'll see directory read all so i'm just selecting that and adding this permission so with this it is choosing that permission to add but you notice that this permission because this is slightly higher privilege because here you're getting the list of all users it needs something called admin consent what that admin consent means is like admin of your directory somebody who has more privilege that person has to kind of grant you that access so for my test case i'm also the admin for this directory so i'll just grant this access say yes now at the end of this both of these permissions are granted to this app now last thing that i'll have to do here is i was i kind of alluded to it earlier i will need to create a secret what is that secret it's kind of a key uh for this app that i am registering here uh that will that key will allow from other places so in this case uh connector that we'll be creating in powerapps environment so we will have to pass some secrets so that we know that hey this application in powerapps is allowed to uh call this api and it has the right secret so it's an authorized person so that any random person cannot just start using my app so i'll create a secret honestly these things don't matter so i'll just leave it as it is but feel free to put whatever description suits you i'm just going to use the default in one year you can choose whatever works your works for your scenario or your organization policy but the important part here is whatever secret is getting created i'm showing you my key because i'm i know that i'm going to destroy it after the tutorial so i don't care but for your situation uh please keep it a secret it should really be a secret because using this somebody can misuse your app and start calling it from their own environment or from their own app also so for now i'm just going to copy and put it in the same note and this is the key i'll be using later now it's very important to make note of this key now because when you come back you will not see this key again so you can create a new secret just in case you forget it so it's not the end of the world but the same key that you have created you can't see it that's for heightened security here so if i go back here and i think if i come back here i think that secret will be gone um so i can see it now because of caching but i've seen that many times when you come back you'll see this as a asterisk information because even you are not allowed to see the key yourself when you come back and that is for security just in case somebody else comes and sees the secret you can see that so now that key is not available here so it's very important that you have all these things so with these information uh i think we are we are done with these steps this high-level step in this category which is register an app in azure active directory and authorize it to use the graph api hopefully we have not missed any steps this article in this article i have called out all those things and i guess we should be fine i'm just quickly scrolling to make sure and yeah i'm done now let's go to the third step which is creating the custom connector so we are done with our steps in graph api in azure land here is the third step which is create a custom connected in powerapps environment so for that now let's go to powerapps so for powerapps i'm going to go to this url make.powerapps.com it's loading that environment i've put the link in my article also let's be a little bit patient okay and i'll make it a little bit bigger also it's more clear okay so this is my powerapps portal it's still loading some of the other things but meanwhile we can see the options on the left navigation you see this data option here when you expand this data option you'll see different options under data and within that you see this option called custom connectors that's the one we'll be using so go to custom connectors you'll see that i have already created some custom connectors so they will be in the list but we have to create a new custom connector so this is the one that i created earlier i'll click on new now pay attention here new custom connected they're different options here we will not go into details of each and every one of them but when i was mentioning by earlier blog from 2017 i talked about us using swagger file and i had given the reference to a swagger file that i had created swagger is also called open api so that option is this earlier this was the only option and that's why i had to create my own swagger file but now there's a better option which i'm preferring more is create from blank and the reason is that at this time my powerapps will just ask me some information that will create the swagger file for me which is much better for me okay so i can give name of the connector uh any name that you think is good for you and your organization as a graph demo and it's okay i think this has become too big okay so it's asking for some information now these icons and all uh they don't matter as far as technical feasibility is concerned but for your organization you might want to have special icon for your branding you can give a different color put some description i'm just leaving it as it is i'll just keep the on-premise data gateway unchecked we're not going to talk much about gateway but that's another advanced and very useful concept of powerapps okay so what do you put for host for host and i have given this information in the article but for host you just say this graph.microsoft.com and i have put that in the article so that you can copy and paste so i'll go back to my powerapps and i'll say graph.microsoft.com and leave rest of the fields as it is click next which is security uh so this is where hopefully things will start coming together for you right now it says no authentication that means this custom connector doesn't need any authentication but as you know for using our graph api we do need that authentication and the way we will use that authentication is called this auth mechanism called oauth2o now oauth is a very standard indus industry standard authentication mechanism if you have ever implemented sign in with google sign with facebook they all use oauth technology so when i see identity provider you'll see different options here but for our particular scenario this microsoft graph api uses azure active directory because that's where your organizational specific identity information is there so you chose that so you can see how different steps that we did earlier are being used here now what is the client id and client secret so remember we made note of two information earlier when we were registering our app in azure active directory so here it's time to make use of those information so client id let's see what is the client id so i'll go back to my note and i'll copy this client id and like i mentioned here this client id is something you can retrieve when you go back just in case you forgot to make note of it you could go back to your azure portal click on this app that you registered and you will see this application id or the client id here so that's okay even if you forgot to make note of now this one is harder we have made note of it so i'll go back to my notepad and copy this secret and paste it here but if you forgot to make note of it you go back there and you'll see that this secret you can't see just in case you forgot to make note of that or whatever if you have to change it it expired you can always create a new secret and then make note of it but for now since i made note of that key i'm not doing it this is the login url just leave it as it is don't do anything with the tenant id resource url okay so you can go back to my article and copy paste for different information but you just have to say graph.microsoft.com and the idea here is this we are accessing graph api so this is the base url of those graph api so that's what we are putting here login.windows.net because for logging in for using the authentication this is the url where users come to login okay so i'm just copying this leave the scope as it is you don't need to do anything redirect url this will be created when we save when we create the custom connector now you will notice once we create that this information will be same as what we used as the redirect url url when our uri when we said redirect uri for this app registration so go back here and i had made note of it but just in case you were wondering where did that information come from this information is exactly what powerapps will generate for you so uh i think at this time we can try creating connector otherwise maybe next step let's see um just waiting for this to create connector sometimes i think it asks you to create definition but i'm just taking it to chance so while it is doing it it's actually saving the connector uh okay so let it create and save while it is doing it uh let me talk to you about some of the things that you will do next next thing that you will do is when we go to definition is uh create a new action so what does it mean creating a new action uh creating a new action by the way this is created now uh so creating a new action means so far what you did you created a custom connector and that said that this app is allowed to use the api the graph api and you provided the authentication also but when we looked at graph api we saw that graph can do multiple things like it can look at users files calendars mails identity blah blah blah now we're looking at identity here by the way now actions refer to the specific api that you'll be calling so you notice that in the graph explorer we said that we'll be using this api v1 users graph.microsoft.com but so far we have been only using information till here so where will that be used how will our connector know that we have to call this particular api and that's what these actions will do for you in the next step so click on definition but before you that notice that this redirect url that was gen that is generated by powerapps is the same that we put in our graph api registration so okay so click on definition to create the actions you see right now there is no action created here now these individual actions will be created for the specific api call so in this case v1 users that you'll be making you're not limited to using only one action for a connector and that's powerful so tomorrow if in the same connector you want to add another action that makes use of some other api of graph you can just create another action for the same registered app you just have to [Music] give additional permission for that api but you can just keep adding actions so in this case let's create an action again you can make the action descriptive by giving summary or whatever but i'm just going to make it keep it simple and say get users and just copy the same thing most important thing that will matter here is the operation id operation id as you will see when i use this connector in powerapps is the main method that will be used for this connector for getting the list of users okay now visibility uh you can learn more but the idea high level here is that how do you want these operations information to be shown when users use it in the powerapps connector okay so now next two things that you have to do is request a response so those who are familiar with any rest api uses you know that this is a standard http construct request and response so what do you put for request earlier in the swagger world i had to think about all those things and put the proper definition but now all i will do is import from sample what sam how will i get the sample so before i do that again going back to my graph explorer will help in graph explorer i see that this uses get um get action and it has this api and these are the request headers and request body for this api there's no request body or header but for some other api there might be so i will go back here i'll say get let me copy the url from here and i'll leave header as it is but for some other api you might want to copy the header if it's relevant here and i will just say import and you're done with request part now let's come to response so i'll click on default and here also i'll import from samples i'll import from sample for this particular api let me go back to my graph explorer you'll see that response header is this so i'm just copying this header sample and powerapps has the smarts in place to look at the sample and infer what kind of schema it should generate so i'm just removing these two braces because these are the standard header information now request body and here also we can put a sample so i'll go back to my response that i got and i'll copy the whole thing and paste that in the body okay all right so i think my computer had some problem so i don't know what happened after i clicked on one button so i think most of the work is saved so i'll pick up from there let me start clicking on action so i'll say new action i talked about action earlier so i'm not gonna repeat okay so uh summary i'll just say get users because most you can put somebody in description as you need for your organization i'll put get users again uh and i'll put hopefully copyright users get users and that's it now for a request i'll say import from sample that's where me having seen this graph explorer helps a lot so i have request body and header i'll come back here i'll say get because this is get and this is the url i'm just using this url there's no header here as you can see for the request of this api uh for some api there might be so i'm just leaving it as it is and just click import we are done with the request part let's go to response i click on default and here also i'm going to import from sample so graph explorer is my friend here also i'll first go to header copy this and paste it here i'm just gonna remove these curly braces so that powerapps can easily parse it and let me go back to my response i have already seen what will that response look like i'll come back and paste here and that's it i click on import and you see that now my action power apps already already processed this and my action got these basic things you also see that i have this validation check mark green that means everything we did is correct and i will update my connector now so now um we have general information the security where we use the client id and secret we have the definition where we have the action uh and it's saving it says custom connector has been successfully saved now you can see one action here like i said earlier you can keep on adding new actions also in the same connector if you want to now my connector my custom connector is ready for testing uh so this is the next screen testing for testing i'll have to first create a connection so i'll create new connection and just uh giving a pop-up which is a saying some basic things that it provides a connection i'll say okay go ahead and create it it will probably ask for my authentication because now it's saying okay using your active directory it's this time it is using my azure active directory authentication to actually go and get all the permissions establish the connection and now i have my connection here so you see this graph demo that i created this is added as a connection in my powerapps environment so one way to test that is go back to your custom connector this is little bit of weird experience that powerapps has created uh that why it's not allowing me to test it then and there but whatever let me go back to this connector i'll click on edit go back to test step now you see this connection that we just created is already there i could just click test operations and see you see 200 code here that means it all went fine i'm getting the header information and i'm getting the information actually from a graph api this is all real information from my organization um that i can now use in my powerapps app so so far going back to the steps and let's go back to my article in the medium that i'm publishing a four step we are done with this we are done with this we have created a custom connector it all works fine our last step is to use the custom connector in the powerapps app so let me go back to my presentation so we are done with uh i'll go back to that step uh and now i so i'm going to create the custom connected and back to using the custom connector in powerapps so let's go back to my powerapps environment and you see the apps now you will do some basic stuff those who have seen my videos on basics of powerapps they will know what i'm doing here basically i'm just going to create a new app canvas app uh and i'll not do much anything fancy here because goal here was to primarily show how to cust create a custom connector and use a graph api and that goal is pretty much met uh but i'll still show you all the testing that connected in the environment uh kind of pretty much proof that it works but just to show how to use it uh i'll just create a blank app with the phone layout um and you can get very fancy here where you can create a gallery to show everything that you're getting from your connector but for the purpose of being quick here for this tutorial the many tutorials that uh i have created earlier where i talk about how to uh use different controls in canvas app so i'm not going to do that here's my very basic plain vanilla powerapps app blank one i will create i'll just add one button control here and on the click of this button i'm gonna get the invoke the custom connector but for me to use the custom connector you see this option on the left side which is all the data and it has a list of different environments and it will also list the connector custom connector and you see these diamond icon here that means these are premium connectors that means your basic powerapps plan doesn't cover it anyways i'll click on this and click on this so now this particular connector is added to your application and you can use it here so now on this on select event of this button i will write a very simple code and i've also given that code in my article so if you scroll down here this is all i'm going to do here so go back to my app and copy this so what it's doing clear collect as you know clear collect is and this is not the right name okay so clear collect is i change the name so i'm just fixing it okay so clear collect as you know is actually for this collection it's going to clear the previous value and put the value that graph demo dot get users gets it by default this also adds something called value so i'm just saying get the value of all the users so that i straight away get the right value in the collection and that's it i'll quickly preview it run it uh like i said i'm not get getting any fancy here uh i'll just run it and see what's happening here uh just to be sure there's no error so there's no error i'll go back to view see the collections and you'll see all users collection is populated with in this test directory i have two record and it got the data so that proves that i could create the custom connector and it's also working with the powerapps so that's pretty much it it was a long tutorial tutorial thanks for sticking through it uh if you have completed it so far congratulations uh this was uh this was great and uh i'll love to see how this tutorial helped you and how did you use it in your organization your your own app so please leave that as comment or write to us here are some ways on how to stay in touch with us like i mentioned we also publish on medium so look for medium.com at cloudratica cloud attica um you know if you're watching it on youtube you know our youtube channel so subscribe to it so that you keep getting these kind of articles and let us know uh what topics you want us to create more video on you can check out our website claudetika.com or email us at hello cloudattica.com happy to help you with any quick question or if you need some kind of training or coaching or consulting uh happy to help you there too all right so with that uh we are we have come to the end of this video thank you so much for watching have a great day bye

Channel: Cloudatica

Views: 2,598

Rating: 5 out of 5

Keywords: PowerApps, Azure, Microsoft Graph, Low Code development, Microsoft Power Automate, Microsoft Flow, Microsoft Power Apps, Azure Active Directory

Id: TemNrT2muFU

Length: 43min 26sec (2606 seconds)

Published: Sun Nov 29 2020