Design
Note
For the versions earlier than 4.x.x (including on-premises ones), please follow these instructions:
Contents
At this step you can choose a skin, default layout that will be displayed for all the users when they open the Org Chart page for the first time and customise box styles.
Skin
Τo change the Org Chart skin, choose it from a combo box. There are two skins adopted for mobile devices - Black metro touch and Metro touch, they have large expand buttons to simplify touch navigation, all skins support dragging of the visible area with touch.
Modern |
|
Black |
|
Black metro touch |
|
Light gray |
|
Silver |
|
Silk |
|
Forest |
|
Glow |
|
Hay |
|
Metro |
|
Metro touch |
|
Office |
|
Office black |
|
Office blue |
|
Outlook |
|
Simple |
|
Sunset |
|
Vista |
|
Web 2.0 |
|
Web blue |
|
Windows 7 |
|
Layout
Your users can choose a different layout to get a better visualization for their needs. This choice will be remembered for the current user only and will not affect other users.
Note
The default layout (the one specified in the configuration wizard) is a global setting. If the default layout is selected then it takes layout settings from the settings wizard and doesn’t store the selection in the browser. Thus, if a user selects this (default) layout and then the administrator changes the layout in the configuration wizard, it will affect the user. If the user selects a non-default layout then it’s stored locally for the user and changes in the configuration wizard’s layout tab will not affect them.
Top to bottom compact
This layout is perfect if you want to keep top to bottom layout and fit wide structures in a smaller area. You can set the maximum number of columns you want your Org Chart to fit. If the number of boxes on the second level exceeds the maximum, the boxes will be stacked. By default, the boxes on the third and subsequent levels are stacked under the corresponding boxes on the second level to keep the fixed width of the structure. But it is possible to change their orientation according to your needs.
In this example, the maximum number of columns is set to three. If the number of boxes on the second level is equal to or less than three, the level lines up horizontally:
If the number of boxes on the second level is greater than three, the boxes are stacked in three columns:
Changing orientation for specific boxes
You can change the layout behavior to combine both horizontal and stacked orientations to better reflect your organization structure. For that, open your page in edit mode. If the Top to bottom compact layout is chosen, you will see a gear icon in the top-right corner of boxes. Click it to select the orientation.
Note
This option is available only in the Top to bottom compact layout.
Changing the settings for the Top to bottom compact layout will affect all the users who use the layout.
The stacked orientation may be under the horizontal one, but the horizontal orientation may be only under the horizontal one.
Top to bottom with grouping of leaf boxes
This is a modification of a classic “top to bottom” layout. The only difference is that all leaf boxes (employees without subordinates) are joined into a two column group on the right-hand side.
Left to right
Left to right layout is good when you want to display all boxes stacked as a file system tree.
Bottom to top
The inverted version of the Top to bottom layout. The root item is displayed on the bottom of the Chart.
Box styles
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:
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.