PowerApps Department Org Chart

[KC]

Scope:

Department Org Chart that surfaces the selected employee's direct reports.

Requirements:

2 Blank Vertical Galleries

1 Blank Horizontal Gallery

First Things First!

Azure Active Directory.

I am using my developer tenant in this post but this will work the same on any tenant.

You may wish to check with your company policies on displaying org charts.

I have a client where displaying an Org Chart of all personnel is not allowed.

Settings

Turn off Scale to fit and Lock aspect ratio located under File->App settings->Screen size + orientation ->Advanced settings

Connect

Add the Office365Users connector.

In the App OnStart property add the following:

// OrgChart - Set to the Department Manager
// We reset the variable TopLevelManager to the selected manager and their direct reports.
Set(
    TopLevelManager,
    [DEPARTMENT MANAGER EMAIL ADDRESS / USERPRINCIPALNAME]
)

Department Manager

Insert a Blank Vertical Gallery on the canvas,

Height: 161

Width: Parent.Width

Name: DepartmentManager

X: 0

Y: 0

Items: 

Office365Users.UserProfile(TopLevelManager)

Place in the DepartmentManager gallery an image control, three labels, a Rectangle icon, a Person icon, and a button.

Image: (Rounded Photo centered horizontally and vertically within the gallery)

Name: ManagerPhoto

Width: 100

Height: 100

BorderRadius: 60

X: Parent.Width / 2 - ManagerPhoto.Width / 2

Y: Parent.Height / 2 - ManagerPhoto.Height / 2

Image:

// Determine if employee has uploaded an Image to their profile. 
// Profile images can be uploaded through Delve.
// If no image is available, display the Person Icon.
If(
    !IsBlank(ThisItem.UserPrincipalName),
    If(
        Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto = true,
        Office365Users.UserPhotoV2(ThisItem.UserPrincipalName)
    )
)

Label 1:

Name: ManagerName

Text: ThisItem.DisplayName

Color: RGBA(34, 181, 176, 1)

X: ManagerPhoto.X + ManagerPhoto.Width + 20 (Place to the right of the ManagerPhoto with 20 pixels of padding)

Y: 44

Label 2:

Name: ManagerTitle

Text: ThisItem.JobTitle

Color: RGBA(0, 0, 0, 1)

X: ManagerName.X

Y: 84

Label 3:

Name: ManagerDept

Text: ThisItem.JobTitle

Color: RGBA(0, 0, 0, 1)

X: ManagerName.X

Y: 116

Vertical Bar Icon: 

Icon: Rectangle

Width: 5

Height: 30

Fill: RGBA(34, 181, 176, 1)

X: ManagerPhoto.X + ManagerPhoto.Width / 2

Y: ManagerPhoto.Y + ManagerPhoto.Height + 10 (Place below the ManagerPhoto with 10 pixels of padding on top)

Person Icon: 

Icon: Person

Name: PersonIcon

Width: ManagerPhoto.Width

Height: ManagerPhoto.Height

Fill: RGBA(0, 0, 0, 0)

X: ManagerPhoto.X

Y: ManagerPhoto.Y

Button: 

Name: btnDeptManager

Width: 160

Height: 76

Text: Department Manager

X: 40

Y: 40

OnSelect: 

Set(
    TopLevelManager,
    [DEPARTMENT MANAGER EMAIL ADDRESS / USERPRINCIPALNAME]
)

NOTE: As you make changes to the app your controls may dissappear from time to time and you will see the Error icon, X in a red circle.

To fix this just select Run On Start in the App layer.

Also NOTE:

Responsive Design, if you manually move the control, the formula will be deleted and the X and Y will be set to a new hard coded coordinate. To fix this just add the appropriate formula once more.

1st Level Reports

Insert a Blank Horizontal Gallery onto the canvas just below the DepartmentManager gallery.

Height: Parent.Height

Width: Parent.Width

Name: Department

X: 0

Y: DepartmentManager.Y + DepartmentManager.Height

Items:

// We need to filter the DepartmentManager Direct Reports to only surface the direct reports for the given manager.
// We need to use the Not operator to only surface actual employee accounts whom have been assigned to a department 
// due to some accounts in Active Directory are not actual Employee Accounts. These accounts could be 
// Test Accounts, Room Accounts, Resource Accounts, Security Groups etc...

If(
    !IsBlank(First(DepartmentManager.AllItems).UserPrincipalName),
    Filter(
        Office365Users.DirectReports(First(DepartmentManager.AllItems).UserPrincipalName),
        Not(IsBlank(Department))
    )
)

Place in the Department Gallery an Image control, three Labels, a Rectangle icon, a Person icon.

Image: (Rounded Photo centered horizontally and vertically within the gallery)

Name: ReportPhoto

Width: 88

Height: 88

BorderRadius: 60

X: Parent.X / 2 + ReportPhoto.Width / 2

