Click here to Skip to main content
15,867,686 members
Articles / Task

An Introduction to Workspaces::Tasks

Rate me:
Please Sign up or sign in to vote.
4.86/5 (8 votes)
19 Mar 2014CPOL8 min read 20.7K   13   7
Using, managing and loving your TODO list.

Introduction

For years we at CodeProject have fought over which task tracking system to use and the arguments all came down to "which system sucked the least". There are some fantastic task tracking systems out there that almost work for us, but they are either too complicated, too slow, don't work on tablets, or force you to do something you don't want to do.

Our goal with ::Tasks was to create a system that was fairly dumb in that it didn't know what you wanted to do, it just provided a consistent and extensible framework in which you could do it. The fundamental goals of Tasks were:

  1. Create a task tracking system better than Notepad or an Excel spreadsheet
  2. Create an application that focused on the user's data, not the application

There is a constant temptation among software developers to make the application the main feature instead of making the user's data within that application the main feature. The software behind a great video game is invisible to a user; you completely forget you're using a software application. Business applications, to race to the other end of the spectrum, often go the other way and make the application the focus. Our weekly meetings were 50% about how to use the tools we were using and 50% about how we could write a better one. And 50% about what we were meant to be talking about. Software is meant to make like easier, not merely be an end unto itself.

Workspaces::Tasks

::Tasks is our first application written on our Workspaces platform that provides support for our Article system. Each article on CodeProject has a "Bugs and Suggestions" tab that provides a ::Tasks instance for that article. If you want to use ::Tasks for your own projects just open a new workspace at Workspaces - it's free.

Workspaces is written primarily in CoffeeScript as a single-page application using the Ember.js framework with a Node.js backend and a MongoDB persistence layer. ::Tasks uses the same stack except for the addition of a little Ruby On Rails, though we are shifting from Ruby to pure node.js. The whole thing is hosted on Amazon Web Services using Capistrano and Chef for management and deployment. There's a little Go sprinkled in there for grins but it's merely a little dabbling on the side.

The specific goals of ::Tasks are

  1. Organise and manage task lists
  2. Be fast
  3. Be simple
  4. Work on a desktop and a tablet
  5. Be extensible

Further (implied) goals were that ::Tasks should

  1. live on the ::Workspaces platform
  2. Be geared towards simultaneous multiple users
  3. Ensure alerts, updated and user communication was baked in

The Grid

The core of the ::Tasks UI is the grid. We tried many, many commercial and open source grids and none suited. Many were close, but in the end the effort involved in reworking the grid (and working around the grids) to suit our needs meant it was more efficient to simply write our own.

The grid is pure JavaScript and supports the features you'd expect: resizable columns, sortable, drag and drop and in-place editing.

Image 1

The grid was (understandably) 90% of the UI work and the focus of most of the optimisation. To gain speed we've optimised data serialisation, worked with pre-rendering the HTML on first load, added partial and on-demand grid population and spent weeks trimming milliseconds here and there to ensure the application is as fast as possible during interaction. We still have a number of tricks we're planning on implementing so the work continues. As Ember.js evolves, it also opens door for new speedups over time.

Your Tasks

The goal was to ensure the system was as simple to use as Notepad or Excel, so the focus is on simple lists that are in-place editable and can be arranged using simple drag and drop.

In the default layout you see your tasks listed one after the other. To make a task a child of another task simply drag one task on top of another. To create a new task just choose the "Add New" menu dropdown which allows you to add a new task a the end of the list, a new sibling to the currently selected task or a new child of the current task. Hint: use the keyboard shortcuts Ctrl+Enter / Shift+Enter to save time.

Image 2

Once you've added a new item it's simply a matter of filling in the details: Title, type, a description (using Markdown), assignees and whatever other fields you are using.

Image 3

Hit Enter and the task is created and a new, blank task is then also created ready for you to add your next item. The goal is "better than notepad" and in notepad you type, hit enter, type, hit enter. That's the pattern we've used in ::Tasks.

Organising and managing Your Tasks

A core feature of ::Tasks is "Organise and manage task lists" but there are, fundamentally, two ways of organising tasks:

  1. Hierarchically by Project. Organising items based on where they fit in the Grand Plan
  2. A flat list: eg By priority, by assignee or just a "What's on the list for today?"

The default Tree layout allows you to organise your lists as a hierarchical tree. You enter tasks then drag and drop them to produce a tree of tasks.

Image 4

There is another layout called List Layout that allows you to organise your items in a flat list based on different ordering criteria than the Tree list.

Image 5

Initially the items will be ordered as you enter them, but when in List layout you can drag and drop items to rearrange them (but not add parent/child relations - that's for Tree layout only). The order you place items will be maintained as you switch between List and Tree layout.

Key point: ::Tasks has two modes of viewing items: One as a project-oriented hierarchy of tasks, and the other as a flat, ordered list of tasks. Same items, different layouts and ordering.

Filtering and Grouping

You don't always want to see all of the tasks all of the time so ::Tasks allows you to filter and group your tasks.

To filter, click the "funnel" icon at the top of the column whose values you want to filter and then select the items you wish to include in the filter. In the example below I've chosen to only view items with a Status of New, Open, In Progress, On Hold, Needs Help and Resolved. I'm not going to show the items that are Closed, Rejected or Completed.

Image 6

Hit apply and you have your filter. Do this on as many columns as you wish to fine tune your filter. Your final set of filters can be viewed and adjusted using the Filter dropdown

Image 7

Grouping is done by selecting the column by which to group items in the Group By dropdown

Image 8

Defining and Saving Views of your Tasks

Having the ability to view tasks as a project tree or as a flat list of TODO items is nice, but you need a way to define different views of the items you're managing. Doing this is silly simple in ::Tasks.

  1. Choose your layout: List or Tree
  2. Apply any filters you need
  3. Group the items if necessary
  4. Adjust the column sizes if necessary
  5. Go to the Views dropdown and at the bottom enter the title of the view you wish to save and hit Add.

Image 9

Once a view is created you then share the view so others can use your view, set it as your main (default) view, or (if you've shared the view) set it as the main view for everyone, not just yourself.

Image 10

Viewing and Editing items

The small window we provide for entering the item description isn't always enough, and nor does the main grid view of tasks provide the full description. Clicking the title of any task opens up the Detail pane that shows an expanded and editable version of a task.

Image 11

Click the description to edit the description, or click on any of the properties to present a dropdown (or other control) to edit their settings. Further, attachments can be added by dragging and dropping and, if you're using a sensible modern browser, images can be pasted directly into descriptions. Be aware that descriptions are formatting using Markdown, but remember that Markdown also supports straight HTML. The best of both worlds.

Image 12

Of course, when you have multiple people working on a project there's going to be some back-and-forth among them so each item has a comment area attached at the bottom. Again, everything's formatted in Markdown.

Image 13

The final piece is the notification system. At the end of the Detail pane are two controls: A "Notify" checkbox that allows you to enable notifications on an item (assignee will always get notifications if they have that option set globally) and another dropdown that allows you to have others be notified. This is incredibly handy when you need to assign an item to one person but have another person be notified of a change of status.

Wrapping up

So far I've touched on the basics of using ::Tasks. Adding, managing, viewing and modifying items has been designed to be as simple as possible and to provide the means to organise and present items in different manners depending on different requirements.

::Tasks is simple and is not meant to replace full blown project management systems with Gantt charts and burn down graphs. It's meant to allow you to organise your tasks, your TODOs and your thoughts, yet it also offers significant configuration possibilities..

In my next article I'll dive into the customisations and extensions that are possible as well as some of the UI hacks we've opened up.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder CodeProject
Canada Canada
Chris Maunder is the co-founder of CodeProject and ContentLab.com, and has been a prominent figure in the software development community for nearly 30 years. Hailing from Australia, Chris has a background in Mathematics, Astrophysics, Environmental Engineering and Defence Research. His programming endeavours span everything from FORTRAN on Super Computers, C++/MFC on Windows, through to to high-load .NET web applications and Python AI applications on everything from macOS to a Raspberry Pi. Chris is a full-stack developer who is as comfortable with SQL as he is with CSS.

In the late 1990s, he and his business partner David Cunningham recognized the need for a platform that would facilitate knowledge-sharing among developers, leading to the establishment of CodeProject.com in 1999. Chris's expertise in programming and his passion for fostering a collaborative environment have played a pivotal role in the success of CodeProject.com. Over the years, the website has grown into a vibrant community where programmers worldwide can connect, exchange ideas, and find solutions to coding challenges. Chris is a prolific contributor to the developer community through his articles and tutorials, and his latest passion project, CodeProject.AI.

In addition to his work with CodeProject.com, Chris co-founded ContentLab and DeveloperMedia, two projects focussed on helping companies make their Software Projects a success. Chris's roles included Product Development, Content Creation, Client Satisfaction and Systems Automation.

Comments and Discussions

 
SuggestionMonkey Management Pin
Scoinva24-Mar-14 5:46
Scoinva24-Mar-14 5:46 
GeneralRe: Monkey Management Pin
Chris Maunder24-Mar-14 6:04
cofounderChris Maunder24-Mar-14 6:04 
GeneralRe: Monkey Management Pin
Scoinva24-Mar-14 7:03
Scoinva24-Mar-14 7:03 
GeneralMy vote of 5 Pin
Marco Bertschi23-Mar-14 4:33
protectorMarco Bertschi23-Mar-14 4:33 
QuestionYearly Subscription Pin
Gary Noble18-Mar-14 11:12
Gary Noble18-Mar-14 11:12 
GeneralRe: Yearly Subscription Pin
Master.Man198019-Mar-14 3:26
Master.Man198019-Mar-14 3:26 
AnswerRe: Yearly Subscription Pin
Chris Maunder20-Mar-14 10:23
cofounderChris Maunder20-Mar-14 10:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.