Conditional box styles
Contents
Besides custom CSS, Org Chart allows to customise the look of the boxes using style rules and individual box style.
To avoid unpredicted result, it is important to take into account the priority of their applying:
The style rules are available on the Design step.
Style rules
You can create several style rules that will be applied to boxes conditionally. On the screenshot below, there are two rules for changing background color depending on the department. If rules have conflicting settings, Org Chart will apply the one that is higher in the list. Available operations with rules:
adding,
editing,
cloning,
deleting,
activation/deactivation,
changing priority.
When creating a rule, there are three main parts for configuring:
name,
condition,
styles.
The condition works the same way as in filtering. You can create a universal rule for all boxes leaving it empty. Partially, it replaces custom CSS settings. The condition provides access to all data source fields and box type in Org Chart.
In the style properties, all number values are measured in pixels (px). You can set a color using either color picker or its value. Org Chart supports color names and codes in three models: RGB, HEX, HSL.
Note
When saving the rule, all style properties are applied, not just modified ones.
Individual styles
To apply individual styles to a specific box, edit an Org Chart page and click a setting wheel in the required box. Click Style to modify it. The logic is the same as in the style rules.
The Apply button has a context menu with shortcuts for creating a rule based on the current style. It can be an arbitrary rule or based on a pre-defined condition by:
job title,
department,
box type.
Note
Go to the next step of the configuration wizard Templates.