HOW TO: Use Transparent Rectangles Effectively In a PowerApp
November 20, 2017
HOW TO: Create Shortcuts To PowerApps On Mobile Devices
January 16, 2018

[ 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. ]

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.

Register an application and specify permissions

The first step is registering an application in the Microsoft Azure Portal.

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

2. In the menu on the left, click Azure Active Directory

3. Click App registrations

4. Click New application registration

5. Enter a Name 

Note: Throughout this example, the name IgniteCustomConnector is used.

6. In Application type, select Web app / API

7. In Sign-on URL enter

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

8. Copy the Application ID value

9. Open Notepad or another text editor

10. Paste the Application ID in the text file

11. Save the text file

12. Click Settings

13. Click Keys

14. In the Passwords section enter a key Description

15. Select a value in the Expires drop down list

16. Click Save

17. Copy the key value

18. Open Notepad or another text editor

19. Paste the key value in the text file

20. Save the text file

21. Click Required permissions

22. Click Add

23. Click Select an API

24. Select Microsoft Graph

25. Click Select

The next step is granting the delegated permissions your application needs to interact with the MS Graph API.

In this example we need the Read directory data (Directory.Read.All) and the Read all groups (Group.Read.All) delegated permissions.

26. In the DELEGATED PERMISSIONS section, select the check boxes next to Read directory data and Read all groups.

27. Click Select

28. Click Done

Note: When developing your own apps, make sure you add the permissions your application needs to perform other operations with the MS Graph API.

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

Note: In this example, the name IgniteDemo is used.

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 Data, then click Custom Connectors

3. Click Manage custom connectors

4. Click the + Create custom connector button

5. Select Import a Postman collection

6. Click the folder button

7. Select the JSON file you exported from Postman

8. Click Open

9. Enter the custom connector name

Note: In this example, the name IgniteCustomConnector is used.

10. Click Continue

11. Click Security

12. In the Choose what authentication is implemented by your API dropdown list, select OAuth 2.0

13. In the OAuth 2.0 section, in the Identity Provider dropdown list, select Azure Active Directory (Outlook works too)

14. In the Client id text box, enter the Application Id you saved to Notepad

15. In the Client Secret text box, enter the Key value you saved to Notepad

16. In the Scope text box, enter the permissions you configured when you made the application (Directory.Read.All, Group.Read.All)

17. In the Resource URL text box, enter https://graph.microsoft.com

18. Click Definition

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.  Do this for both of the actions.
26. Click Import

27. Click Update Connector

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

10. Modify the Items attribute of the gallery to use <CONNECTOR NAME>.GetMembers(“GROUP ID”).value

11. Replace the <CONNECTOR NAME> with the name of the data connection

12. Replace the GROUP ID with your own AAD Group Id

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

14. 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. Click Create from Blank again

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

6. Click New Step

7. Click Add an action

8. In the search textbox enter Ignite

9. Click IgniteCustomConnector – 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 Save

15. Click the back arrow

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 last entry in 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