Domo APP Button Question

Chuqi_D

I'm creating a popup button to open a card in the Domo app. Is there a way to adjust the display size of the card so it opens in half-screen instead of full-screen?

ArborRose

Domo does not provide built-in functionality to directly set a specific size for the popup window, such as half-screen. But you can try to use a workaround by implementing a custom html button.

<button onclick="openCard()">Open Card</button>


<script>

function openCard() {

    var url = "https://your-domo-instance.com/cards/card-id";

    var width = window.innerWidth / 2; 

    var height = window.innerHeight; 

    var left = (window.innerWidth - width) / 2; 

    var top = 0; // Start at the top of the window


    window.open(url, 'Domo Card', `width=${width},height=${height},top=${top},left=${left}`);

}

</script>

Chuqi_D

Chuqi_D

Chuqi_D

https://community-forums.domo.com/main/discussion/comment/99227#Comment_99227

Hey, I have created a html brick, but when I clicked the button nothing happened. When I copy the code to the html compiler online, it works, but not in domo. Any idea why?

ArborRose

I’m currently unable to test directly in Domo. I initially assumed you were referring to a programmed button that opens a card, rather than creating an image or a visual element with an action attached.

The button should function according to the card's existing settings for full-screen display. If you are implementing this through something like a blank brick card button, the code I provided should work effectively.

ArborRose

There may be limitations to what it can do inside Domo. Here's a simplified version to check if it fires properly. If its a brick, you have to put the javascript code without tags in javascript, and the button in the html section.

<button onclick="openCard()">Open Card</button>


<script>

function openCard() {

    var url = "https://your-domo-instance.com/cards/card-id"; // Replace with your actual card URL

    window.open(url, '_blank'); // This opens the card in a new tab

}

</script>