.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================== Organisation Chart ================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2007-04-20T11:25:42 :Email: patrick@netcreators.com :Info 2: :Info 3: :Info 4: .. _Organisation-Chart: Organisation Chart ================== Extension Key: **nc\_orgchart** Copyright 2007, patrick@netcreators.com, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **Organisation Chart 1** **Introduction 1** Features 1 **User Manual 2** Building the department tree 2 Insert the plugin on a page 2 **Configuration 4** Installation 4 Reference (TypoScript) 4 **Known problems 4** **To-Do list 4** **Changelog 4** .. _Introduction: Introduction ------------ nc\_orgchart is an extension to build organisation charts and display them in the frontend. .. _Features: 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 .. _User-Manual: User Manual ----------- To display an organisation chart you must do the following: .. _Building-the-department-tree: 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: 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. |img-1| 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. |img-2| 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. |img-3| 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. |img-4| 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. .. _Configuration: Configuration ------------- .. _Installation: 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: Reference (TypoScript) ^^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _pid: pid """ .. container:: table-row Property pid Data type int Description The page id (pid) where the department tree is stored **Example:** :: plugin.tx_ncorgchart_pi1 { pid = 255 } Default 0 .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- The organisation chart will not show properly in IE6 and lower if the browser is in “Quirks mode”. Internet Explorer will switch to Quirks mode if the declaration is in front of the declaration. This can be avoided by entering the following lines in your Typoscript.[browser= msie] && [version= <7]config {doctypeSwitch = 1}[global]This will put the declaration in front of the declaration and will put Internet Explorer in “Standard Compliance mode”. .. _To-Do-list: To-Do list ---------- - Make a backend module to enter the departments and put them in the right spot and draw the lines. More like a drawing board, so you don't have to enter all the departments in the tree using the Web > List module. Eventually this will get to complicated for the editors. - Make the lines more configurable, like line width, color, dotted or stripes - Make the departments more configurable like colors, borders etc. - Use more information in the departments, like description, images etc. - Hide and unhide departments and make this configurable by the editor. - Browse through the tree by going higher or lower in the tree, so the visitor can choose it's own main department and show everything that is in it. .. _Changelog: Changelog --------- .. ### BEGIN~OF~TABLE ### .. _0: 0 ^ .. container:: table-row Main 0 Sub 0 development 1 Changes Start of the extension. Just some simple functionality. .. ###### END~OF~TABLE ###### |img-5| Organisation Chart - 4 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.jpeg .. :align: left .. :border: 0 .. :height: 208 .. :id: graphics1 .. :name: graphics1 .. :width: 605 .. |img-2| image:: img-2.jpeg .. :align: left .. :border: 0 .. :height: 208 .. :id: graphics2 .. :name: graphics2 .. :width: 605 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 311 .. :id: graphics3 .. :name: graphics3 .. :width: 263 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 322 .. :id: graphics4 .. :name: graphics4 .. :width: 401 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 29 .. :id: Grafik1 .. :name: Grafik1 .. :width: 104