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

Jim Clements December 12, 2022

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
Sal
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 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
AUG Leaders

Atlassian Community Events