PowerApps

PowerApps – Custom Connectors

Posted by

Microsoft has offered hundreds of connectors (and the list is growing) which helps us to consume the services offered by various line of business applications or 3rd party providers. However, all the possibilities and capabilities that the businesses demand; cannot be fulfilled by standard connectors and hence a need for a custom connector arises. In this blog, it is to connect to Office 365 Graph APIs.

I want to create a PowerApp, that offers the functionality to request for a modern team site (which is an Office 365 group connected site). So, I want to make sure that the Office 365 group that is being requested is not already present and hence I want to check if the Office 365 group is available or not within the PowerApp using Graph APIs and custom connector before the request is submitted.

An example of an Office 365 group connected team site Standard Team having mailNickName as StandardTeam can be found using the graph query as below.

https://graph.microsoft.com/v1.0/groups?$filter=mailNickName eq 'StandardTeam'

The above query will return me 0 or more results.  If it is 0, then the Office 365 group is not present and hence I can create a new Office 365 group with the name StandardTeam. I can pass this as a parameter from the PowerApp to the custom connector that I want to build.

In order to achieve the above requirements, we must

1. Create an Azure Active Directory Application

Within the Azure portal, navigate to the Azure Active Directory and click on App registrations as shown in the below screen shot. As you can see that the App registration is in preview stage hence couple of steps might vary in the future.

Register the new app by clicking the New registration button and give a friendly name to the application.  I kept the default supported account types (Accounts in this organizational directory only). You can choose it according to your requirements and provided the Redirect URI as https://login.windows.net

Click Register to create the azure active directory application. Once the application is created, we must add a client secret. In the newly created Oapplication, click on Certifications and secrets and then on New client secret button.

Set the description as ClientSecret and expiration as Never.  Click on Add, to save the ClientSecret and make sure to copy the new client secret value. You won’t be able to retrieve it after you leave this blade.

The next step is to grant appropriate permissions to this application so that it can communicate with the Office 365 graph APIs.  For this, click on API permissions and then on Add a permission and select Microsoft Graph.

Later in the permissions selection blade, under Application permissions select Group.ReadAll (Read all groups) permissions and click on Add permissions.  Repeat the same under Delegated permissions. Grant the admin consent by clicking on the Grant admin consent button. The below screen shows the required permissions that are set.

Finally, our azure active directory application is ready with the following details 

Display name: Office 365 Graph API
Application (client) ID: <YOUR CLIENT/APPLICATION ID>
ClientSecret: <YOUR CLIENTSECRET>
Directory (tenant) ID: <YOUR DIRECTORY/TENANT ID>
Permissions: Application -> Group.ReadAll & Delegated -> Group.ReadAll

2. Create a Custom Connector

It’s time for us to create a custom connector and to do so navigate to https://web.powerapps.com and click on Custom connectors menu from the left navigation.

Click on Create custom connector and provide the details.

General information 
Icon background color: #8B0000
Description: Office 365 Graph API Connector
Scheme: HTTPS
Host: graph.microsoft.com
Base URL: /
Security 
Authentication type: OAuth 2.0
Identity Provider: Azure Active Directory
Client Id: <YOUR CLIENT/APPLICATION ID>
Client secret: <YOUR CLIENTSECRET>
Login URL: https://login.windows.net
Tenant ID: common
Resource URL: https://graph.microsoft.com
Scope: Scope

Click on Create connector and once the custom connector is created, the Redirect URL is automatically added.

We must copy this Redirect URL and add it in the Azure Active Directory application that we created; under Authentication section in the Redirect URIs as shown in the below screen shot.

Now, it’s time to define the actions (or methods) that our custom connector is going to perform, and this can be done in the next step Definition and add a New action as per below details

Definition 
Summary: Get O365 Groups
Description: Gets the Office 365 groups
Operation ID: GetO365Groups
Visibility: none (Learn more)

In the Request section click on Import from sample
Verb: Get
URL: https://graph.microsoft.com/v1.0/groups?$filter=

Go to the graph explorer and search for one specific Office 365 group in your tenant and copy the results. On the Definition screen within the Response section, click on default and then on Import from sample. Paste the results that we copied, in the Body section.  This is how we tell our custom connector as to what kind of response it can expect.

Test

Update the connector and then Test.  We must create a new connection in the Test section. Once the connection is created, it will be visible on the Connections page. When you go back to the Custom connectors page, you see the newly created custom connector.  Click on the Edit icon to test the connector before we integrate it within the PowerApp.

Add the filter condition as mailNickName eq ‘sitename’ then you see the response with Status as OK (200) and the results of the request

Test the operation and if an Office 365 group with mailNickName as ‘sitename’ exists, then you get the results in the value array otherwise the value array is empty with 0 records.

3. Consume the custom connector in PowerApps

Let us now consume our newly created custom connector in the PowerApps.  Login to https://web.powerapps.com

Click on Create and then on Canvas app from blank (I choose the Phone format) and give the app a name (Office 365 Graph API Test App). I added Label (SiteTitleLabel), Label (ResultOutput), Label(FilterQuery) and a Text (SiteTitleTextInput) controls on the form.

We will now add our custom connector that we created in previous step (Office 365 Graph API Connector) to the PowerApp. To do so, click on View and then on Data sources which will open the Data source pane.  Add Office 365 Graph API Connector by clicking on Add data source.  We can now use this in our PowerApp.

Set the following formula’s on the controls as mentioned below

Label FilterQuery
Text = "mailNickName eq '" & SiteTitleTextInput.Text & "'"
Label SiteTitleTextInput
OnChange = 
If(
     !IsBlank(SiteTitleTextInput.Text),
     ClearCollect(
         Collection1,
         Office365GraphAPIConnector.GetO365Groups(
{'$filter': FilterQuery.Text}).value
     )
 )
Label ResultOutput 
Text =  
If(
     CountRows(Collection1) > 0,
     CountRows(Collection1),
     0
 )

Here we go, save and run the app. Type in the site title (without spaces) which will be the mailNickName to query the Graph APIs. If the returned value is 0 then we can create a new site (Office 365 group with the provided name).

PowerApps and Flow supports integration with line of business applications or third party services using Custom connectors that adds unbound capabilities to existing set of standard connectors.