Working with the Trello API

Like many other teams out there, our scrum team has been using Trello to help track our tasks and project work. This has been an effective tool to keep our team abreast of what everyone is working on, and what their current stress level is, using a list we call our threat board which has useful color coded labels. While easy to see while in Trello, how could someone in our office easily see this information in our SharePoint Intranet?

The goal of this post is to produce a simple html listing of card titles and their labels that can be included on a SharePoint content query webpart.

First you should run through Trello’s very helpful quick start guide. This will give you a primer for the code I am about to present. This quick start guide will also give you an application key which you will need to proceed.

Now that you have an APP Key, you can set up your basic html you will use to display the data.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="https://trello.com/1/client.js?key=[Your APP Key]]"></script>
        <style>
            .memberContainer{
                text-align:center;
                display:inline-block;
                font-size:large;
                border-radius: 5px;
                border:black solid 1px;
                min-width:250px;
                min-height:25px;
                padding:5px;
                margin:5px;
            }
            
            .label{
                display:inline-block;
                border-radius: 5px;
                min-width:50px;
                padding-right:5px;
            }
        </style>
    </head>
    <body>
        <hr/>
        <div id="outputContainer"></div>
        <script>
            $.noConflict();
        </script>
    </body>
</html>

Next you will dive into the JavaScript to pull and render the data. But before you do this you need to prepare two pieces of data.

  1. First you will need to know the ID of the list you are going to pull the cards from. The easiest way to do this is simply navigate to your Trello Board and append .json to the url. This will give you all of the raw json that builds the page. Do a quick search on “list”, find the correct one, and locate its ID. All of the list IDs I have worked with are simple 24 character alpha-numeric strings.
  2. Second, you will need your reusable authentication token. I bring this up knowing some are going to say you shouldn’t store this token in plain text in your JavaScript and normally you would be correct. Normally I wouldn’t want to expose this token but since it is only going to be used in a private intranet by managers it is a minimal enough risk. To create this token you can use the authentication service the Trello API provides with the link below. Make sure to replace the key and app name with your details. As you can see you are only granting the token read access. One extra layer protection I took was to create a dedicated trello account, then generated the token with this account so that the only board it had access to was our team board.
    https://trello.com/1/authorize?key=[YourApplicationKey]&scope=read&name=[YourAppName]&expiration=never&response_type=token

Now that you have our two identifiers lets take a look at the JavaScript. Put this just after the JQuery noConflict call in the previous code section.

    var basicToken = '[YourTokenString]';
    var storedKey = '[YourAppKey]';
    
    var colors = {
        "green":"#61bd4f",
        "yellow":"#f2d600",
        "orange":"#ffab4a",
        "red":"#eb5a46",
        "purple":"#c377e0",
        "blue":"#0079bf",
        "sky":"#00c2e0"
    };
    
    var threatSuccess = function(successMsg) {
        var output ="";
        jQuery.each(successMsg, function(index,value){
            output += "<div class='memberContainer' style=''>";
            jQuery.each(value.labels, function(subIndex,subValue){
                output += " <div class='label' style='background-color:"+colors[subValue.color]
                          +"'>"+subValue.name+"</div>";
            });
            output+="<br/>"+value.name+"</div>\r\n";
        });
        
        jQuery('#outputContainer').append(output);
    };
    
    var logError = function(errorMsg) {
        console.log(errorMsg);
    };
   
    jQuery(document).ready(function(){
        Trello.setKey(storedKey);
        Trello.setToken(basicToken);
        Trello.get('/lists/[YourListID]/cards', threatSuccess, logError);
    });

As you can see there are only a few functions. In my version I added a simple color array to give me better control over display colors of the labels, but here is a quick rundown of the important parts.

Last things first, the (document).ready call. This function first sets up the authentication token and app key into the Trello Library. The last line then invokes the Trello.get function passing in the success and error handler functions, the success function (threatSuccess) being the rendering code.

The threatSuccess function does two quick loops to output the card data to the html. First it loops through each card returned from the list, then it loops through all of the labels in contained in that card.

Now if you run the page it should give you a quick listing that looks something like this:

threat card display

All that is left is to decide where to plug the code in on your intranet site and you are ready to go!

 

Leave a Reply

Your email address will not be published. Required fields are marked *