Configuration guide
Last updated
Last updated
In this guide, we'll give a description of the configuration options available in the properties pane.
To get into the properties pane, place your SharePoint page in edit mode:
Select your gantt chart, and click the edit icon:
You will be presented with the properties pane on the right hand side.
The remainder of this document will describe each section of the configuration options in the properties pane.
This has one setting: the list URL. This is the address of the underlying List which stores data for the gantt chart. This is normally set on initial installation and not changed thereafter.
This section connects the columns/fields of the storage list with the functions of the Gantt component. Normally, this is set automatically during initial install, and not changed thereafter. However, if you are connecting a custom Task list, you may wish to ensure values are selected.
However over the icon to see a description of the purpose of each field and its intended type, e.g:
Note that the following fields are required:
Task label, Start Date, Due Date, Task Type
The Code field is required to allow sorting of tasks.
Grouping indicates which items appear at the top level of the task hierarchy:
Sorting specifies the ordering of tasks. By default, tasks are ordered according to their Code. When a task is moved up/down, the code is updated accordingly. If you nominate another field, then tasks cannot be moved manually and will always be sorted according to the value of that field.
By default, each project (and its sub tasks) will share a color.
This section contains options which control how the Gantt web part appears in the context of the SharePoint page.
Allow full width (on Team Sites) This option will force the web part to expand itself to use the full width of the SharePoint page. Normally, on Team Sites, web parts cannot use the full width, so this setting allows that to be enforced.
Maximum height This controls the height of the web part. You may wish it to be a specific height, or allow it to automatically expand to accommodate all tasks.
By default, there are 4 statuses: Future Task, On Schedule, Complete and Late.
Markers are used to indicate important dates in the project with a vertical line:
The data grid is the text section on the left of the Gantt chart:
If your Task List contains fields which you want to show, you can display them here.
Your gantt chart can be in view mode, or edit mode. In edit mode, tasks can be rescheduled or updated in any way.
To restrict the audience who are permitted to edit tasks, select one of the options:
The zoom scale is controlled by this slider in the toolbar:
The default zoom scale is automatic and when the page is loaded, a zoom scale is chosen such that all tasks in the project are visible on screen.
However, if you wish to override this and nominate a specific zoom scale, simply move the slider to the appropriate zoom scale and click this button to store it:
When the page reloads, it will be saved.
The Week display option allows you to toggle weeks to show a number "1-52" in the scale. This is only visible when the zoom scale is weeks:
If you want to automatically move tasks according to their dependencies, then you can turn on Enforce dependencies.
This will have two effects:
Moving a task forwards or backwards will automatically move any successors by the same amount.
Moving a task backwards is prevented if it would result in overlapping with a predecessor.
Lists support up to 30 million items. However, over 5000 tasks will require views to be configured to reduce that number to below 5000. Additionally, if you have more than around 400 tasks, you may wish to limit the number rendered at a time. This is largely dependent on the speed of the end-user browser and internet connection speed.
To load more than 500 tasks, you must configure dynamic loading.
Please refer to the performance page to see more information about the performance settings.
When the default option is selected - Auto (Parent field) - this means that Parent tasks appear with their child tasks nested below them. They are then expanded with the arrow:
A custom field can be selected. For example, Status. In this case, tasks are shown in Status groups:
The color of tasks can be customised. Selecting the Color coding option will apply a pre-set color scheme, with colors grouped by the option you select:
To change the palette, modify the Color palette field:
You can override any color by specifying a color rule: - for example, if you would like In Progress tasks to render in Red, you would specify this rule:
Show toolbar This controls visibility of the controls toolbar:
Highlight critical path The critical path is the set of tasks which cannot be delayed without delaying the whole project. If this is selected, those critical tasks will be highlighted with a red border:
Show project tasks in Split Task Mode This allows tasks in a group to be rendered in a single row, rather than on consecutive rows. This is helpful for showing the project in a more condensed view.
Show dependency lines These are the blue lines that link dependent tasks:
Labels are the text snippets shown to the left, right or center of a task:
Complete tasks appear with a strikethrough:
Late tasks appear in red:
This is all customisable. To modify statuses and their display behaviour, click thebutton.
Tick the box to toggle the Today marker:
Custom markers can be added to the chart, with a Title, text which appear on hover (mouse-over), and a color:
You can specify a fixed width for this grid, if you want to save space:
If you're showing the Resources (people) field, you can specify the maximum number of people which will be displayed:
By default, the grid shows Color, Code, Title, Resources. To customise these, or add more fields, click .
If you choose Always Editable, you will then be able to specify the users who can edit:
The filtering section is useful if you are connected to a Task List which is large and you only want to render a subset of those tasks. In this case, you can create a SharePoint View in your list to only include those tasks you want to see. Select that view in the Default view for data filtering:
However, if you wish to allow end users to select specific views, you can nominate those:
In this case, a drop-down will be shown on the toolbar:
Field to filter and Filter value are quite niche options and not often used. They can be used as an alternative to a view. For example, if you only want to show Future Tasks in your gantt, you would configure it as follows:
End-user filterable fields define those fields which appear as dropdowns on the toolbar:
If users in your organisation frequently create new pages with Gantt charts, they may wish to reuse the same configuration. In this case, you can save a configuration to be used as the default. Click the button to save defaults. When a new web part is being added to a page, an option is presented to use these defaults:
