Basecamp, Greasemonkey & JQuery – Together At Last!

At Delphic Sage, we love using Basecamp as our central communications hub between our staff and our clients. It’s simple and easy to use, and has a permissions model that makes it well suited as a client portal. However, Basecamp lacks the granularity to be used for actual project/task management which is why we use a different system internally. One of the pain points for our project management team is that they often have to take messages or to-do items from clients out of Basecamp and copy them to our internal solution manually. After reading a bit about the Basecamp REST API, we devised a fairly clever way to make this happen more easily without subjecting/exposing our clients to the minutia of our internal task system.

Some Requirements

1. It needs to be quick and easy to selectively create a new intranet task based on a client entered To-Do item or message in Basecamp.
2. It needs to be easy to jump back and forth between the Internal Task and the Basecamp To-Do
3. The Client should not be exposed to the internal workflow / comments

The Solution

1. We used the BaseCamp API to allow project managers to simply create a new task based on the basecamp URL of an existing To-Do Item. Once the task was created, we prepended the To-Do in back camp with the intranet Task #.
2. We used a GreaseMonkey Script with JQuery to Link all task #s on BaseCamp To-Dos to the corresponding Intranet Task.
3. Since our clients will not have the Greasmonkey script, they will only see that there is a task number, indicating that the Basecamp To-Do has been escalated to an internal Task.

Read on for the step by step analysis…

Making it Happen

If a Task from a Client is Deemed an Appropriate Action Item, it gets Imported to Our Task System

Project Managers transfer tasks from Basecamp to our intranet simply by using the URL. Once imported, we pull the To-Do items description and comments into our internal system using the Basecamp API. The intranet task and Basecamp To-Do Item are now linked.

Here is what the Client Sees in Basecamp

The To-Do still appears in BaseCamp, but not exactly as the client entered it. It has been prepended with our internal task identifier. This gives our clients and our developers a unique way to identify tasks and bugs to avoid confusion.

Making it Easier to Jump Between Basecamp and Our Internal Task Tracker with Greasemonkey

We use greasemonkey (the popular firefox plugin) and jquery (the popular javascript framework) to link our basecamp tasks directly to their counterparts in our internal task tracker. Only Delphic Sage team members see these links because only we have the greasemonkey script installed. This makes jumping back and forth between the two systems a breeze.

Basecamp comments that have been piped into our internal Task Tracker via the Basecamp API. Once our Tasks were linked to the Basecamp To-Do Items, it was a breeze.

Here is a peak at the greasemonkey script. You can see that there are many different selectors that we use to find To-Do Item containers in different scenarios. I was surprised by how incosistent the HTML for displaying a To-Do Item is accross the different Basecamp screens. Fortunately, JQuery Selectors make this an esasy hurdle to jump. Once I found all the selctor combinations, it just took a simple regex to parse out the task number and convert into a hyperlink.

« Prev Article
Next Article »