Trello | Integration

by Zoltan Boros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body ng-app="app" ng-controller="Controller">
<h1>Trello Integration - How to use Trello API</h1>

<ol>
    <li>Register on <a href="https://trello.com/" target="_blank">Trello</a></li>
    <li>Log in to <a href="https://trello.com/" target="_blank">Trello</a>, go to the <a href="https://trello.com/app-key" target="_blank">API Key</a> page and copy your API Key here: <input type="text" name="apiKey" ng-model="apiKey" placeholder="Your API Key" /></li>
    <li><a target="_blank" ng-href="{{getApiKeyAuthorizationUrl()}}">Authorize your API Key</a> for
        <select name="authorizationDuration" ng-model="authorizationDuration">
            <option value="1hour">1 hour</option>
            <option value="1day">1 day</option>
            <option value="30days">30 days</option>
            <option value="never">forever</option>
        </select>.</li>
    <li>From the authorization page copy the token here: <input type="text" name="authorizationToken" ng-model="authorizationToken" placeholder="Authorization Token" /></li>
</ol>

<ul>
    <li><a target="_blank" ng-href="{{getUrlFor('members/me/boards')}}">Get my boards</a></li>
    <li><a target="_blank" ng-href="{{getUrlFor('boards/' + boardId + '/lists')}}">Get lists</a> by board id <input name="boardId" ng-model="boardId" placeholder="Board id" /></li>
    <li>
        <a target="_blank" href ng-click="createCard();">Create card</a><br />
        <label for="listId">Container list id</label><input type="text" id="listId" name="listId" ng-model="listId" placeholder="List id" /><br />
        <label for="cardName">Name</label><input type="text" id="cardName" name="cardName" ng-model="cardName" placeholder="Card name" /><br />
        <label for="cardDescription">Description</label><input type="text" id="cardDescription" name="cardDescription" ng-model="cardDescription" placeholder="Card description" />
    </li>

    <li>
  ...

CSS

* {
    font-family: Arial;
    font-size: 11pt;
}

h1 {
    font-size: 11pt;
}

label {
    display: inline-block;
    width: 120px;
}

JavaScript

var app = angular.module('app', []);
app.controller('Controller', ['$scope', '$http', Controller]);

function Controller($scope, $http)
{
    const TRELLO_API_URL         = 'https://api.trello.com/1/';
    const APP_NAME               = 'Trello%20Integration%20Demo';
    $scope.apiKey                = '';
    $scope.authorizationToken    = '';
    $scope.authorizationDuration = '1hour'; // '1hour', '1day', '30days', 'never'

    $scope.getApiKeyAuthorizationUrl = function()
    {
    	if (0 < $scope.apiKey.length) {
        	return 'https://trello.com/1/authorize?expiration=' + $scope.authorizationDuration + '&name=' + APP_NAME + '&key=' + $scope.apiKey + '&scope=read,write&response_type=token';
        } else {
        	return '';
        }
    };

    $scope.readyToWork = function()
    {
    	return 0 < $scope.apiKey.length && 0 < $scope.authorizationToken.length;
    };

    $scope.getUrlFor = function(urlFragment)
    {
    	if ($scope.readyToWork()) {
        	return TRELLO_API_URL + urlFragment + (urlFragment.indexOf('?') < 0 ? '?' : '&') + 'key=' + $scope.apiKey + '&token=' + $scope.authorizationToken;
        } else {
    		return '';
        }
    };

    $scope.createCard = function()
    {
        var responseHandler = function(response)
        {
            console.log(response);
        };

    	$http.post(
			$scope.getUrlFor('cards'),
			{
            	idList : $scope.listId,
				name   : $scope.cardName,
				desc   : $scope.cardDescription,
                pos    : 'top'
			}
		).then(responseHandler, responseHandler);
    };
}