PowerUp with card-back-section, receiving error "Uncaught TypeError: Cannot read properties of undefined (reading 'iframe')"

Trello
, ,
#1

I’m trying to do something I thought would be super simple – display a card’s ID in a card-back-section but it isn’t working correctly. I can get the card-back-section to display static text from an html file but I cannot seem to get any variables out of it. When I look at the console, there are at least a dozen errors but the one which I think is affecting me is:

section.html:20 Uncaught TypeError: Cannot read properties of undefined (reading ‘iframe’) at section.html:20:30

What I think is happening is that Trello can’t load the t variable for me to get the t.card(‘id’) out of it.

My project in Glitch is extremely simple.

  • public/index.html
  • public/section.html
  • public/js/client.js
  • public/js/section.js

  • index.html 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>

  • client.js contains:

    var BLACK_ROCKET_ICON = 'https://cdn.glitch.com/1b42d7fe-bda8-4af8-a6c8-eff0cea9e08a%2Frocket-ship.png?1494946700421';

TrelloPowerUp.initialize({

  'card-back-section': function(t, options){
     return {
        title: 'Parts List',
        icon: BLACK_ROCKET_ICON, // Must be a gray icon, colored icons not allowed.
        content: {
           type: 'iframe',
           url: t.signUrl('./section.html'),
           height: 150, // Max height is 1500.
        };
     };
  },

  'card-buttons': function(t, options) {
     return[{
        icon: BLACK_ROCKET_ICON,
        text: 'Card ID',
        callback: function(t){
           return t.card('id').then(card=>alert(card.id))
        }
     }];
  };

});

A section called Parts List is indeed displayed on the card which displays the content from section.html. Right now it looks like this:

Parts List:
Line above ID

Line below ID

(The card-button function is just a test to see if I could get the t.card(‘id’) that way, and it does work.)

  • 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>

  • section.js contains:

    /* global TrelloPowerUp */

var t = window.TrelloPowerUp.iframe();

// you can access arguments passed to your iframe like so
// unlike logic that lives inside t.render() this will only
// be passed once, so don't rely on this for information that
// could change, for example what attachments you want to show
// in this section
var arg = t.arg('arg');

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
     });
};

  • The Iframe connector URL points to the root of my Glitch project.

  • Card back section and Card buttons capabilities are turned on.

  • trelloAPIKey and token are both filled out in the .env section in Glitch, however I don’t think I’m using them for anything yet.

I’ve tried moving the var t = window.TrelloPowerUp.iframe(); to each of the different files in the project with no success. Sometimes I get an “undefined” error, depending on which file it’s located inside.

Why is my browser complaining about the iframe, and is that the problem I’m having tryin to pass/display the t.card(id) variable in section.html?

console
console1920×1157 242 KB

1 Like
#2

Maybe I just missed it, but where are you calling getCardId()?