In my past articles, we have seen various ways to show people data. Here let us take another approach to show people/user information. Similar to modal dialog on SharePoint, we will see how to provide modal dialog like experience on Power Apps.
Let us leverage people search section from our previous articles. Build the people search as explained in my previous post.
http://www.techwithnakkeeran.com/2019/10/powerapps-app-to-show-microsoft-teams.html
On click of any user in the Power Apps user list, we will try attaching modal dialog screen. The following picture depicts the modal dialog view.
The global variables used in the app/screen will be,
From existing screen set the user id variable value on click of item on gallery list, as shown.
The following elements are configured to get the modal dialog experience.
Modal Dialog Experience
Height : Max(App.Height, App.DesignHeight)
User Basic Information
Then on the second rectangle, necessary content to be added. In my case, basic user information, contact information, and organization hierarchy.
Organization chart
Modal Dialog Close Icon
Let us leverage people search section from our previous articles. Build the people search as explained in my previous post.
http://www.techwithnakkeeran.com/2019/10/powerapps-app-to-show-microsoft-teams.html
On click of any user in the Power Apps user list, we will try attaching modal dialog screen. The following picture depicts the modal dialog view.
 |
| Modal Dialog View on PowerApps |
Global Variable
The global variables used in the app/screen will be,
- showPopupFlag - This is boolean flag, to be handled for hiding/showing modal dialog
- userId - The string variable, to contain the clicked/selected user id/email, to pass it onto modal dialog.
From existing screen set the user id variable value on click of item on gallery list, as shown.
Configure modal dialog like experience
The following elements are configured to get the modal dialog experience.
Modal Dialog Experience
- Insert a rectangle icon onto screen. This placeholder spread across the screen to provide grey out experience to the area, other than data place holder. Please fill in the following properties.
Fill : RGBA(0,0,0,0.7)
Width : Max(App.Width, App.DesignWidth)Height : Max(App.Height, App.DesignHeight)
- Insert another rectangle icon onto screen. This is the placeholder for the user profile data.
Fill : RGBA(255, 255, 255, 1)
Width & Height : According to your content/requirement
User Basic Information
Then on the second rectangle, necessary content to be added. In my case, basic user information, contact information, and organization hierarchy.
- Basic information place holder contains the following elements.
- Image place holder: Office365Users.UserProfile(userId).DisplayName
- Label for Job Title : Office365Users.UserProfile(userId).JobTitle
- Label for Department : Office365Users.UserProfile(userId).Department
- Label for Location : Office365Users.UserProfile(userId).OfficeLocation
- Similarly any other information can be filled.
Organization chart
For organization chart, add two galleries.
- For manager gallery, Set Items property to Office365Users.Manager(userId)
- For reportees gallery, Set Items property to Office365Users.DirectReports(userId)
Modal Dialog Close Icon
Add cancel icon to implement the close modal dialog functionality. Set onSelect property to Set(showPopupFlag,false)
The snapshot below shows the modal dialog after configurations.
The snapshot below shows the modal dialog after configurations.
