Project Trackr Development Log Building a better web based project management solution

One of the more interesting parts I’ve talked about (in my seminar) is the concept of linked resources. The idea is that nothing on a project is in isolation. This will show how various elements are linked, so if you’ve viewing a list of tasks, you can see what users, milestones, tickets, files and time entries are in some way linked to that task list.

The problem is that this can be a lot of additional information, and how to best present this to the user. If it was just displayed on the page, it would add a lot of clutter, but we still want it easily accessible from the same page, instead of moving it off to a seperate page.

The following screenshot shows how I intend to show this information. The icons highlighted on the right show the various items which can be linked to, including tasks, tickets, milestones, times, files and users (in that order). These icons will only appear on pages where it’s possible to link an item to something, so on pages such as the dashboard, which can’t be linked, the icons won’t appear.

Clicking any of the icons will bring up a tooltip which will have the relevant items in it. This is shown in the following screen (the layout of the contents is subject to change). Clicking on one of the entries will take you to that items page.

This only solves the problem of how to display this information, the next problem is how to add it. This happens in 2 ways:

1. Items are automatically linked – Examples of automatic linkings are when you create a task on a ticket, that list will be linked. When you assign a task to a user, that user is linked to the ticket etc
2. The user manually adds links – This can further be broken down into 2 parts
   • Linking to already existing items
   • Creating new items and linking them on the fly
     

     Links 1

The following 3 screenshots show linking an existing item will look (using files in this case). When you click the icon to

get a tooltip, you will see what is in link 1. In this case it shows an icon for the file type, the name, which is a link, it’s filesize and the date it was uploaded. Other items will have differant data shown. At the bottom, there are 2 links, for now I’m only interested. Creating a new item will either be a link to the normal create form which will create the link afterwards, or display a minimal version of the form in the tooltip.

To link an existing item (file in this case) we click the link “Link an existing file” which will display the search form as shown in screenshot link 2.

As you type the name of the file, it will use AJAX to populate a list of all files which match that string . You then check the boxes you want to link and submit.

As you type, the results look like in screenshot link 3. Both the top and bottom lists need to be inside a div with a max height (forcing scroll bars in this case) to prevent the height of the div being greater then the page.