Y: Parent.Y / 2 - ReportPhoto.Height / 2

OnSelect: 

Set(TopLevelManager,UserPrincipalName)

Image:

// Determine if employee has uploaded an Image to their profile. 
// Profile images can be uploaded through Delve.

If(
    !IsBlank(ThisItem.UserPrincipalName),
    If(
        Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto = true,
        Office365Users.UserPhotoV2(ThisItem.UserPrincipalName)
    )
)

Person Icon: 

Icon: Person

Name: ReportIcon

Width: ReportPhoto.Width

Height: ReportPhoto.Height

Fill: RGBA(0, 0, 0, 0)

X: ReportPhoto.X

Y: ReportPhoto.Y

OnSelect: 

Set(TopLevelManager,UserPrincipalName)

Visible: true

Color: 

// If profile image is available set the PersonIcon color Opacity to 0 to hide it or 1 to show
// IMPORTANT: Person Icon must placed on top of the Profile Image for the 
// Hand Cursor to appear when the user rolls mouse pointer over the image
If(
    !IsBlank(Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto = true,
    RGBA(
        0,
        18,
        107,
        0
    ),
    RGBA(
        0,
        18,
        107,
        1
    )
)

Label 1:

Name: titlePName

Text: ThisItem.UserPrincipalName

Color: RGBA(0, 0, 0, 1)

X: 0

Y: 0

Visible: False

Label 2:

Name: ReportName

Text: ThisItem.DisplayName

Color: RGBA(34, 181, 176, 1)

X: 0

Y: ReportPhoto.Y + ReportPhoto.Height + 10 (Place below the ReportPhoto with 10 pixels of padding on top)

Visible: True

Label 3:

Name: ReportDepartment

Text: ThisItem.Department

Color: RGBA(0, 0, 0, 1)

X: 0

Y: ReportName.Y + ReportName.Height + 10 (Place below the ReportName with 10 pixels of padding on top)

Visible: True

Vertical Bar Icon: 

Icon: Rectangle

Name: tieLine

Width: 5

Height: 30

Fill: RGBA(34, 181, 176, 1)

X: ReportDepartment.X + ReportDepartment.Width / 2

Y: ReportDepartment.Y + ReportDepartment.Height + 5 (Place below the ReportDepartment with 5 pixels of padding on top)

2nd Level Reports

Embed a Blank Vertical Gallery into the Department Gallery just below the Vertical Bar named tieLine.

Height: Parent.Height

Width: Parent.Width

Name: DirectReports

X: 0

Y: tieLine.Y + tieLine.Height

Items:

If(
    !IsBlank(titlePName.Text),
    Filter(
        Office365Users.DirectReports(titlePName.Text),
        Not(IsBlank(Department))
    )
)

Image: (Rounded Photo centered horizontally and vertically within the gallery)

Name: ReportPhoto_2

Width: 88

Height: 88

BorderRadius: 60

X: Parent.X / 2 + ReportPhoto_2.Width / 2

Y: Parent.Y / 2 - ReportPhoto_2.Height

OnSelect: 

Set(TopLevelManager,UserPrincipalName)

Image:

// Determine if employee has uploaded an Image to their profile. Profile images can be uploaded through Delve.
// If no image is available, display the Person Icon.
If(
    !IsBlank(ThisItem.UserPrincipalName),
    If(
        Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto = true,
        Office365Users.UserPhotoV2(ThisItem.UserPrincipalName)
    )
)

Person Icon: 

Icon: Person

Name: ReportIcon

Width: ReportPhoto_2.Width

Height: ReportPhoto_2.Height

Fill: RGBA(0, 0, 0, 0)

X: ReportPhoto_2.X

Y: ReportPhoto_2.Y

OnSelect: 

Set(TopLevelManager,UserPrincipalName)

Visible: true

Color: 

// If profile image is available set the PersonIcon color Opacity to 0 to hide it or 1 to show
// IMPORTANT: Person Icon must placed on top of the Profile Image for the 
// Hand Cursor to appear when the user rolls mouse pointer over the image
If(
    !IsBlank(Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto = true,
    RGBA(
        0,
        18,
        107,
        0
    ),
    RGBA(
        0,
        18,
        107,
        1
    )
)

Label 2:

Name: ReportName_2

Text: ThisItem.DisplayName

Color: RGBA(34, 181, 176, 1)

X: 0

Y: ReportPhoto_2.Y + ReportPhoto_2.Height + 10 (Place below the ReportPhoto_2 with 10 pixels of padding on top)

Visible: True

Label 3:

Name: ReportDepartment_2

Text: ThisItem.Department

Color: RGBA(0, 0, 0, 1)

X: 0

Y: ReportName_2.Y + ReportName_2.Height + 10 (Place below the ReportName_2 with 10 pixels of padding on top)

Visible: True

You should now have something similiar to