Currency and Date Internationalization

IntelliGantt for SharePoint supports custom format strings for currency, datetime and number values. We recognize in todays connected environment people from all over the world can be working on the same project. Therefore, rather than using the web browser settings to determine the format of currency, date and number values, we let you set it for everyone via the configuration.js file for a consistent view.

By default IntelliGantt is set to use US dollars, dates and number formatting.

To change these settings locate the configuration.js file your installation is using. It might be co-located with your IntelliGantt aspx page, or it might be in a separate location used by multiple IntelliGantt aspx pages.

In the configuration.js file note the property values currency_format and datetime_format. These are the strings you will be changing. We use the ISO 8601 formatting standards to define years, month, day, hour, minute and second definitions.

Here we've changed them to use Euros and a European number format (where the decimal point and comma have different placements). We've also changed the date format to day/month/year as is common throughout the EU.

Back in IntelliGantt we refresh the browser and see our desired format.

The strings support Unicode so you can just as easily use other currencies and datetime formats to suit your needs.

Maximizing IntelliGantt in SharePoint

A quick post to demonstrate two neat tricks for using the most real estate in your SharePoint  2013 site using IntelliGantt. 

First, while it's common to put IntelliGantt on a SharePoint page, like the home page, you really don't have to. You can go right to the IntelliGantt_Inhouse.aspx or IntelliGantt_Online.aspx file in your SiteAssets and view it there. When you do so, IntelliGantt will fill the entire browser window like so.

If you want to devote every possible pixel to your IntelliGantt view, just hit F11 and the chrome around the web browser will disappear. Now IntelliGantt will be as large as your monitor.

If you have a multiple monitor situation, you can do this same trick over the monitor grid and turn IntelliGantt into a JumboGantt so that everyone can see what tasks need to be done.

Finally, even in full screen mode IntelliGantt is still fully editable. This is a huge improvement over the previous version as we used Silverlight (this version uses HTML5+Javascript). Silverlight was great, except Microsoft disabled edit controls when in full screen mode. HTML5+Javascript is happy to behave as you'd expect at any size.

Change Your Calendar Working Days and Time

In our previous post we introduced how you can give everyone a level of effort and hourly rate so that a cost per task assignment may be calculated. Of course, there are more components to computing this cost, and they are your working day and working time values within a calendar, or many days per week and how much working time per day. By default IntelliGantt for SharePoint 2013 uses Monday through Friday as working days and 8 hours per day of working time (a morning period from 8:00am to noon and an afternoon period from 1:00pm to 5:00pm). This results in a simple project cost as shown below.

You can change both the working days and time via the configuration.js file. This is usually located with your IntelliGantt_Online.aspx or IntelliGantt_Inhouse.aspx file within the Site Assets library. Or it can be in a centralized spot, depending on how you've set up all your SharePoint projects.

Here we see the default working days as defined in an array called 'WorkingDays' within the 'Calendar'. The array is a collection of 7 flags, with the first position representing Sunday. If we want to make Wednesday a non-working day, then we switch 4th flag to '0'.

Now when we see IntelliGantt notice that Wednesday is rendered as non-working time. This also affects the cost calculation as you can see the task costs and rollups have changed as well.

The other piece we can change is the working time per day. Back in configuration.js IntelliGantt has a 'periods' parameter where you can define one or more working time periods per day, their start time and their finish time (in seconds). We can either adjust the 'morning' and 'afternoon' periods by changing the start and finish times, or we can introduce a new period altogether like 'evening'.

Once again we refresh IntelliGantt and see that the cost values have changed again as the new working periods are calculated.

This calendar feature will address issues where countries have different working days and/or working times. We will also be introducing holidays and other special days that are either fully non-working or have distinct working periods.

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.