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.

Automatically Selecting the SharePoint Task List and View

System integrators, SharePoint admins and project managers have been asking for more ability to seed the IntelliGantt Web Part with task list and view information (and more). We just posted release 1.0.33 which has the following features:

Select the initial task list
Select the initial task list view
Apply keywords
Include SharePoint List Template IDs
Exclude SharePoint List Template IDs
Preset the 'Explored' Selections

And more. We will be providing more technical information in our forums (as linked above). Because the Task List and View selection has been so often requested, though, I'd like to introduce it here.

If you don't have IntelliGantt preset to anything and just drop it in a SharePoint site, when a user first views the control IntelliGantt will find all the task lists within the site and, by default, select the site and 'Default' to display initially.




However, if you would like to control what Task List and View is selected, then invoke the 'Edit Web Part' command (assuming you have the privilege) and go to the 'IntelliGantt Initialization' category.




In this mini-example we will seed the IntelliGantt Web Part to select the 'Tasks' list and use the 'My Tasks' view. Let's make sure the current user is assigned to a few tasks first so the result isn't underwhelming.




For this example I'm logged in as Administrator, but I could be anybody who has privileges to edit the web part.

Next, we will fill out the 'Selected List Path' and 'Selected View Name' fields. Our forum contains more detailed information on how to populate these fields.

For example, here we have filled out the Selected List Path and Selected View Name.




Once we hit the 'OK' button, anytime the IntelliGantt Web Part is rendered for the first time it will use these supplied values. As a result, when I (the Administrator) now view the control, the first thing I see will be:



The 'Tasks' row selected and the 'My Tasks' view applied so that I immediately see what's on my plate.