Procure the Board Button in Trello

I was recently posting an issue in the Developer Forum for Trello and found a post I could answer fairly quickly since I knew the answer already. Thought I would share it here on my blog as well.

The question was along the lines of:

How do I show my board button only to members of the board who have paid for it? Or how do I block guests from getting the board button?

Here is the code:

/// <reference path="trello.d.js" />
/** @type {TrelloPowerUp} */
const tpu = window.TrelloPowerUp;
tpu.initialize({
'board-buttons':
/**
* Returns the board button
* @param {TrelloObject} t
* @returns {TrelloBoardButtonOption[]}
*/
async (t) => {
/** @type {TrelloMemberObject} */
const member = await t.member("id");
/** @type {TrelloBoard} */
const board = await t.board("memberships");
/** @type {TrelloMembership} */
const membership = board.memberships.find(o=>o.idMember === member.id);
if(!membership || membership.memberType === "observer") {
t.alert({
message: "Sorry you are only a guest on this board!",
duration: 1,
});
return []; // no board button for you
}
/** @type {TrelloBoardButtonOption} */
const button = {
text: "hello",
icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAF2SURBVDhPtZMxT8JQEMfb0pI2xMbA0JWyNXQEJLHO7VrmfgAHTfgMLMTo0FknDU0TNze+gCbOSmSBwU2hgxMlAevd8wV95GG6+Euu73/v/e/aXlPhX8myrIBBUy4iXRmCIDicTqeeqqoHmKdp+lir1YaDweCeGHZx1u/vHTnOpWEYqSiKGWyRQI17juNc9cFDzNvEUay2ms1bkJtCXjTBE0WRCprFc70TTdO4Rb8DPa7rnoL+odfr6bZtP4HkFm0HeJ+xBrQg4WU+n7eSJLFR5wH8dfC3UJMGy+WyDJNGmQvwC4vFooyaNFAUZVUo/Pm5GdBbLBZXqEkD2Bjpuv6BOg/olSRpRNNv2u32NSzcoW0HeG9gJZAnQOx6/cKsVmc03YlZNWfgPacpi+/7rmma7yC5d8azDnhAb2AmNx6PJ77fGWqaqsmyvF8qleB19c9KpfJqWdZdo9E4juP4gdoJ3J8J6Xa7BgzXQr1er1/CMHwjBwyC8AW6vpgYpmCzMQAAAABJRU5ErkJggg==`, // for card front badges only
condition: "always",
callback: (tt) => {
tt.alert({
message: "You are all paid up!",
duration: 1,
})
}
};
// return the button
return [button];
}
});
view raw client.js hosted with ❤ by GitHub

Happy coding!

Leave a Reply