Task Colors in SharePoint 2013

January 2015 Update for SharePoint 2013

One of our more popular features is the ability to change the colors of tasks in SharePoint task lists. Our IntelliGantt for SharePoint App carries this feature forward and adds the extra ability to apply the color to all of a tasks children as well. This is a little different than setting the color for a choice value, which is coming shortly. Rather, this is saying 'forget all algorithms, just make this task pink!', or something to that effect. We hear this is a great feature for presentations where you simply want to highlight a block of tasks with a particular color. Here's how it works.

Let's say we start with a simple task list and we want to make 'One' purple.

IntelliGantt for SharePoint recognizes columns names and, if they match a particular name, will allow new features. Color and ColorChildren are such examples. To enable the color changing feature, we must modify the list columns for our task list. First go to the actual SharePoint Task List and choose the 'List Settings' ribbon icon.

Make sure you have elevated permissions as next we need to create two columns. One for storing the color and the other for storing a flag if we apply this color to children.

We need to add a 'Single line of text' column named 'Color'. This will be the columns that contains a hex-code value of the color we choose for this task.

By default SharePoint will add this column to your current view, but since they're not really user-friendly, we recommend that this column is not displayed. The other column we are going to create builds off the 'Color' column we just added. In this case it will be a Yes/No column type named 'ColorChildren'.

Similar to the 'Color' column, it is not necessary to add the 'ColorChildren' column to your current view.

Now how do we use this newfound color feature in IntelliGantt for SharePoint? First let's go to the IntelliGantt for SharePoint App instance within the same site as the Task List we just modified.

We have task 'One' selected, so click the '+' button and the four colored squares buttons to add the color. They are both underlined in this picture. You'll see these same underlines in the App as well.

This control lets you click anywhere on the color chart, type in a specific hex color value and change the color's luminosity. The checkbox below the color chart lets you apply this color choice to all children of this task as well. This makes it easy to color blocks of tasks. In this example we wanted to make the task purple.

Clicking on the green checkmark in the upper right of the color chooser accepts the change. Clicking on the 'X' will reject it and undo any color changes you've made. In this case we have accepted and our Gantt Chart shows the purple color for the task.

If you're curious what values are actually stored in SharePoint, here's what our choices look like.

Because we are using the SharePoint Task List to store the associated color information, its open to other processes changing the color as well. For instance, you might kick off a workflow that highlights all extremely important tasks in chartreuse. We will also show in the coming weeks how you can tie color choices to Choice Columns as well.

Linking to SharePoint Lookup Fields

We implemented a simple user request with respect to how the IntelliGantt Web Part works with lookup data in your task lists. The issue was we were displaying the data, but unlike the native SharePoint list information, the lookup fields were not navigable. For example, all the assignments would show as expected, but you couldn't click on a name and see the user's profile. This has been addressed with build 1.0.163 we released today.

For example, here is a screenshot of the updated web part showing the Assigned To field. The visual cue for the names has changed as now they are both blue and underlined.

Clicking on a name will match the same behavior as in SharePoint and take you to that user's profile scoped to the current SharePoint site.

However, we couldn't help ourselves from adding a little smarts. If you have a link to a discussion showing, rather than going to a single page showing that that item's instance data, we instead take you to the 'Flat' view of the entire discussion. This let's you quickly see what people are saying about a particular task.

The discussion link in the web part:

The browser directed to the flat discussion layout:

More Fun with Colors

The other day a customer let us know that the marketing group had a problem with adopting the IntelliGantt Web Part. The top calendar and bottom navigation controls were the wrong color. This was an instance where design (and color) matters and thankfully, because we had put in color support for tasks, we were able to quickly turn around an update that supports calendar and navigation color too. In fact, we provided an update within a week.

Here's how it works. Below is our default color palette.




I think it looks pretty good but obviously folks in marketing disagree. No problem, let's modify the 'IntelliGantt Colors' property.




We'll put in my second favorite color scheme. Note that the web part asks for two colors for both the calendar and navigation regions. We do this because a gradient looks much nicer than a solid block of color. You can enter any two colors in and IntelliGantt will show resulting blend of colors.




And the finished product:




Don't forget you can also change the branding text at the bottom right of the control as well. This will also aid in branding and keep even more folks happy.

Creating Virtual Folders from Group By Fields

SharePoint lists come with a bevy of options for how to display, filter, sort and group information. In SharePoint 2010, for example, a basic Task List has 11 options right out of the box.




With so many levers to pull SharePoint encourages users to make many views and tailor them to their needs. What we like to do with the IntelliGantt Web Part is run right along with the views you create and provide richer visualizations.

Let's take this list for instance. It's a basic task list with a couple folders and a task item at the top level. Though it's not obvious, each folder contains a few task items as well.




Let me point out two interesting choice fields we have created-- Region and State. These are basic choice columns we created that house 4 region values (North, East, West and South) and 50 state values. Given all the view options available, a natural organization would be to group them by Region and State. This can be done via the web browser by editing a particular view.




The result is the data will now be grouped by first Region and then State, which matches how might people naturally group data across a country. Here's what the result looks like in SharePoint:




