Initial Gantt Chart Timescale, Vertical Row Height, Start Date and Splitter Position

Since we've updated IntelliGantt for SharePoint to an HTML5+Javascript solution we've been able to make it more customizable than ever. If you are familiar with JSON (JavaScript Object Notation) than you'll find it very familiar indeed to change variables that then change behavior of the IntelliGantt components. Even if JSON is completely new to you, check out this example where we show how to change the initial Gantt timescale, row height, start date and splitter position properties.

When you first install IntelliGantt for SharePoint the accompanying configuration.js file is set to the defaults. There are many fields to change (and many blog posts in the future!), but the fields we will focus on here are:

    splitter: {
        initial: {
            percentage: null
        }
    },
    gantt: {
        initial: {
            verticalPercentage: null,
            horizontalPercentage: null,
            dateStart: null
        }
    },

When IntelliGantt initializes, it looks for these values within configuration.js to resolve its starting state. Null of course means there is no alternative provided thus IntelliGantt will use its defaults. However, you can certainly make changes. 

For example, here is a default view of a SharePoint Task List.

Let's say we want to change the initial splitter position, the initial gantt row height, the initial gantt timescale and the initial start date of the left edge of the gantt chart. For that we need to edit the configuration.js file.

First go to your Site Assets library.

Navigate into the library and into the IntelliGantt folder you created. Here is the configuration.js file you will be changing.

If you haven't made any changes up to now, it will be just like the default configuration.js file we ship with IntelliGantt for SharePoint.

Notice the section looks just like the JSON we introduced at the top of this blog post. To change the values to something IntelliGantt for SharePoint will recognize means doing so in the right format. Percentage values are between 0.0 and 1.0. Date values use the ISO 8601 standard. So, if we want to change the splitter value to 10%, the gantt row height to 75%, the timescale to 75% and the left edge starting date to February 1, 2015, then we do the following:

Update the configuration.js file in your Site Assets library. Depending on your browser and cache settings, you may need to clear your cache in order to see these changes. When you're ready, go back to the IntelliGantt for SharePoint tool and check out the modifications.

Remember this is just the initial state. Users are free to make adjustments afterwards.

Where this will come in handy is when you want to focus on a specific date and time of the project, zoom into the gantt and maybe even, with the help of coloring, highlight particular tasks for everyone to see.