Assistance Requested with DOMO App Buttons Functionality

Arun_Ch
Arun_Ch Member
in Apps

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>

Tagged:

Best Answer

  • GrantSmith
    GrantSmith Coach
    Answer ✓

    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?

    **Was this post helpful? Click Agree or Like below**
    **Did this solve your problem? Accept it as a solution!**

Answers

Categories