{"id":1466,"date":"2017-11-29T11:22:17","date_gmt":"2017-11-29T16:22:17","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1466"},"modified":"2018-09-13T15:29:34","modified_gmt":"2018-09-13T19:29:34","slug":"how-to-make-a-custom-connector-for-powerapps-and-flow-that-calls-the-microsoft-graph-api","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-make-a-custom-connector-for-powerapps-and-flow-that-calls-the-microsoft-graph-api\/","title":{"rendered":"HOW TO: Make a custom connector for PowerApps and Flow that calls the Microsoft Graph API"},"content":{"rendered":"

[ Updated September 12, 2018 – Changed instructions to create an app registration made through the Azure portal and updated the screens to make the custom connector to match product revisions. ]<\/strong><\/p>\n

This post describes how to create a custom connector (API connector) to call the Microsoft Graph API from PowerApps and Flows.\u00a0 This process is especially helpful to know when you would like to use the MS Graph API from a PowerApp and\/or Flow and there is no connector available for the MS Graph API you wish to invoke.<\/p>\n

Register an application and specify permissions<\/h3>\n
The first step is registering an application in the Microsoft Azure Portal.<\/h5>\n

1. Sign into the https:\/\/portal.azure.com with an account that has permissions to make Azure Active Directory applications.<\/p>\n

2. In the menu on the left, click Azure Active Directory<\/strong><\/p>\n

3. Click App registrations<\/strong><\/p>\n

4. Click New application registration<\/strong><\/p>\n

5. Enter a Name\u00a0<\/strong><\/p>\n

Note:<\/strong> Throughout this example, the name IgniteCustomConnector<\/strong> is used.<\/p>\n

6. In Application type, select Web app \/ API<\/strong><\/p>\n

7. In Sign-on URL enter<\/p>\n

   https:\/\/msmanaged-na.consent.azure-apim.net\/redirect<\/pre>\n
8. Copy the Application ID<\/strong> value<\/p>\n
9. Open Notepad<\/strong> or another text editor<\/p>\n
10. Paste<\/strong> the Application ID<\/strong> in the text file<\/p>\n
11. Save<\/strong> the text file<\/p>\n
12. Click Settings<\/strong><\/p>\n
13. Click Keys<\/strong><\/p>\n
14. In the Passwords section enter a key Description<\/strong><\/p>\n
15. Select a value in the Expires<\/strong> drop down list<\/p>\n
16. Click Save<\/strong><\/p>\n
17. Copy<\/strong> the key value<\/strong><\/p>\n
18. Open Notepad<\/strong> or another text editor<\/p>\n
19. Paste<\/strong> the\u00a0key value in the text file<\/p>\n
20. Save<\/strong> the text file<\/p>\n
21. Click Required permissions<\/strong><\/p>\n
22. Click Add<\/strong><\/p>\n
23. Click Select an API<\/strong><\/p>\n
24. Select Microsoft Graph<\/strong><\/p>\n
25. Click Select<\/strong><\/p>\n
The next step is granting the delegated permissions your application needs to interact with the MS Graph API.<\/h5>\n
In this example we need the Read directory data (Directory.Read.All)<\/strong> and the Read all groups (Group.Read.All)<\/strong>\u00a0delegated permissions.<\/p>\n
26. In the DELEGATED PERMISSIONS<\/strong> section, select the check boxes next to Read directory data<\/strong> and Read all groups<\/strong>.<\/p>\n
27. Click Select<\/strong><\/p>\n
28. Click\u00a0Done<\/strong><\/p>\n
Note:<\/strong> When developing your own apps, make sure you add the permissions your application needs to perform other operations with the MS Graph API.<\/p>\n
Generate Swagger File<\/h3>\n
The API you use in the custom connector is described in JSON format.<\/h5>\n
1. Open Postman<\/strong><\/p>\n
2. Click Collections<\/strong><\/p>\n
\"\"<\/p>\n
3. Click the new collection button<\/strong><\/p>\n
\"\"<\/p>\n
4. In the Name<\/strong> textbox, enter a name for the collection<\/p>\n
Note:<\/strong> In this example, the name IgniteDemo\u00a0<\/strong>is used.<\/p>\n
5. Click Create<\/strong><\/p>\n
The collection bundles all of the Graph API calls we wish to make available in the custom connector.<\/p>\n
6. In the Get<\/strong> textbox, enter the URL<\/strong> of the Graph API you wish to invoke<\/p>\n
In this example, we are calling two different Graph APIs so we enter each URL one at a time and save it to the collection.<\/p>\n
Return the members of an AAD Group:<\/p>\n
https:\/\/graph.microsoft.com\/v1.0\/groups\/:groupId\/members<\/pre>\n
Return the tasks in a bucket in a Microsoft Planner plan<\/p>\n
 https:\/\/graph.microsoft.com\/v1.0\/planner\/buckets\/:bucketId\/tasks<\/pre>\n
Notice the path parameter is in the \u2018:groupId\u2019 format<\/p>\n
\"\"<\/p>\n
7. Click the Save<\/strong> button<\/p>\n
\"\"<\/p>\n
8. In the Save to existing collection \/ folder dropdown list<\/strong>, select the collection you created<\/p>\n
9. Click Save<\/strong><\/p>\n
10. To add another MS Graph API call, click the + button<\/strong>, then repeat the steps to add the URL and save it to the collection<\/p>\n
\"\"<\/p>\n
Here you can see both of the example MS Graph API calls we are making in Postman.<\/p>\n
\"\"<\/p>\n
11. Click the ellipses button<\/strong> for the collection you created and select Export<\/strong><\/p>\n
\"\"<\/p>\n
12. Select the Collection V1<\/strong> radio button
\n13. Click Export<\/strong><\/p>\n
\"\"<\/p>\n
14. Select a folder on your computer<\/p>\n
15. Click Save<\/strong><\/p>\n
Create custom connector<\/h3>\n
1. In a web browser, open the PowerApps<\/strong> web app in Office 365<\/p>\n
 https:\/\/web.powerapps.com<\/pre>\n
2. Click Data<\/strong>, then click Custom Connectors<\/strong><\/p>\n
3. Click Manage custom connectors<\/strong><\/p>\n
4. Click the + Create custom connector<\/strong> button<\/p>\n
5. Select Import a Postman collection<\/strong><\/p>\n
6. Click the folder<\/strong> button<\/p>\n
7. Select the JSON file you exported from Postman<\/strong><\/p>\n
8. Click Open<\/strong><\/p>\n
9. Enter the custom connector name<\/strong><\/p>\n
Note:<\/strong> In this example, the name IgniteCustomConnector<\/strong> is used.<\/p>\n
10. Click Continue<\/strong><\/p>\n
\"\"<\/p>\n
11. Click Security<\/strong><\/p>\n
12. In the Choose what authentication is implemented by your API<\/strong>\u00a0dropdown list, select OAuth 2.0<\/strong><\/p>\n
13. In the OAuth 2.0<\/strong> section, in the Identity Provider<\/strong> dropdown list<\/strong>, select Azure Active Directory (Outlook works too)<\/strong><\/p>\n
14. In the\u00a0Client id <\/strong>text box, enter the Application Id<\/strong> you saved to Notepad<\/p>\n
15. In the Client Secret<\/strong> text box, enter the\u00a0Key value<\/strong>\u00a0you saved to Notepad<\/p>\n
16. In the Scope<\/strong> text box, enter the permissions <\/strong>you configured when you made the application (Directory.Read.All, Group.Read.All<\/strong>)<\/p>\n
17. In the\u00a0Resource URL<\/strong> text box, enter\u00a0https:\/\/graph.microsoft.com<\/p>\n
18. Click Definition<\/strong><\/p>\n
\"\"<\/p>\n
14. Change the Operation Id<\/strong> to a valid name format. In this case, we use GetMembers<\/strong> and GetTasks<\/strong><\/p>\n
\"\"<\/p>\n
15. Click Create connector<\/strong><\/p>\n
16. Click the Test<\/strong> tab<\/p>\n
17. Click New connection<\/strong><\/p>\n
18. Click Create<\/strong><\/p>\n
19. Sign in to your Office 365 account<\/p>\n
Note:<\/strong> the account you use must be an admin<\/strong> account<\/p>\n
20. Click Accept<\/strong><\/p>\n
Note:<\/strong> if you get this error in this step, please check the redirect URL of the application is configured right.<\/p>\n
\"\"<\/p>\n
21. After the connection is added, navigate to the Test<\/strong> step again<\/p>\n
22. Select the connection you just created<\/p>\n
23. Test each operation you created, then copy the Response Body<\/strong> and save each Response body to a separate text file<\/p>\n
For more information about the parameters, see this document.<\/p>\n
https:\/\/developer.microsoft.com\/en-us\/graph\/docs\/concepts\/overview<\/a><\/p>\n
Testing the GetMembers operation<\/h5>\n
Note:<\/strong>\u00a0Make sure the result is not empty.<\/p>\n
\"\"<\/p>\n
Testing the GetTasks operation<\/h5>\n
Note:<\/strong>\u00a0Make sure the result is not empty.<\/p>\n
\"\"<\/p>\n
24. In Definition<\/strong> tab, scroll to Response<\/strong> section
\n25. Click Add default response<\/strong>, then paste in the corresponding Response Body<\/strong> you saved in the text files into the Body<\/strong> textbox.\u00a0 Do this for both of the actions.
\n26. Click Import<\/strong><\/p>\n
\"\"<\/p>\n
27. Click Update Connector<\/strong><\/p>\n
The Custom Connector for Microsoft Graph is now ready to use!<\/p>\n
Add the custom connector to a PowerApp and test<\/h3>\n
These steps describe how to configure a connection with custom connector in a PowerApp. This PowerApp will list the members of an AAD Group.<\/h5>\n
1. Create a new PowerApp by clicking the New app<\/strong> button<\/p>\n
\"\"<\/p>\n
2. Select the Blank app with Phone layout<\/strong><\/p>\n
\"\"<\/p>\n
3. Select Insert<\/strong> on top navbar<\/p>\n
4. Click Gallery<\/strong><\/p>\n
5. Select Vertical<\/strong> to add a gallery control<\/p>\n
\"\"<\/p>\n
6. Select the gallery control<\/p>\n
7. Click the dropdown arrow<\/strong> in the Gallery1 options<\/p>\n
8. Click the Add a data source<\/strong> button<\/p>\n
\"\"<\/p>\n
9. Select the connection for the custom connector<\/p>\n
10. Modify the Items attribute of the gallery to use <CONNECTOR NAME>.GetMembers(\u201cGROUP ID\u201d).value<\/strong><\/p>\n
11. Replace the <CONNECTOR NAME><\/strong>\u00a0with the name of the data connection<\/p>\n
12. Replace the GROUP ID<\/strong> with your own AAD Group Id<\/p>\n
13. Change the layout of the gallery to Title and subtitle<\/strong>, then select mail<\/strong> in Subtitle2<\/strong> and select displayName<\/strong> in Title2<\/strong><\/p>\n
\"\"<\/p>\n
14. Click Run<\/strong> on top navbar, the list of users is shown in the gallery<\/p>\n
\"\"<\/p>\n
Add the custom connector to a Flow and test<\/h3>\n
These steps describe how to configure a connection with a custom connector in a Flow. This Flow will list the members of an AAD Group.<\/h5>\n
1. Navigate to https:\/\/flow.microsoft.com<\/a><\/p>\n
2. Click My flows<\/strong><\/p>\n
3. Click Create from Blank<\/strong><\/p>\n
4. Click Create from Blank <\/strong>again<\/p>\n
5. Create a Schedule \u2013 Recurrence<\/strong> trigger, and configure it like this<\/p>\n
\"\"<\/p>\n
6. Click New Step<\/strong><\/p>\n
7. Click Add an action<\/strong><\/p>\n
8. In the search textbox<\/strong> enter Ignite<\/strong><\/p>\n
9. Click IgniteCustomConnector \u2013 Get Members<\/strong><\/p>\n
9. In the groupId<\/strong> textbox enter your own AAD GroupId<\/p>\n
\"\"<\/p>\n
10. Click the ellipses<\/strong> for the action that returns the group members<\/p>\n
11. Click Rename<\/strong><\/p>\n
12. Enter Get Members<\/strong><\/p>\n
\"\"<\/p>\n
13. In the Flow name<\/strong> enter Test Graph API<\/strong><\/p>\n
14. Click Save<\/strong><\/p>\n
15. Click the back arrow<\/strong><\/p>\n
16. Click More > Run now<\/strong> in the Flow detail page<\/p>\n
\"\"<\/p>\n
17. Click Run flow<\/strong> in popup window<\/p>\n
18. Click See flow run activity<\/strong><\/p>\n
19. Click the last entry in the Flow run log<\/p>\n
\"\"<\/p>\n
20. Click the Get Members<\/strong> action to expand it<\/p>\n
21. Scroll through the output of the GetMembers<\/strong> action to see the AAD Group members<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
[ Updated September 12, 2018 – Changed instructions to create an app registration made through the Azure portal and updated the screens to make the custom [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[103,120,96,88,104,121],"tags":[10,113,125,122,54,112],"class_list":["post-1466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-flow","category-mobile","category-office","category-office-365","category-powerapps","tag-custom-development","tag-flow","tag-how-to-flow","tag-how-to-powerapps","tag-mobile","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1466"}],"version-history":[{"count":26,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1466\/revisions"}],"predecessor-version":[{"id":1806,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1466\/revisions\/1806"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1557"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}