Even across the internet I can sense the underwhelm-ment. There are a number of problems with the native Group By feature when you have a hierarchy of data:

1. Even though folders have a Region and State value, their original purpose-- containing sub items-- is not necessary in the view since we want to see the items. In other words, the folders here are cluttering the important data.

2. Where is all the data? Admittedly this is our mantra-- showing you all the data in a list-- but it's certainly not clear that you have to click into each folder to gets its children in order to see there grouping.

3. Though it shows that Region and State are the grouping fields, it duplicates unecessarily by showing both Region and Region: East.


Here's how the IntelliGantt Web Part handles it. When this web part uses a view that contains Group By settings, it will re-orient itself to create virtual folders based on each items values for those settings. As a result, the hierarchy reflects the values for each field, which is a more natural way to understand what you're looking at:

Adding and Linking Documents to Tasks - Part III

We've been exporing the new IntelliGantt Web Part feature that let's you add documents to a Shared Documents list via dragging and dropping from your computer onto a task item. In Part I we showed how to set up the lookup column to enable this feature then dragged a local file and dropped it onto a task. In Part II we showed how you can link tasks to existing documents in your document lists via in-place editing with auto-completion boxes. In Part III we will show how documents linked to tasks work with templates.

We left off with two documents associated to two tasks. With better naming, one could imagine that Folder2 is really a reusable template containing two steps we must do again and again. Furthermore, if the goal is to build a portable typewriter, then the associated document is valuable for every new portable typewriter we build.




With the IntelliGantt Web Part any task or summary task can become a template. First we need to open the tool window so we can get to the pencil.




We select the folder we wish to turn into a template and click the pencil image to write information to you local computer.




When we click on the pencil, a 'Save As' dialog appears that lets us name the file and save it to disk.




This template file with the '.igantt' extension can be used by dragging and dropping onto lists or folders in any IntelliGantt Web Part. Here, though the image doesn't show the mouse cursor, you can see the 'drop arrow' is pointing to the 'Testing' task list.




Once the template is dropped, the IntelliGantt Web Part creates the same group of tasks that seeded the template-- including their assignments and linked documents.




With this feature you can create a library of reusable project fragments that can be dropped onto any IntelliGantt Web Part list or summary task. Common tasks can be templatized such that they also contain starter documents detailing how to perform the work needed. One or more users can be pre-assigned to tasks to reduce the amount of housekeeping work in the day-to-day of a project manager. You can even store these '.igantt' template files on a file server so multiple project managers can all work with the same templates.

Adding and Linking Documents to Tasks - Part II

In Part I of this series we showed how you can connect a SharePoint Task List to a SharePoint Shared Documents List with the IntelliGantt Web Part. This covered both setting up the 'Documents' lookup column in the Task List and adding one or more documents via drag and drop onto the task item. Today we will show how you can manage task/document links and work with documents already in your Shared Documents List.

Here is where we left off yesterday. The image file 'igwebpart_128_blue.png' had been dropped onto the 'Item' task in the IntelliGantt Web Part (IGWP). IGWP both uploaded the file to the Shared Documents List, added the cell entry with the document name and created the 'has documents' icon at the far left of the grid.




When you move the mouse into the 'Documents' cell you will see '+' and '-' icons appear around the document. These let you add and remove document links. For example, here we will remove the document link:




The cell entry disappears and the helpful icon indicator does too. But while this removed the visible link in IGWP, the document is in fact still in the Shared Documents List.




We can actually re-link the same document with the same task again by using the '+' icon to add this link:




IGWP will scan the Shared Documents List and provide an auto-complete box for you. This way you easily find the document you with to link by name:




Now the document has been re-linked with the task. It's visible within the 'Documents' column and has the helpful 'has documents' icon once more.

Tomorrow we will look at using this same linking concept with templates in Part III.

Adding and Linking Documents and Tasks - Part I

It's been a quiet month on the blog which can only mean one thing-- new feature time!

We introduced a great way to add local files as attachments to tasks by using one of the most familiar gestures: drag and drop. Not long after customers began asking us if we could also use drag and drop to add files to a Shared Library and have it link to the task. The benefit here is then, unlike attachments, documents associated with tasks could support versioning, permissions and other advanced features.http://www.blogger.com/img/blank.gif

We're happy to say we heard you and are proud to introduce the simplest way to 1) add one or more files to a Shared Documents list by drag and drop and 2) automatically link them to the task you dropped them on.

Here's how it works. Below is the IntelliGantt Web Part visualizing a simple SharePoint Task List. You'll note this SharePoint site actually has multiple task lists, but we used the explorer feature to select as single task list.




Also in this SharePoint site is the common Shared Document list. As you can see we have a folder and a couple documents within the list.




Here is the one plumbing step required for things to work. What we need to do is add a Lookup Column to a Task List and associate it with the Shared Documents list. Here is the lookup column we created. And yes, it does need to be named 'Documents' for the IntelliGantt Web Part to recognize it:




