Cannot retrieve Card URL from Trello PowerUp
Asked by Tomer Golshani:

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)


Answers:
author: Vishaal S
body: 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