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

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,456,603
Community Members
 
Community Events
176
Community Groups

Trying to display a card's ID in a cardback-section but only getting iframe or "Undefined" errors

I'm trying to display a card's ID in a card-back-section but I cannot get it to show. Please help me understand what I'm doing wrong.

  • The card-back-section capability is turned on in the Power-Up admin portal.
  • The connector URL is pointing to the index.html file listed below.

The index.html file contains

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://p.trellocdn.com/power-up.min.js"></script>
<script src="/js/client.js"></script>
</body>
</html>

The client.js file contains

TrelloPowerUp.initialize({

'card-back-section': function(t, options) {
return {
title: 'Parts List',
icon: https://cdn.glitch.com/1b42d7fe-bda8-4af8-a6c8-eff0cea9e08a%2Frocket-`ship.png?1494946700421,
content: {
type: 'iframe',
url: t.signUrl('./section.html'),
height: 150, // Max height is 1500.
};
};
},

});

 The section.html contains

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
<!-- This is for visual reference only -->
  <div>Line above card ID</div><br>

 <div id="card_id"></div><br>

  <!-- This is for visual reference only -->
  <div>Line below ID</div>
  <script src="/js/section.js"></script>
  </body>
</html>

 The section.js contains

 var t = window.TrelloPowerUp.iframe();

 var getCardId = function(t){
  return t.card('id')
  .get('id')
  .then(function(cardID){
  console.log('The card\'s ID is: ' + cardID); //Display in the console
  document.getElementById("card_id").innerHTML = cardID; // Display in section.html
  });
  };

 No matter what, all I can get the card-back-section to display is:

Parts List

Line above card ID

Line below card ID

Outputting the variable to the console doesn't work either.

What am I doing wrong?

1 answer

0 votes
Salomao Rosa Atlassian Team Dec 19, 2022

Hey @Jim Clements

Welcome to the community!

So, it looks like you're having some difficulties implementing your Power-Up, or perhaps, you're working on something independently to get that information for your cards. 

Because you're struggling with obtaining the card id and placing it on the card's back with your JS code, I recommend you submit your request to the Atlassian Developer's community. The Developer community is the best place for your question. We have many Trello Engineers that are active there, and they'd be happy to give some guidance for more advanced topics like these. You can access the Developer community for Trello here: https://community.developer.atlassian.com/c/trello.

Suggest an answer

Log in or Sign up to answer
TAGS

Atlassian Community Events