Assistance Requested with DOMO App Buttons Functionality

Arun_Ch

Hi Everyone,

I am currently working on integrating additional functionalities into our DOMO apps and would appreciate your expertise.

My objective is to create two interactive buttons within the app:

A Feedback Button that, when clicked, should ideally open an email draft addressed to a specific person for feedback purposes, with the email ID auto-populated.
A Confluence Documentation Button that directs users to a specific Confluence page when clicked.
I have developed the necessary JavaScript, CSS, and HTML code for these functionalities, which I have attached below for your reference. However, I'm encountering a couple of issues:

The images intended for these buttons are not displaying.
Clicking the buttons does not trigger the expected actions.
I am keen to resolve these issues but seem to have hit a roadblock. Could you please review the attached code and provide any insights or suggestions you might have? Your assistance in troubleshooting these issues would be immensely valuable.

Thank you in advance for your time and support.

Javascript code

document.addEventListener('DOMContentLoaded', function() {
const feedbackButton = document.getElementById('feedbackButton');
if (feedbackButton) {
console.log("Feedback button found");
feedbackButton.addEventListener('click', () => {
window.location.href = 'abc@gmail.com';
});
}

const confluenceButton = document.getElementById('confluenceButton');
if (confluenceButton) {
console.log("Confluence button found")
confluenceButton.addEventListener('click', () => {
window.open('https://confluence/pages/viewpage.action?pageId=1234', '_blank');
});
}
});

HTML Code

CSS code
#feedbackButton, #confluenceButton {
background-color: #007bff; /* Blue background /
color: white; / White text /
padding: 10px 20px; / Top and bottom padding of 10px, left and right padding of 20px /
border: none; / No border /
border-radius: 5px; / Rounded corners /
font-size: 16px; / Text size /
cursor: pointer; / Cursor changes to pointer when hovering over the button /
text-align: center; / Center-aligned text /
margin: 5px; / Margin around the buttons /
text-decoration: none; / No underline on text /
display: inline-block; / Align buttons side by side */
}

#feedbackButton:hover, #confluenceButton:hover {
background-color: #0056b3; /* Darker blue background on hover */
}

<button id="feedbackButton">
<img src="feedback.png" alt="Feedback">
</button>
<button id="confluenceButton">
<img src="documentation.png" alt="Confluence Docs">
</button>

GrantSmith

You can use the domo.navigate function to go to a different URL: https://developer.domo.com/portal/e947d87e17547-domo-js#domonavigate

Known Limitation
Regular HTML link syntax will not work in Domo Apps. Use the domo.navigate javascript function below to create a link.

As for your images, are they included within your app? Have you inspected the network traffic to see if the images are able to be loaded?

GrantSmith

You can use the domo.navigate function to go to a different URL: https://developer.domo.com/portal/e947d87e17547-domo-js#domonavigate

Known Limitation
Regular HTML link syntax will not work in Domo Apps. Use the domo.navigate javascript function below to create a link.

As for your images, are they included within your app? Have you inspected the network traffic to see if the images are able to be loaded?

Arun_Ch

Thanks @GrantSmith !