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

Jim Clements

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/rocket-`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?

Sal_mqejn5

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.