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 IDLine 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?