Community resources
Community resources
Community resources
Cannot retrieve Card URL from Trello PowerUp
I am trying to get the current Card URL from my Powerup iframe JS code, but I get "undefined" when calling t.card().url
Please can you check what is wrong with my code? Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://p.trellocdn.com/power-up.min.js"></script>
<script>
var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';
TrelloPowerUp.initialize({
'card-buttons': function (t, options) { // Card buttons
return [
{
icon: "https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg", // Set trial lesson button
text: "Set Trial Lesson",
callback: function (t) {
var mentorName = window.prompt("Enter Mentor Name:");
if (mentorName !== null) {
var topic = window.prompt("Enter Topic/s to focus (leave blank if nothing special):");
var cardUrl = t.card().url;
var url = `https://somewebsite.com/api.php?action=set_trial_lesson&card_url=${encodeURIComponent(cardUrl)}&mentor_name=${encodeURIComponent(mentorName)}&topic=${encodeURIComponent(topic)}`;
// Make a GET request to the API endpoint
fetch(url, {
method: 'GET'
})
.then(function (response) {
if (response.ok) {
return response.json();
} else {
throw new Error('Failed to create trial lesson. Please try again.');
}
})
.then(function (data) {
if (data.status === 'success') {
throw { success: true, message: 'Trial lesson created successfully!' };
} else if (data.status === 'error') {
throw { success: false, message: data.message };
}
})
.catch(function (UserMessage) {
var displayType = UserMessage.success ? 'success' : 'error';
var successMessage = UserMessage.success ? '✓ ' + UserMessage.message : UserMessage.message;
var errorMessage = UserMessage.success ? UserMessage.message : '✗ ' + UserMessage.message;
t.alert({
message: UserMessage.success ? successMessage : errorMessage,
display: displayType,
duration: 5 // Adjust the duration to control how long the message is displayed
});
});
}
}
},
{
icon: "https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg", // Iframe Websites
text: "Iframe Websites",
callback: function (t) {
return t.popup({
title: "Menu",
items: [
{
text: "Respond.io",
callback: function (t) {
return t.popup({
title: "Respond.io",
items: [
{
text: "Update Iframe",
callback: function (t, opts) {
if (respondLink) {
t.set('card', 'shared', 'webSectionContentUrl', respondLink)
.then(function () {
t.get('board', 'private', 'cardBackRefreshed', false)
.then(function (cardBackRefreshed) {
t.set('board', 'private', 'cardBackRefreshed', !cardBackRefreshed)
.then(function () {
t.closePopup();
});
});
});
}
}
},
{
text: "Set URL",
callback: function (t, opts) {
respondLink = window.prompt("Enter the new URL for the Respond.io:");
t.closePopup();
}
},
{
text: "Cancel",
callback: function (t) {
return t.closePopup();
}
}
]
});
}
},
{
text: "Lesson status",
callback: function (t, opts) {
var cardUrl = t.card().url;
if (cardUrl) {
var trialLessonLink = `https://somewebsite.com/api.php?action=get_lesson_status&card_url=${encodeURIComponent(cardUrl)}`;
t.set('card', 'shared', 'webSectionContentUrl', trialLessonLink)
.then(function () {
t.get('board', 'private', 'cardBackRefreshed', false)
.then(function (cardBackRefreshed) {
t.set('board', 'private', 'cardBackRefreshed', !cardBackRefreshed)
.then(function () {
t.closePopup();
});
});
});
} else {
console.log("Card URL is undefined");
}
}
}
]
});
}
}
];
},
'card-back-section': function (t, options) { // Iframe
return t.get('card', 'shared', 'webSectionContentUrl')
.then(function (webSectionContentUrl) {
if (!webSectionContentUrl) {
webSectionContentUrl = 'https://example.com/';
}
return {
title: 'iframe URL:',
icon: GRAY_ICON,
content: {
type: 'iframe',
url: webSectionContentUrl,
height: 800,
},
action: {
text: 'Custom Link',
callback: function (t) {
var newUrl = window.prompt('Enter URL:');
if (newUrl) {
t.set('card', 'shared', 'webSectionContentUrl', newUrl);
return t.closePopup();
}
}
}
};
});
},
});
</script>
</body>
</html> ADDENDUM: I would want just to get top.location.href to retrieve the current URL, but it fails since the powerup iframe is from another domain, so the browser won't let me access top.location.href (cross-origin policies)
1 answer
Hey Tomer,
Good day to you :)
The t.card() function in the Trello Power-Up client library returns a Promise that resolves to an object containing data about the card. This object includes various data fields, but the card's URL is not one of them.
However, you can construct the URL of the card using the card's id and the id of the board it is on. You can obtain these with the t.card('id', 'idBoard') call.
Regarding your addendum, you're correct that you can't use top.location.href due to cross-origin policies. The Power-Up runs in an iframe on a different domain from Trello, so it doesn't have access to the top-level window's location.
For a question like this and a potential workaround ( Scripts related), Trello's Developer Community is really your best bet: https://community.developer.atlassian.com/c/trello/42
Do let me know if you've more questions. I'd be happy to help.
Cheers,
Vishaal S | The Trello Team
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.