Following on from my post about using time effectively, I thought I would deep dive into a tool I created using the Trello API. The reason behind this work was that I had multiple Trello boards and projects in flight, each using a Kanban column layout. I needed a way to see all of the tickets I had in Ready or Progress states and there didn’t seem to be an obvious solution using Trello itself. I also just fancied having a play with their API.

So problem stated, I had a quick design session to decide what I wanted. The site was to be really simple – have a column label selector and then a list of all boards and tickets using this label.

The Trello API

With this brief in mind, the first thing I needed to do was work out how the Trello API operated. Luckily, Trello provide a good set of documentation and comprehensive API for working with their products. They also provide a simple JavaScript client we can utilise to handle authentication and rest calls.

Authentication is a case of calling the appropriate method on the page load.

Notice here that I embedded client.js and added a key to it’s url. This key is provided by Trello and is unique to your account. It can be found here. Once this is all setup, users will be redirected to the Trello login page upon load to sign-in.

Let’s load something interesting

Now that we can authenticate, we can begin using the API to load some actual data. Here is a sample to load all the users’ boards which will be necessary to find relevant column labels.

Firstly, we can see how the client library allows us to simply add a url and will then plumb the rest together for us. Secondly, it’s worth noticing a Promise is being returned in order to use this code asynchronously elsewhere in app. We don’t want things hanging whilst we are making calls to an external API.

Skipping ahead, in order to load all the cards for this account we can wire up a few calls as follows. Note that the parameter getLists is telling the API to also fetch cards with the lists, thus reducing network calls.

Wiring it up in a UI

Now the data side is sewn up, we can wire it all together using a simple React UI. We can use componentWillMount to load the data upon page load and then add a select control for the filtering.

To filter the actual data, there are several fields on the Trello objects we can utilise.

Here, we are ensuring no closed objects are shown, and filtering the lists based on the selected filter. Finally, we can pass these results to an appropriate component for rendering.

That’s all folks

And that’s it. Using the Trello API is really quite simple. I have shown you some of the highlights for connecting and querying to fulfil a simple use case. You can see the full working app here for more details.