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)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.