Power-up development: does .initialize run before cards are fully loaded?

Get involved

I am creating my first power-up for Trello, and I've run into a bit of a roadblock. The purpose of the power-up is very simple - to expose the state of all checklists on the back of a card in the form of a progress bar on the front of the card (using card-badges).

It very almost works, but not quite... When I load the board, all cards show the string "N/A", which is the fallback string when no checklist items are detected. The cards obviously have checklists though, as the in-built checklist card-badge works just fine, showing (3/7, or 2/14, or whatever the case may be). However, the moment I check or uncheck any item in a checklist, the progress bar appears on the front as expected.

My guess is that the .initialize method is being called before the cards are fully loaded, or something along those lines. As a first-timer here I expect I am probably just missing something extremely obvious... Can anyone point me in the right direction?

The code looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Checklist Progress Power-Up</title>
<script src="https://p.trellocdn.com/power-up.min.js"></script>
</head>
<body>
<script>

function calculateChecklistProgress(card) {
let totalItems = 0;
let completedItems = 0;
if (card.checklists) {
card.checklists.forEach(function(checklist) {
if (checklist.checkItems) {
totalItems += checklist.checkItems.length;
completedItems += checklist.checkItems.filter(function(item) {
return item.state === 'complete';
}).length;
}
});
}

if (totalItems === 0) {
return 'N/A';
}

const progressPercentage = ((completedItems / totalItems) * 100).toFixed();

const progressBar = createProgressBar(progressPercentage);

return progressBar;
}

function createProgressBar(progressPercentage) {
const barLength = 10;
const completedChars = Math.round((progressPercentage / 100) * barLength);
const remainingChars = barLength - completedChars;

const progressBar = ' █ '.repeat(completedChars) + ' __ '.repeat(remainingChars)

return ` ${progressBar} ${progressPercentage}%`;
}

function updateCardBadges(t) {
return t.card('all')
.then(function(card) {
window.card = card;
const progress = calculateChecklistProgress(card);
return [{
text: progress,
color: 'light-gray',
}];
});
}

window.TrelloPowerUp.initialize({
'card-badges': function(t, options) {
return t.card('all')
.then(function(card) {
window.card = card;
return updateCardBadges(t);
});
},
});
</script>
</body>
</html>

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Earn badges and make progress

Participate in fun challenges

Gift kudos to your peers

Rise up in the ranks

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Power-up development: does .initialize run before cards are fully loaded?

1 answer

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Earn badges and make progress

Participate in fun challenges

Gift kudos to your peers

Rise up in the ranks

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Power-up development: does .initialize run before cards are fully loaded?

1 answer

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events