Todd Baginski's Blog - A SharePoint, Mobile, Office365, PowerApps and Azure Blog

HOW TO: Make a custom connector for PowerApps and Flow that calls the Microsoft Graph API

29 November 2017

Comments:

0
 November 29, 2017
 0

This post describes how to create a custom connector (API connector) to call the Microsoft Graph API from PowerApps and Flows.  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.

Create an application

The first step is creating an app in the Microsoft Application Registration Portal.

1. Sign into the https://apps.dev.microsoft.com web site with your Office 365 account
2. In the My applications section, click Add an app

3. Enter an Application Name and Contact Email
4. De-select the Guided Setup checkbox
5. Click Create

6. In the Application Secrets section, click Generate New Password
7. Copy the password shown in the popup window

8. Open Notepad or another text editor
9. Paste the application password in the text file
10. Save the text file
11. In the Platforms section, click Add Platform
12. Click Web
13. Paste the following URL in the Redirect URLs textbox

https://msmanaged-na.consent.azure-apim.net/redirect

14. In the Microsoft Graph Permissions section, click the Add button next to the Delegated Permissions heading

This is where you grant the permissions your application needs to interact with the MS Graph API. In this example we need the Directory.Read.All and Group.Read.All permissions.

15. Select the permissions you need, then click Ok

16. Click Save

Generate Swagger File

The API you use in the custom connector is described in JSON format.

1. Open Postman
2. Click Collections

3. Click the new collection button

4. In the Name textbox, enter a name for the collection
5. Click Create

The collection bundles all of the Graph API calls we wish to make available in the custom connector.

6. In the Get textbox, enter the URL of the Graph API you wish to invoke

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.

Return the members of an AAD Group:

https://graph.microsoft.com/v1.0/groups/:groupId/members

Return the tasks in a bucket in a Microsoft Planner plan

 https://graph.microsoft.com/v1.0/planner/buckets/:bucketId/tasks

Notice the path parameter is in the ‘:groupId’ format

7. Click the Save button

8. In the Save to existing collection / folder dropdown list, select the collection you created

9. Click Save

10. To add another MS Graph API call, click the + button, then repeat the steps to add the URL and save it to the collection

Here you can see both of the example MS Graph API calls we are making in Postman.

11. Click the ellipses button for the collection you created and select Export

12. Select the Collection V1 radio button
13. Click Export

14. Select a folder on your computer
15. Click Save

Create custom connector

1. In a web browser, open the PowerApps web app in Office 365

 https://web.powerapps.com

2. Click Connections
3. Click Manage custom connectors

4. Click the + Create custom connector button
5. In the How do you want to create your connector? section, select the Upload Postman collection V1 radio button
6. Click the folder button
7. Select the JSON file you exported from Postman
8. Click Open
9. Click Continue

10. In the Authentication type dropdown list, select OAuth 2.0
11. In the OAuth 2.0 section, in the Identity Provider dropdown list, select Outlook
12. Fill the form with Application Id, Password and Permissions you configured when you made the application
13. Click Continue

14. Change the Operation Id to a valid name format. In this case, we use GetMembers and GetTasks

15. Click Create connector
16. Click the Test tab
17. Click New connection

18. Click Create
19. Sign in to your Office 365 account
Note: the account you use must be an admin account
20. Click Accept

Note: if you get this error in this step, please check the redirect URL of the application is configured right.

21. After the connection is added, navigate to the Test step again
22. Select the connection you just created
23. Test each operation you created, then copy the Response Body and save each Response body to a separate text file

For more information about the parameters, see this document.

https://developer.microsoft.com/en-us/graph/docs/concepts/overview

Testing the GetMembers operation

Note: Make sure the result is not empty.

Testing the GetTasks operation

Note: Make sure the result is not empty.

24. In Definition tab, scroll to Response section
25. Click Add default response, then paste in the corresponding Response Body you saved in the text files into the Body textbox
26. Click Import

27. Click Update Connector
28. The Custom Connector for Microsoft Graph is now ready to use

Add the custom connector to a PowerApp and test

These steps describe how to configure a connection with custom connector in a PowerApp. This PowerApp will list the members of an AAD Group.

1. Create a new PowerApp by clicking the New app button

2. Select the Blank app with Phone layout

3. Select Insert on top navbar
4. Click Gallery
5. Select Vertical to add a gallery control

6. Select the gallery control

7. Click the dropdown arrow in the Gallery1 options

8. Click the Add a data source button

9. Select the connection for the custom connector

In this sample, the connection is Graph API Connection 1.

10. Modify the Items attribute of the gallery to use GraphAPICollection1.GetMembers(“GROUP ID”).value
11. Replace the GROUP ID with your own AAD Group Id

12. Change the layout of the gallery to Title and subtitle, then select mail in Subtitle2 and select displayName in Title2

13. Click Run on top navbar, the list of users is shown in the gallery

Add the custom connector to a Flow and test

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.

1. Navigate to https://flow.microsoft.com
2. Click My flows
3. Click Create from Blank

4. Create a Schedule – Recurrence trigger, and configure it like this

5. Click New Step
6. Click Add an action
7. In the search textbox enter graph
8. Click Graph API Collection 1 – Get Members

9. In the groupId textbox enter your own AAD GroupId

10. Click the ellipses for the action that returns the group members
11. Click Rename
12. Enter Get Members

13. In the Flow name enter Test Graph API
14. Click Create flow
15. Click Done
16. Click More > Run now in the Flow detail page

17. Click Run flow in popup window
18. Click See flow run activity
19. Click the > button next to the Flow run log

20. Click the Get Members action to expand it
21. Scroll through the output of the GetMembers action to see the AAD Group members

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.