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
- Permission to create Azure AD App Registration
- Global Admin Access to provide admin consent
- Premium license for user to use the app
Step: Download the User Directory App and Custom Connector Swagger 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.