Organizational Charts

Transcription

1 Flowmaster Documentation Thank you for installing the Flowmaster! Please read and refer to this document for instructions regarding installation, use, and integration with your site. For support, Antonia Jovanovska About The Flowmaster is an easy-to-use tool, enabling you to create flowcharts and organizational charts in the Umbraco backend to display on your site. The special thing about the Flowmaster is that it is integrated with the Content and Media in Umbraco: Flowcharts For each step in your flowchart, you will be able to add Content (from Umbraco) which will appear as a popup on your site (when the step is clicked). Once saved, each flowchart step will have a link which will open up this step in the Umbraco Content section. Here, you will find a Richtext Editor, where all your content for this step will go. Step Decision Content (Popup) Opener

2 Organizational Charts The fields for each employee are: - Job Title - Name - Image (optional) You will be able to add a portrait from the Media section. This will automatically be cropped to the right dimensions (portrait 255 x 300), with the centre of the image as the focal point. Please note, the size of the image you upload is not important.

3 Installation 1. If you get an error during installation, please try the following: 1. Go to the website s folder on the server. NOTE: If you do not have access to this, please contact your site administrator/development team. 2. Open the Web.config file at the root of the site with a text editor. 3. Find the httpruntime tag, e.g.: <httpruntime requestvalidationmode="2.0" enableversionheader="false" targetframework ="4.5"/> 4. Change the following parameter: <httpruntime requestvalidationmode="2.0" enableversionheader="false" targetframework ="4.5" maxrequestlength="20192"/> Post Installation 1. If the Flowmaster section does not appear in the sections on the left of the page, please follow these instructions: 1. Go to the "Users" section 2. Click on the "Users" folder and select your user 3. Tick "Flowmaster" in the "Sections" tickboxes 4. Refresh the page. The Flowmaster section should be visible on the left now. 5. Make sure you do this for all users who will need access to the Flowmaster Using the Flowmaster When you go to the Flowmaster section, you will find a Flowchart folder and an Organizational Chart folder. This is where you will create your charts, in a similar way to that in which you would create Content.

4 Displaying a Flowmaster chart on your site Once you have created your charts, you can display them on your site in the following way: 1. Create a Flowchart Page or Organizational Chart Page. 2. You will see a Flowchart Picker on the page. Click Add and choose your chart. 3. Click Save and Publish. The chart will now be visible on the page.

5 Creating a Flowchart Click on items in the Toolbox to create them in the chart area. Drag the items to move them across the chart area. Drag a clear dot to a black to to link items. You may link an item to itself. Make use of the grid to align your items and space them evenly.

6 Add labels between items Change the colour of an item, selecting it first by clicking on it.

7 Save the Flowchart, choosing whether to archive the last saved version. The archive will become available at the top of the page. You will be able to Delete or Restore archived versions, with the option to archive the currently active version on Restore. Once you have saved your Flowchart, you can start adding Content.

8 Add your content through a Richtext Editor. The following formats are readily available. Click Save and Publish and the content will become available on the Flowchart on your site. To publish your Flowchart to your site, follow the instructions outlined in Using the Flowmaster

9 Creating an Organizational Chart Creating an Orgchart is similar to creating a Flowchart, but simpler. Click on the Employee box to add an employee to the chart area, and add their Job Position and Name. You may add portraits to your employees if you wish by selecting a box, clicking on the Portrait picker which appears in the toolbox, and selecting or uploading an image from the Media section. A person icon will appear in the bottom right corner of the box. Clicking on this will show the portrait as a popup.

10 On your site, this will not be a popup, but will appear on hover:

11 Customization As with everything else in Umbraco, the Flowmaster will require some customization in order to get the best out of it, and fully integrate it with your website. You will already have developers and designers coding to make your website, and it s important to let them know how they can help you create the bespoke site you want! For Developers and Designers Styling You will find the following CSS stylesheets in the Stylesheets folder in the Settings section of Umbraco: 1. Flowchart Custom * 2. Orgchart Custom * 3. Flowchart Site 4. Orgchart Site 5. Richtext Editor Styles These are the non-compulsory styles for the charts, and are here for you to add to and modify. * These stylesheets will modify both the site and the tool in the backend. This is necessary for consistency and to rule out any issues that may arise from text sizing differences. All will become clear from the comments embedded and the styles themselves! This configures the Format options for the RTE for the popup content of Flowcharts jsplumb Settings A visual feature of the charts displayed on site which is not editable via CSS is the appearance of the connectors between items. These are set in the following locations in the root directory of the site: 1. App_Plugins/Flowmaster/BackOffice/scripts/FlowchartDisplay.js 2. App_Plugins/Flowmaster/BackOffice/scripts/OrgChartDisplay.js The code to be edited will be at the top of these files, under the comments //instance (defaults) and //endpoints and connectors These are relatively self-explanatory, but for more detailed usage, refer to the jsplumb documentation on connectors, endpoints, anchors and overlays. Scripts The charts displayed on site use: 1. panzoom.js for panning and zooming! 2. remodal.js for displaying the popup content. These can be customized and configured (refer to documentation here): - jquery Panzoom - jquery Remodal

12 Templates and Partial Views The default templates used for the Flowchart Page and Orgchart Page DocTypes can be found in the Templates folder in Settings. All these contain are references to the Partial Views for these pages, which can be embedded in any template or layout. We only recommend editing the Partial Views with extra care, or not at all. At the very least, make backups of the originals in case it all goes topsy turvy! Docment Types You will find two different Document Types with default settings: 1. Flowchart Page 2. Organizational Chart Page These are the DocTypes for the pages on which you will display your charts. They have a Chart Picker property, which will allow you to choose one of your created charts. These are here for you to edit and add to, or even delete, but if you do choose to delete them, don t forget that the Flowchart Picker and Orgchart Picker data types are there for you to add as a property to any DocType. However you MUST use the following aliases: a. flowchartpicker b. orgchartpicker Where can these pages go? A chart page can go anywhere on your site, as long as you allow the DocType as a child DocType of the desired parent DocType:

13 Flowcharts Popup Content If you would like to customize the popup content for the charts (currently a Richtext Editor): - Rendering File: /App_Plugins/Flowmaster/BackOffice/Content.aspx.cs - Doc Type: Flowchart Item Further Customization If you would like any further customization of the Flowmaster, please contact us at: Alpine Interactive UK Ltd 22 Old Queen St London SW1H 9HP Website: Phone: +44 (0) info@alpineinteractive.co.uk