Tuesday, February 17, 2015

Extra Costing with SharePoint Currency Columns

Earlier we showed you the basics of IntelliGantt for SharePoint costing with respect to assigned resources and their hourly rates. Now we would like to show you how IntelliGantt will recognize other currency columns in your task list and roll these values into your estimated Cost value.

When you add a Number Column to your SharePoint task list and format it with the Currency option, IntelliGantt will both rollup the column values and add it to your overall Cost column. 'Cost' is a reserved word in IntelliGantt and it represents all your estimated costs rolled together. Additional currency columns are treated as estimates also and, as a result, are added to the overall cost. In the near future you will have 'Actual' values that will roll up all your actual costs in the same manner (basically all currency columns starting with 'Actual'), but that is a future blog post.

For now, let's look at how the estimated cost rollup works. Starting with this example we see two tasks that have assignments and associated assignment costs with them. Additionally, there is an 'Extra Cost' field that is either blank or zero.





Remember you can see how IntelliGantt calculates an assigned cost by either looking at the particular assignment and seeing the Work, Hourly Rate and Level of Effort values:



Or by looking at the 'People' form and seeing the general setting for all a resources work, their standard hourly rate and effort.




This assigned cost goes right into the Cost column that IntelliGantt recognizes as the aggregated estimated cost field and rolls it up for you. Now let's add a value to the 'Extra Cost' column and see what happens. Let's first look at task 'Two', which has neither assignment nor extra cost values.




When we added $10 to the 'Extra Cost' field, two things happened. One, that extra cost was rolled up within the 'Extra Cost' column and two, it was also sent over to the 'Cost' column to be added to the sum estimated cost. We've highlighted all the affected calculations for you.




Similarly if we add $10 to the row right above which has an assignment, first we see the value added and rolled up in the Extra Cost column and also added to the estimated Cost column (and rolled up).



In this way IntelliGantt helps you keep track of both overall and individual costs. At a glance you can see what the entire, total estimated costs are but still see sub sections like assigned costs and 'extra costs' defined by you to help track your business processes.






Wednesday, February 11, 2015

IntelliGantt SharePoint 2013 Javascript Custom Functions

Our original IntelliGantt Web Part for SharePoint 2007 and SharePoint 2010 was done in Silverlight, a platform with many nice features but a traditional 'compile and ship' programming architecture. Our newest IntelliGantt for SharePoint 2013 and beyond has been rebuilt not only for the latest and greatest versions of SharePoint but also for the dynamic technologies of the web. First and foremost of these technologies is Javascript.

Raise your hand if you thought Javascript was a mere 'toy language' back in the early aughts? I see you in front of the monitor with your hand high in the air... er, wait, that's me looking in the mirror. Thankfully we have seen the light at TeamDirection and what has come into view are the exciting new possibilities that Javascript offers. Today's new feature? Late Binding Customizable Functions!

If that's a bit of gobbledygook bear with me because here is a simple example. Let's say IntelliGantt has a feature that lets you set the foreground and background colors for each task row of the gantt chart (which we do!). This is a powerful feature that is quite helpful, but what if I want it to be a bit more flexible. That is, I would like to color a row background, but with a piece of logic I can provide that covers my particular case. 

This has certainly happened to us, and we're more than happy to do something about it. And now that IntelliGantt for SharePoint is written in 100% HTML5 + Javascript, we can! The answer is to make use of Javascript's late binding. Here's how.

First, here is a picture of the default IntelliGantt for SharePoint colors.




How can we go about dynamically changing row colors with a bit of code? First go to the configuration.js file your IntelliGantt_Online.aspx file points to. 




If you have the latest IntelliGantt for SharePoint package you will notice a section in the configuration.js called 'custom_functions'.




These are the first two 'hooks' IntelliGantt provides as a callback mechanism to extend functionality. There will be many more in the future (we're excited to hear your input!), but let's start simply. You'll notice that right now the functions just return 'null'. This means nothing will happen. OK, that's a bit underwhelming, but we figured that's the best way to ship the 'default' configuration.js file.

However, let's say we want the row backgrounds to be brown. Instead of 'null', let's change the return value to 'brown'.



Back in IntelliGantt for SharePoint, when we refresh the page we see the results of our work.




Brown worked in this case because most browsers have a set of pre-coded colors. If you want an exact color then simply paste in a six character hex code (something like '#123456'). Lots of online color wheels are available to help you get the perfect hue. 

Obviously this is a very simple example. So let's take it another step. Let's say we only want to color backgrounds when the due date of a task falls on a Wednesday. Remember our custom function is being passed a dataTask object that contains all sorts of information. One important piece of information is the 'DateFinish'. This is a Javascript Date object and therefore we can use the getDay method to see if it falls on a Wednesday or not.




Now when we refresh IntelliGantt we see that only tasks ending on a Wednesday have a brown background.




Sure, this is still a contrived example, but things can get as detailed as necessary to solve your business requirements because you have a tool that was powerful enough to help build the interwebs at your disposal.

We are just starting out with this customization feature set and will be investing tons more in the near future as we identify the high-value-but-very-particular business requirements that could most use these extension. What will be very powerful is leveraging arguably the worlds most common programming language found today on every modern web browser.

Friday, January 30, 2015

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.

Wednesday, January 28, 2015

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.

Friday, January 23, 2015

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.

Thursday, January 22, 2015

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.







Thursday, January 15, 2015

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.