Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

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

Ernest Gazarian
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Oct 06, 2023

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>

 

1 answer

1 vote
Oliver S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
Oct 08, 2023

Hi Ernest, welcome to the community! :)

You've reached the Trello Community where users post general questions relating to using Trello and its features.

If it helps, you might be best to repost your question in the Trello Category on the Atlassian Developer Community: https://community.developer.atlassian.com/c/trello/42

You'll be more likely to get some eyes on it from others who are building Power-ups for Trello! :)

Hope this helps!

Ernest Gazarian
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Oct 09, 2023

Ooops, my mistake! Thanks for the tip!

Oliver S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
Oct 09, 2023

No worries Ernest - all okay! Just didn't want your question to go unanswered for too long! :) Have a great week ahead!

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events