Organisation Chart¶

Features¶

• Show organisation charts based on department trees.
• Fully CSS driven
• Insert empty nodes
• Change the length of the lines downwards to avoid collision with other departments
• Each department is clickable, so you can redirect the visitor to another TYPO3 page

Building the department tree¶

• Make a page of the type 'Sysfolder' and give it a title like 'Organisation chart'.
• Clcik on the button 'Make New Record' in the right upper corner.
• Select in the 'New Record Wizard' the option Departments.
• A form will be presented to you. At the first field you can select the type of node; a department or an empty node. A department will be displayed as a box containing the name of the department, an empty node will not be visible.
• By selecting one of the node types, the form will change with the corresponding fields of that type (Default is Department).
• Enter a title of the department, for instance 'Managing Director'. In case of an emtpy node, enter a title that describes the empty node. The title of an empty node is not visible to your visitors, but is only helpful in the backend of TYPO3.
• Select the parent department. If this is the main department, you cannot select a parent.
• If the title has to be a link to a TYPO3 page, select the page at 'shortcut' and a target, if neccessary.
• When you expect a collision with other departments on the screen, you can lower the subdepartments by entering an integer in the field 'Lower subdepartments by rows'. Default this field is set to 1 row.

Insert the plugin on a page¶

Go to the page where you want to display the organisation chart.

Make a new content element of the type 'Insert Plugin' like you are used to do in TYPO3.

Select the plugin 'Organisation chart'.

Select the page of the type 'Sysfolder' as described in 'Building the department tree'.

Save the content element and watch it in your page.

How it works

Below is the organisation chart we like to achieve.

As you can see there is the upper department “Directeur Facilitaire Dienst”. “Staf/Secretariaat FD” is a subdepartment of “Directeur Facilitaire Dienst”. The five departments “Frontoffice ... Vastgoed” are also subdepartments of the “Directeur Facilitaire Dienst” but are one row lower. This is achieved by adding an empty node below the “Directeur Facilitaire Dienst” on the same level as the “Staf/Secretariaat FD”. The five departments “Frontoffice ... Vastgoed” are subdepartments of this empty node.

The subdepartments of “Gastvrijheidsdiensten” and “Vastgoed” will collide if they are on the same row. “Organisatie” and “Congresbureau” will be displayed on top of each other, which will hide one of the two departments. Because this is not wanted, we lowered the subdepartments by an extra row.

The red dot, which is only in this picture for explanation, marks the empty node. The arrow, also only for explanation, shows you the three subdepartments of “Gastvrijheidsdiensten” are lowered an extra row.

The next image shows the way departments are parents or subdepartments of each other.

When you take a look in the Web > List module you can see the list of all the departments and empty nodes. To reorganise the order of the departments, you can move a department up or down in this list.

Example: There are five departments on one row, Frontoffice till Vastgoed. If you want the row to start with the department “Inkoop en logistiek” you move “Inkoop en logistiek” on top of the department “Frontoffice” by using the arrow buttons.

Installation¶

nc_orgchart is developed for TYPO3 version 4.0 and higher. Install the extension using the Extension Manager.

Go to your main Typoscript template and insert 'Default TS (nc_orgchart)' and 'Default CSS (nc_orgchart)' in the field 'Include Static (from extensions):'.

Reference (TypoScript)¶

plugin.tx_ncorgchart_pi1 {
  pid = 255
}

0¶

Organisation Chart - 4