cancel
Showing results for 
Search instead for 
Did you mean: 
KC

PowerApps Department Org Chart

Scope:

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

 

Requirements:

 

Office365Users.png

2 Blank Vertical Galleries

1 Blank Horizontal Gallery

 

[video]

 

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

 

OrgChart.png

 

Comments

hello ... thank you for your efforts ,

can you just explain this step in more detail ,

I got an error when perform it 

 

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

Hi Mays,

This variable would be set to the managers company email address, usually, the email address is also the same as the UserPrincipalName registered in your organizations Active Directory.

 

 

Hi @KC , thanks for this - I am getting it to work ok for the first 2 levels, but for the direct reports I am only getting the gallery going down and not accross if you see what I mean. I am getting test user and test user2 in your example but cant see how to get pebbles flintstone to be visable at the same time.

 

If I click on Barney Rubble I get him but then I miss out on Testuser2

 

thanks

 

Jambo

Having slept on it - I got it sorted - I hadnt embedded the direct reports gallery in the department gallery

thanks

 

Jambo

KC

Hi Jambo,

Sorry for the late reply, I'm glad you were able to sort this out.

Meet Our Blog Authors