Simple Assignment Costing with SharePoint 2013

IntelliGantt for SharePoint 2013 enhances basic task list assignments by adding effort and hourly rates for each person and rolling up cost values in a 'Cost' column. There are two main pieces to this feature that we will work through in this blog post.

First, add a new currency column to your task list and name it 'Cost'. IntelliGantt is programmed to look for this 'Cost' column and will store its computed cost values there. IntelliGantt will always compute a cost value, but in order for it to show up in the tool the 'Cost' column needs to be in the active view. Otherwise, if you just have a personal view that shows the 'Cost' column but the other views do not, then in effect you will be the only person able to see the cost values and other people will not.

Second, you will need to supply the effort and hourly rate for each member of the site you want to track this information for. This is done via the 'employee_rates.js' file your IntelliGantt aspx page includes. If you do the basic, minimum installation, then this will be located with your IntelliGantt_Online.aspx page. 

You can co-locate this file with the aspx page as we do when first installing, OR... because we are using all the power of the web, you can also reference a 'global' employee_rates.js file located at a root site that everyone has access to. The benefit of this approach is the file only needs to be generated once. 

One other word about generating the employee_rates.js file. While only you can provide effort and hourly rate information, IntelliGantt can generate the inital employee_rates.js file simply by not referencing one. If IntelliGantt cannot find the employee_rates.js file it will create one using the membership information of the current site. Everyone will then be listed in the 'employee_rates.js' with an Effort of 1.0 (100%) and an HourlyRate of 0.0.

Once we have the 'Cost' column and our employee_rates.js file set up, we can start seeing what things will cost. For example, if you click on the 'Assigned To' cell for a specific task, our rich editor appears that not only lets you adjust the assignments, but also see exactly what each assignment costs.

Here we see that the resource assigned to this task has an hourly rate of $100 and their level of effort is 100%, which in turn means the cost for this 32 hour task is $3200.

You can see everyone's resource information (as defined from the 'employee_rates.js' file) in the 'People' view. Click on the 'People' image at the upper left of IntelliGantt to show this information.

The very first time you open it nothing is selected, so while you see a list of people in the 'All People' selection box, you don't see any values. Simply click on one or more people to see their costing information.

Given the selected person, IntelliGantt will fill in the computed Duration, Work, Effort, Hourly Rate and Estimated Cost values. (Actual Cost as well, but that is a future blog post!).


Notice also that the visible task list in IntelliGantt changed! When you selected a person in the 'People' display, it filters the task list to show only their tasks. This makes it easy to see both their cost and their tasks on a timeline. You can close the 'People' display and it will remember your selection so you have a full view of the filtered Gantt chart.

One more nice little feature is you can collapse tasks and it will show its sub tasks on the same horizontal row, like a swimlane.

Return to the 'People' display to see what your current filter is and the associated costs.

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.

Minimum IntelliGantt for SharePoint 2013 Install

Earlier we provided detailed instructions for installing all the IntelliGantt pieces you need to run solely on your 'In House' SharePoint servers. Now we'd like to provide an incredibly simple set of instructions for running IntelliGantt for SharePoint 2013 as an 'Online' service. This installation will work for SharePoint Online (ie. company.sharepoint.com) or on your internal SharePoint servers provided your client browsers have access to the internet. We think you'll be up and running IntelliGantt for SharePoint within 60 seconds.

Step One -- View your Site Contents and find your Site Assets library.

Step Two -- In the root directory of Site Assets create a new folder named IntelliGantt.

Step Three -- Download this miniscule IntelliGanttOnline.zip file (just 5kb of data. When is the last time you downloaded anything 5kb or less?). Unzip and copy the three files to the IntelliGantt folder you created.

Step Four -- Add a Page Viewer web part to your site and make the URL point to the IntelliGantt_Online.aspx page you just added.

Step Five -- Manually set the Page Viewer web part's vertical height so things show up correctly. Maybe give the web part a nice title too.

Final Step -- Save the page and check out IntelliGantt for SharePoint! By default it will find all the task lists in the current site, but that's really just the beginning. Tons of configuration options and features are ready for you to use.

Because we linked this installation to the 'latest' directory, end users will see updates to IntelliGantt for SharePoint automatically. If you'd rather use a specific version, then you would simply use a build version directory. For example, instead of 'latest', you would pull the IntelliGanttOnline.zip file from '1.0.0.139' and your clients would always run this version of IntelliGantt for SharePoint regardless of how often we update the 'latest' directory.

Coloring Tasks, Subtasks and Backgrounds

One of our more popular features is the ability to custom color a SharePoint task. We took it a bit further with the latest release of IntelliGantt for SharePoint 2013 by also letting you color the task row background and giving you the option for children to inherit the color settings. We store the color settings with the individual task in a text column called 'Color'. Therefore in order to use this feature the SharePoint Task List settings must be edited with the new 'Color' text column.

Once the Color task column is available, simply click or touch within the Color cell for the task you would like to change. The simple color editor appears.

A color value is a 6 character hexadecimal string you've probably seen on the web. Lots of tools online to help with this. As soon as a 6 character value is entered you will see the task color change.

When a color value is set, IntelliGantt for SharePoint shows it in the Gantt chart and in the grid. This let's you know the specific task color has been set.

