Getting All Cards with Dates from a Board (2 of 3)

In the last post of this series, I walked you through how to get a JSON dump of a Trello card with nothing more than your browser, a developer key, and a token for access to your private boards and cards.  In this post, we'll get a little more sophisticated with what comes out of Trello.

 

The first thing to realize is that baking the token and the key into each request is an untenable situation.  In whatever solution you wind up implementing to hit this API, you clearly won't do that.  So, let's take a look at one way to avoid this by hitting the API through a client javascript library that Trello itself furnishes (non minified version can be found here).  Don't worry at all if you're not proficient with javascript (I'm only passingly familiar, myself) -- the code itself comes pre-supplied, and we're not going to alter it much.

 

Let's first take a look at the packing board from last time. 

You'll note that, in addition to bringing my toothbrush, I've now added a series of items that I need to do before leaving for my hypothetical trip, which starts the afternoon of August 17th.  On the day of departure, I need to empty the trash and turn down the thermostat.  Ahead of time, I need to make sure to renew my passport, and, finally, I have to stop my mail at some point. This last task is not especially date sensitive -- I can do it whenever.  I've reflected this by adding dates to the cards in Trello, as appropriate.  To do this, select the card in question and press the "d" key to take advantage of the keyboard shortcut.  You can then use the date-picker or, if you want, remove a date from a card.

 

With that in place, let's roll up our sleeves and look at some code!  Now, you're probably wondering how we'll go about issuing these requests: text editor, IDE, something like Fiddler?  Well, no, as it turns out.  Again, you just need your browser, though this is going to be a bit more sophisticated.  As it turns out, Trello supplies a pre-loaded JSFiddle for us to play with.  Click that link, and here's what you'll see:

Cool, huh?  Now, if you click the link, you'll be prompted as to whether or not you want to let "an unknown application" use your Trello account.  If you're not logged in to Trello, you'll see this message:

If you are logged in, you'll see a similar one, but with "Allow" instead of "Log In."  In either case, click the green button and enter your Trello credentials if you're not already logged in.  What you've done here is generate a token, but Trello's client library is handling all of the annoying bits for you.  You should now see a dump of every Trello card you own.  While that's interesting, it's not especially helpful at the moment.

 

What would be helpful is to have some way to see only which items for the packing boards are time sensitive.  Let's go from this sprawling list to a very focused one with interesting information.  Look for the line in the javascript pane that reads

 

Trello.get("members/me/cards", function(cards) {

 

What's happening is that we're issuing a GET request to the members resource and telling it that the thing we want to get is all of the cards for the user that corresponds to the shorthand "me" (which it understands on the basis of the token).  That's a handy thing to file away, but right now what we want to do is see what cards are on the packing board.  That's a good interim goal before narrowing down further. To do that, change the line to

Trello.get("boards/boardId/cards", function(cards) {

 

where boardId is your board's ID.  You can obtain this by navigating to your board in the browser and, simply copying it from the URL.  Here's the id for my packing board:

Better!  We're only seeing cards from the packing board.  But remember that we're only interested in the ones that have dates attached to them, and this is still showing us everything.  Well, no problem there.  Let's make one more change.  And, while we're at it, let's make the output actually tell us when this needs to happen.

 

First, we'll need to make sure we're actually seeing the date on the card, which is known as the due date.  Change the line

 

.text(card.name)

 

to

 

.text(card.name + ", due on " + card.due)

 

That gives you this output, but it's not quite what we want:

To fix that, further modify the line that you just changed to be

 

.text(card.due === null ? "" : card.name + ", due on " + card.due)

 

With that change you'll see only the cards that have dates attached.  The javascript and formatting of the date may not be especially pretty, but you have something that's starting to look a bit useful -- you can use the Trello API to search a board to show you only cards with due dates.

 

Next time, I'll show you how to expand on this and start building out a useful application.

Want to build your desktop, mobile or web applications with high-performance controls? Download Ultimate Free trial now and see what it can do for you!