Import Guide for User and Group Directory PowerApp Sample

This article is intended to provide step-by-step guidance on Importing a PowerApps Sample “User Directory” developed using PowerApps, Graph API, and CustomConnector.

Features of the App

• PowerApp to Browse Users and M365 groups details in tenant
• User can browse Groups and their details and it will also display all members of the Group
• On click, a particular member user can browser user’s detail and all the groups the user is part of…
• Users can also search groups and users by name.
• Pagination functionality to handled large grid view

Pre-Requisite

Step: Download the User Directory App and Custom Connector Swagger file

• Download PowerApps file
• Download Custom Connector Swagger json File

Step: Create App in Azure App Registration Portal

The very first step in this approach would be creating an app in the Azure portal to have a Client ID, Client Secret Key & configure API Permissions.

Open Azure Portal and open Microsoft Azure Active Directory.

Click on the App Registration menu from left-hand navigation and then click on New registration

Enter your app name and click on Register

Step: Generate Client ID & Client Secret Key

The next step is to copy the Client ID

Please note down this Application ID somewhere in the editor. This will be our Client ID.

Now next step is to generate our Client Secret Key

Click on “Add a certificate or secret” link

Then click on “New client secret”

Give a description as per your requirement and choose the expiration date for your secret key accordingly. Please note that once the expiration period is ended, you need to re-generate the client secret key and update your application, else your application will stop working. Click on Add once you did the selection.

Copy Value and note down into editor where you have noted Client ID. This will be our Client Secret Key.

Step: Configure API Permissions

Now we have to assign permissions to this Azure app. In the PowerApps we are fetching details of Groups and its member so we will need read permissions on Directory, Group & User.

Click on “API permission” from the left navigation and then click on “Add a permission”

Click on “Microsoft Graph”

Then select Delegated permissions

Now select below permissions from the given category one by one

• Directory  -> Directory.AccessAsUser.All
• Directory -> Directory.Read.All
• Group -> Group.Read.All
• GroupMember -> GroupMember.Read.All
• User -> User.Read
• User -> User.Read.All
• User -> User.ReadBasic.All

and click on “Add permissions”

Once you have added permission, you need to grant consent using an admin account. So if you are an admin user then you can simply click on “Grant admin consent”

You need to click “Yes” and grant the admin consent

If you are not an admin then in that case you have to ask your admin to do this step for you.

Once you have granted the admin consent, all the permission will be granted at once

Step – Importing Custom Connector

To import the custom connector, open PowerApps.

Now click on “Data” from the left navigation and click “Custom Connectors”

This will display all your custom connectors available into your environment. Click on “New custom connector” from the menu and select “Import an OpenAPI file”

Now give your connector name as “GraphAPI” (you can give name as per your requirement, in that case you need to your PowerApps accordingly). Browse the swagger file and click on Continue

Make sure to have Scheme as HTTPS and enter the Host as graph.microsoft.com and then click on “Security”

Enter “Client ID”

Enter “Client Secret Key”

Resource URL as “https://graph.microsoft.com”

Scope as “https://graph.microsoft.com/.default”

and then click on “Create connector”

After Creating Connector, copy the “Redirect URL” and save it to the editor.

Now you can close the connector.

Registering Redirect URL in Azure Application

Open the Azure App again and then click on Add a Redirect URI under the Overview section

Click on “Add a platform”

Select “Web” from the option

Enter the copied Redirect URL into the text box and click on “Configure”

Step – Importing PowerApp Package

Open PowerApps portal again and click on Apps and then click on “Import canvas app”

Upload the downloaded User Directory app and then click on “Select during import” option under connector.

Select the Graph API connector and then click on Save

And then click on “Import” button from the bottom right

Now you can see your PowerApps and Custom Connector imported successfully.

Now Open the App, it will ask you to Sign in to the custom connector. Click on “Sign in” button

Then click on “Create” button to create the connection into the PowerApps

After that, it will ask you to login to your Azure, after login click on Allow Button

Once you allow it, it will open the PowerApps into Editing mode.

Save the app and publish it.

Hope this helps.

If you have any questions or suggestions please reach out to us in the comment section.