You can also set the background color for a task row. Again a 6 character hexadecimal value is used, but IntelliGantt also takes the color and applies 33% opacity to it so as the background color doesn't mask everything out.

The color setting can also be applied to all the sub tasks of a task by clicking the 'Give children the same settings' checkbox. This lets you easily highlight a group of tasks.

Like the foreground color, the background color is shown both in the Gantt and Grid plus an additional circle in the task Color cell so you know where it has been set. This can be helpful when applying the color to children as well (which is designated by the checkmark).

You can try it out yourself today with these installation instructions for SharePoint 2013 Online or Inhouse.

Cross Site Task List Views with SharePoint 2013

We just saw how simple it is to select one or more task lists to view within a SharePoint site, but what about task lists across SharePoint sites? IntelliGantt for SharePoint makes it easy by letting you add as many cross site task lists as you like while still letting you select which ones to show and in what order. Let's take a look.

Here is where we left off in the last post. We have two task lists within the 'Demo 3' site, of which we have edited the configuration.js file so that only the 'More Tasks' task list is displayed.

We added a subsite to Demo 3 named 'Demo 3 Subsite'. Within this subsite we've added another task list app and added two tasks to it.

What we would like to do is display the 'More Tasks' from the site 'Demo 3' AND display the tasks from this subsite in a single IntelliGantt view.

No problem!

First let's go to the configuration.js file we added to the Site Assets in the Demo 3 site.

Locate the 'sites' parameter that defines an array of site information within the configuration.

We will simply add another array element to 'sites' that tells IntelliGantt to load tasks from the 'Subsite' directory. If you're familiar with JSON syntax this should be straightforward. If you're not, well, it's javascript and there's lots of help available for manipulating javascript arrays. The new element to the array we will add contains a url, another array of lists to include and a final array of lists to exclude. As described in the previous post, the lists are matched by title. For the 'url' field, you can make it relative to site the configuration.js is located in. So, to include the subsite we simply concatenate the current site location './' and the subsites location 'Subsite/' and end up with the string to use './Subsite/'. Note that IntelliGantt requires you to end urls with a '/'.

Now we refresh the page IntelliGantt for SharePoint is placed on and voila, we see the subsite tasks included in the view.

What about sites that are not subsites? Can IntelliGantt include tasks from a site from a different path?

Absolutely!

Here we have a site called 'Demo 2' which is located under the SharePoint root-- no awareness of 'Demo 3' at all.

We can tell IntelliGantt to include tasks from 'Demo 2' by going back to the configuration.js file and adding another entry to the 'sites'. The difference this time is the url parameter will be an absolute path instead of a relative path. Basically this means the url field starts with a slash and has the full path location of the site you wish to include.

We refresh the IntelliGantt for SharePoint instance back in our 'Demo 3' site and now we see three task lists. First, the 'More Tasks' task list we selected from the current site. Second, the 'Tasks' list from the subsite. And, third, the task list from the 'Demo 2' site we identified with an absolute url.

Just as there is no limit to the number of tasks you can view, there is no limit to the number of task lists you can pull in from any site within a SharePoint site collection. Also, dates and numeric data are rolled up into their 'virtual' summary tasks so its a nifty way to quickly add values across sites as well.

Select SharePoint Task Lists to Show

Perhaps the single most powerful feature with IntelliGantt for SharePoint is the ability to combine multiple task lists into a single view. In this example we will show how the default 'all lists' works, demonstrate how to include specific lists and illustrate how they can be ordered. We will be working with two lists in this example, but from this you'll understand how to work with three, four and more also. As a teaser for a future blog post, YES!, you can include lists from other sites as well. But, that is for a future blog post. In the meantime...
Here is a 'project' site with two task lists. The first task list (named 'Tasks') was part of the site template when created. The second task list (named 'More Tasks') was added later as a Tasks App. If you install the basic IntelliGantt for SharePoint configuration you will automatically see all the task lists from the site combined into a single view.

Which SharePoint Task Lists are included in the view is determined by the configuration settings in your configuration.js file.

In the default configuration.js file included in the IntelliGantt zip bundle, you see the following. Specifically, you see the 'sites' values. Pay particular attention to the 'includeLists' parameter.

IntelliGantt for SharePoint comes with a single entry for the sites.includeLists array: '*'. This array is used to define one or more name matches for all the task lists in a site. If the only entry is '*', then all the task list names match. When IntelliGantt asks SharePoint for the task lists within a site it checks against this 'includeLists' value. IntelliGantt then displays them in the order that SharePoint lists them. What if we would rather see the 'Tasks' list listed before 'More Tasks'? Then we can update the configuration.js file to explicitly match the task lists in the order we define. First, let's use SharePoint's nifty file management features to check out the configuration.js file. That way, if we make a mistake (what are the odds?), it will be easy to revert to a previous working copy.

Next we will add the task list names to the 'includeLists' array in the order we wish to view them. These names are the Title of each task list.

Check in your changes and even add a comment so you can remember what you did.

Now when IntelliGantt asks the SharePoint site for all the task lists, it will match and order them according to the 'includeLists' array values and ordering.

What if we just want to show a single list? Again, back to editing the configuration.js file and adjust the array to contain the list title you wish to see.

Now only the 'More Tasks' task list will appear within IntelliGantt.