Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Trello dashboard using Bootstrap and JQuery
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
<form class="form-horizontal" id="boards_form">
<div class="form-group">
<label class="control-label">Choose your board</label>
<select class="form-control" id="boards"></select>
</div>
</form>
<div id="labels"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://api.trello.com/1/client.js?key=[AppKey]"></script>
<script type="text/javascript">
var loadedBoards = function(boards) {
$.each(boards, function(index, value) {
$('#boards')
.append($("<option></option>")
.attr("value",value.id)
.text(value.name));
});
};
var loadBoards = function() {
//Get the users boards
Trello.get(
'/members/me/boards/',
loadedBoards,
function() { console.log("Failed to load boards"); }
);
};
var loadedLabels = function(labels) {
$.each(labels, function(index, label) {
var label = $("<p><span class='badge' style='background:" + label.color + ";'>" + label.uses + "</span> " + label.name + "</p>");
$('#labels').append(label)
});
};
$('#boards').change(function() {
var boardId = $("option:selected", this).val();
$('#labels').empty();
Trello.get(
'/boards/' + boardId + '/labels',
loadedLabels,
function() { console.log("Failed to load labels"); }
);
});
Trello.authorize({
type: "popup",
name: "Trello dashboard",
scope: {
read: true,
write: false },
expiration: "never",
success: loadBoards,
error: function() { console.log("Failed authentication"); }
});
</script>
</html>
@coccoinomane

This comment has been minimized.

Copy link

commented Aug 29, 2018

Great snippet, thank you!
I have made it working but for one detail: the uses property of the label object is undefined:

label object

I have tried accessing the API directly via Postman, and still no uses property (reference):

label json

Am I doing something wrong, or maybe the API does not support anymore the uses property?

Thank you,
Guido

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.