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

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>
           <meta charset="utf-8">
            <script src="https://p.trellocdn.com/power-up.min.js"></script>
            <script src="/js/client.js"></script>
  • client.js contains:

    var BLACK_ROCKET_ICON = 'https://cdn.glitch.com/1b42d7fe-bda8-4af8-a6c8-eff0cea9e08a%2Frocket-ship.png?1494946700421';
      '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) {
            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>
          <meta charset="utf-8">
          <!-- 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>
  • 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')
            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?

1 Like

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