How do I to access the t.card(id)? I keep getting an iframe error (per the console)

Question

Sorry for the long post, I've tried to include as much relevant information as possible.

I'm trying to 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 with static text but I cannot get any variables out of it. When I look at the console (Chrome), 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. It's just these four files:

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 exists for the sole purpose of testing 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 in Trello Power-Ups & Integrations admin page.
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 for t.card(id) depending on which file it's located inside.

My two questions at this point are:

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

How do I to access the t.card(id)? I keep getting an iframe error (per the console)

0 Answers0