Monday, 11 November 2019

Modal Dialog Experience - Office 365 People Data on Power Apps

Views
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.
Modal Dialog View on PowerApps
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.
Once any element is added to modal dialog screen, set the visible property to showPopupFlag.

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.