Thursday, April 23, 2015

IntelliGantt Time Tracking in SharePoint

One of our top customer requests for IntelliGantt for SharePoint has been support for user timesheets that convert into 'actuals' within the IntelliGantt project management tool. We're happy to announce the arrival of IntelliTimesheet, which builds upon a basic SharePoint custom list for recording values and integrates with IntelliGantt for converting these values into actuals. We've designed IntelliTimesheet to be 100% mobile friendly as we believe the majority of users will 'clock in' using their mobile devices-- iOS, Android or Windows Mobile. All the project manager needs to do is send their colleagues a SharePoint link that they will use to start and stop time on their tasks. Here's how it works in detail.

First, you will want to download the latest 'online' package from our IntelliGantt server. This overview will work with Office 365 online, but it will work the same for 'in house' servers as well (just download our 'in house' package). Create your 'IntelliGantt' directory within your site's 'Site Assets' app, then copy the contents of IntelliGanttOnline.zip to it. Our 'help page' has detailed instructions for both installations.

Clicking on 'IntelliGantt_online.aspx' will show you the latest and greatest IntelliGantt for SharePoint Single Page Application (SPA). At first glance it looks the same, however, if we scroll the table columns you will notice the introduction of 'Actual' fields.

NOTE: Though it can be done manually, we've created another download with SharePoint template files for both IntelliGantt and IntelliTimesheet. Just upload them to your template gallery and you can create new task and custom lists based on these templates. We will show you how IntelliTimesheet uses this template in a few paragraphs.

In you Site Assets/IntelliGantt directory, click on 'IntelliTimesheet_Online.aspx. This will launch out IntelliGantt time tracker.

Oh yes, one more setup step-- we need a custom list to store all the tracked time information.

Remember that IntelliGanttTemplates.zip download? Let's get that and upload the IntelliGantt_Timesheets.stp file to the template gallery. Then, simply add IntelliGantt Timesheet as another application.

Now that we have a repository for our time data, let's open up IntelliTimesheet_Online.aspx once more.

Just the basics with big buttons to make things as easy as possible on a mobile device. A user 'Clocks In' to start keeping track of time and 'Clocks Out' to stop. They can also take breaks or go for lunch, which keeps the current job 'active', but suspended until they finish their break or lunch. They can also view the history of all their timesheets or simply complete a task with a single button. Which tasks, you might ask? From a dropdown box populated with only their assigned tasks. The user chooses which of these they are working on. For example, let's choose our one assigned task and clock in.

When we clock in for the first time, we treat this as the 'Actual Start'. Therefore, back in IntelliGantt we will see the 'Actual Start' field now has a value for this task.

When we clock out, IntelliGantt will compute the amount of time between clock in and clock out and show this as Actual Work. We use days as the default, but hours, minutes or even seconds are supported too.

Notice that the 'Actual Cost' column still shows $0.00? This is because the assigned resource does not currently have an hourly rate. Let's provide one and see how things change. Click on the 'People' image in the upper left to open the tool. Select one or more users we wish to work with (note that this also acts as a filter within the task grid/gantt chart). John Milan has 0 as his hourly rate. Let's change this to 100.0.

Since we have an hourly rate we can now multiply that by the Actual Work involved to produce our first Actual Cost of $5.61. Naturally these cost values roll up.

Finally, because IntelliGantt also tracks duration, we can use the hourly rate to fill in our estimated Cost as well using the assigned task duration. As a result, we see how the actual cost of $5.61 compares to the estimated cost of $6000.0. Looks like there's more work to be done!

We are very excited to introduce this new feature to IntelliGantt project management with SharePoint. Thanks to your feedback we've got an excellent 2nd application targeted for mobile users to simply track their time on a task wherever they may be. We look forward to hearing your feedback on additional features to make your lives easier. Perhaps tracking geo coordinates as well? Hmm....

Monday, March 09, 2015

SharePoint Calendars, Tasks and Resource Working Time

SharePoint offers much more than just a task list. The Calendar list is also quite important in the day-to-day execution of a project as it can capture a persons extra-project activities and communicate to the group when folks might not be available. While a project manager can certainly flip back and forth between a task list and a calendar list, we think it is much easier to integrate the two in a single view so you can quickly see when a person is 'out of the office'.

Here's what this integration looks like with IntelliGantt for SharePoint. First, a person would list their 'out of office' events on the calendar. For example:







Note that there is a new field called 'Person' that associates a real person to this calendar event. This is how IntelliGantt knows what individual this non-work time block belongs to. We will go in to detail later in this post to illustrate how to set this up.

When IntelliGantt knows about a calendar list, it will pull the events from it, look for items that contain the 'Person' field and use that value to cross-reference against task assignments. This means that IntelliGantt will show a persons non-work time right in the Gantt chart like so:





It is interactive as well. As you assign tasks, when you select a person you will see their non-working appear on the timeline so as to help you decided if they are the right person for the job at hand.






Finally, if you hover over the non-working time you can see the event description (along with begin and end times) so you know why that person is not available.






So how do we set this up? It will require adding a new 'Person' column in the calendar and letting IntelliGantt know which calendar to talk to via the configuration.js file. Let's show the column to add to the calendar list first.






This is a simple column of type User that needs to be named 'Person'. IntelliGantt will look for events with this column and, if found, will assume the start and finish times define non-working times for the 'Person' value. 

Next you will need to let IntelliGantt know which Calendar list to use for this non-working time information. The calendar container this information does not need to be in the same site as your task lists. We've set things up so that a single calendar list can be used for any time of task lists. This will make it easy for you to have a 'calendar of reference' for everyone to see when people are unavailable. 






Here we have added the calendar information to our configuration file. This one happens to be in the same workspace (as a demonstration) so we use a relative url path. Just in case the image is not clear here is the JSON section you need to define.



calendar: {
        workingDays: [0, 1, 1, 1, 1, 1, 0],
        periods: [{ name: 'morning', start: 28800, finish: 43200 }, { name: 'afternoon', start: 46800, finish: 61200 }],
        site: {
            url: './',
            title: 'Calendar',
            begin: 'EventDate',
            end: 'EndDate',
            userColumn: 'Person'
        }
    },

With these two pieces in place, IntelliGantt will merge the task and calendar information into one helpful view.







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.