Now we can open Windows Explorer on our local PC, find a file and drag/drop it onto a task. Notice the 'upload arrow' that appears to help identify the task drop target:




Once the file has been dropped the IntelliGantt Web Part will detect if a 'Documents' column pointing to a Shared Documents library is in the task list view. If a 'Documents' column exists then IntelliGantt Web Part will upload the dropped file or files to the defined Shared Documents list. As a result, first you see the document associated with the task visually:




And we can also see the document has in fact been uploaded to the Shared Documents physically:




Since it's in a document list we can checkout, edit and version the file for a more complicated work item. Back in the IntelliGantt Web Part, because the file is linked to the task, you can always mouse over the attachment to quickly navigate to documents. First point...





... then click.




In Part II we will see how IntelliGantt Templates take advantage of these linked documents to create reusable components that can automatically link with existing documents.

Heads Up! How to Combine Tasks with Announcments

One sign of a well engineered product is when customers call you and thank you for creating a feature that really helps them out. The other sign is when it never occurred to you the product could actually perform said feature. Invariably when this happens, the use case turns out to be a really good idea. So I thought I'd pass it along.

As you know, we created the IntelliGantt Web Part for SharePoint to look for Task Lists by default. Of course we also wanted to be able to include custom lists, specialized lists and heretofore unknown lists created by IT departments that could also serve as task lists.

But it never occurred to us to add the Announcements List into the mix. Thankfully it did to one customer.

They added an announcements list to the IntelliGantt Web Part so that folks could have an easy 'heads up' to the most important things of the day pertaining to a project. Our goal as always been to minimize the context switches as users work with the data. Including the announcements within the IntelliGantt Web Part is right inline with this philosophy.

Here's what it looks like:




As you can see the announcements list can be positioned right at the top. Also, the intrinsic nature of this list lends itself well to the day-to-day of projects as announcements are only visible for a specific amount of time. Once the announcement goes 'stale', it drops off the list and new announcements appear. The end result is the project manager has just increased the odds that team members will see important communications in context.

If you'd like to experiment with this a bit, you just need to know the server template id for the SharePoint Announcements List-- 104. Plug this value into our 'Include Template ID' property as shown below:




Finally, this same technique will work just as well with any SharePoint list. But we thought it was so neat to use a 'lowly' announcements list to accomplish something quite useful-- telling people the importing news of the day right within their project.

The Five Year Zoom

Well, that's what we called our increased timescale miniaturization internally. The exact amount of time you'll see on the Gantt will depend on the width of your monitor-- we can compress time but we cannot change the laws of physics :).

For instance, if you have a 23-inch monitor and you go to 'Full Screen' mode then you should be able to see a five span for the Gantt chart. We received this request from construction companies and governments (which surely can't be a coincidence) who often manage projects spanning many years. So as of version 1.0.107 these customers will be able to see the even bigger picture.

We did update the presentation just a bit as well to handle the new zoom factor. For example, here is a project in the default zoom:




As you can see this projects extends well past the timeframe for this view. However, if we slide the 'zoom thumb' all the way to the left, we see the project easily fits within the display:



Notice that at the highest level, the 'major calendar' section shows the year and the 'minor calendar' section shows the half year. We shortened this to H1 for the first six months and H2 for the second six months.

Everything is vector-based of course so there is no perfomance penalty for any zoom magnification level you may choose. And naturally the larger the monitor and the greater the number of pixels the more time we can fit on a page. So, if you really need to see a decade worth of project tasks in a Gantt Chart, you have the justification needed to request that super-thin LED 46-inch monitor.

Or just let us know if you need the 'Decade Zoom'. Either way, we're happy to help.

Mapping Start and Due Dates to Estimates

We have a new feature in the IntelliGantt Web Part, the ability to map start and due dates, that I'd like to highlight with an actual use case. A few customers have asked if its possible for one task list within SharePoint to contain both current and estimate start/due dates and do a comparison between the two.

Let's go to an example. Here is a task list with the standard Start Date and Due Date columns defined. To this we also added EstStart and EstDue, short for Estimated Start Date and Estimated Due Date.




All the data we need is there, but it can be difficult to spot delta's between current and estimate values in this view. So what we've done is create a single SharePoint page with two IntelliGantt Web Parts added to it. The top one shows the current Start Date and Due Date and the bottom one shows the EstStart and EstDue dates.




Even though you see two IntelliGantt Web Parts, the underlying data is coming from the same task list. What we did was configure the second IntelliGantt Web Part to use the estimated start/due date columns and specify which view to use-- the 'Estimates' view. Doing so ensures that when anyone visits this page, this will be the initial presentation they see.

The mapping is done by going into the web part editor and opening the 'IntelliGantt Mapping' category:




The other adjustment we did was to set the initial view on the bottom IntelliGantt Web Part:




By doing so we can craft the columns to display so that the estimates show up. This is possible because the IntelliGantt Web Part adapts its task list display to match the viewable columns defined in your SharePoint list view.

This result is you can view two complete charts of the same data and quickly identify discrepancies-- like all the tasks within the 'Extra' folder taking an extra bit of time.