The organization chart is an effective way of presenting hierarchical structures in a company. It serves as a vital tool for visualizing authority, responsibility, and the intended command structure.

The organization chart can help unify a company by showing employees who their colleagues are across teams, as well as creating bonds between those in the same sub-units.

However, the organization chart is often a static graph, hand-drawn, and put into PowerPoint. In a large and dynamic company, this can quickly render the chart outdated, requiring someone to be responsible for keeping it updated and accurate.

Presenting the new control

Welcome the latest member of the Genus arsenal, the interactive organization chart. The control is configured by data bindings level-by-level, which allows it to be continuously up to date with data in your business objects.

The following sections will describe the functionality of the organization chart by using it to draw the structures of a typical, but imaginary, software development company called NetBling.

Organizational structure

The CEO of the NetBling is Adam Green. He oversees three departments: engineeringproduct management, and sales.

The engineering department is further divided into infrastructureresearch, and software development teams.

The sales department is divided into teams based on geographic locations, while product management has a user experience (UX) team and a marketing team.

The Human Resources Management System

NetBling has a Human Resources Management System (HRMS) to register and maintain departments, teams, employees, and their affiliations.

A simplified data model of the business objects in this system is shown in the following screenshot from the data model designer Genus Studio:

A team is also a Department in this model, and all employees are instances of the Person-object. Department and Person are tables in the database of the system.

Configuring the chart

Each level in the organization chart is based on the business objects of the system. Filters on each level enable instances of the business objects to be placed in separate data subsets. In our example, managers, staff, and developers are subsets of the Person-object.

The following screenshot shows how the levels are configured in the control:

Line and staff levels

NetBling has chosen to define selected employees as staff of their respective departments. These are employees with specialized expertise and positions in their department and should therefore be drawn slightly differently in the chart. This is enabled by the Level Type-setting of the level in the component.

Please see the following screenshot of how the staff members of the engineering department are drawn in the chart:

Integral control

NetBling uses the organization chart in HRMS together with other controls of Genus. This enables the user to not only view the organization chart but also edit the data displayed.

The following screenshot shows how a user may select Amelia Johnson in the chart and then display all details of her in other controls such as the Input Field control, and the Checkbox control.

Similarly, the organization control can be combined with one or more Actions to add custom logic such as sending an email to the selected employee.

Recursive layer

The Person-object of the data model is self-referencing and enables NetBling to define a hierarchy in their organization purely based on data, not only rigorously defined levels. The control handles this using the Recursive Parent Field of the control at the bottom level. This recursive layer enables NetBling to visualize deep hierarchies of superiors and subordinates.

In the software development team, such a hierarchy is defined by setting Josh McCarty as the subordinate of Eric Bradford, and Eric Bradford as the subordinate of Brad Stevens. The following screenshot shows how this hierarchy is drawn by the control.

Stacked employees

The infrastructure team of NetBling has many employees. The organizational chart may therefore become very wide and impractical if these are drawn horizontally. The employees in this team are drawn vertically or stacked, to avoid this situation.

The control automatically draws employees vertically whenever there are more than 3 employees at the lowest level.

Collapse and expand

The control also offers the possibility to collapse and expand the children of an employee, team, or department. This is essential for large companies such as NetBling as the chart otherwise would become impractically large.

The control automatically adjusts the layout with smooth animations of the chart whenever a user chooses to collapse or expand.

The following screenshot highlights a collapsed team and employee. The employee can be drawn directly underneath the team because the team is collapsed. This is useful for users as it is not always relevant to see all the details of the chart at all times.

In action

It’s not easy to convey the feeling of a piece of software in a static blog post. Genus’ organizational chart is one of those things you really should try for yourself to get a proper impression. The feeling of expanding and minimizing nodes and interacting with the org chart is almost meditative; largely due to the way it grows, shrinks, and morphs like a digital octopus as you interact with it.

You may never look at an org chart the same way again.

Peter Bulukin avatar image
Peter Bulukin

Peter Cook Bulukin is a Software Engineer at Genus. He develops building blocks and core functionality which are used to create advanced low-code applications.