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>
