When building a dashboard, there might be a need to provide additional information to your users about the dashboard either as descriptive text and/or graphics.
There are multiple ways in which you can present this information- (e.g., using text boxes, titles or subtitles on a visual to add additional descriptive information etc.). This article shows how you can use a custom visual content visual type as a clickable button that when clicked on, opens a sliding popup that contains the information you would like to display.
A working example of this is shown on this dashboad. (See the Click for Information button on the Summary sheet).
Instructions on how to create a similar button on your dashboard are below:
1. Create an HTML file that includes the code for the button, along with the information text that you need to present.
Below is sample code for the file. You can modify the size, color and other button attributes as needed.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #515151;
color: white;
cursor: pointer;
padding: 8px;
border: none;
text-align: center;
width: 300px;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: white;
color:orange;
}
.content {
padding: 0 18px;
max-height: 0;
font-size: 12px;
overflow: hidden;
font-family: Arial;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Click for Information</button>
<div class="content">
<p>You can add any information here to display to your end users. </p>
<p>This screen can be closed by clicking on the button again.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
2. Save this HTML file
Save the file (e.g., CollapsibleButton.html) to a location where it can be accessed from within your dashboard., e.g. an S3 bucket. For a private S3 bucket, you can use a CloudFront URL to access the file. Please ensure this aligns with your security requirements
3. Create a custom visual content visual on your Analysis sheet that will point to this file.
4. Click on the Format visual, enter the HTML file URL in the Custom Content field and click APPLY.
5. Publish your dashboard and see it work!
This article has shown a way to use the custom visual content visual with an HTML file that adds additional functionality and interactivity to your dashboard. Hopefully this gives you additional ideas on how to get creative with your dashboards.
Article Disclaimer: Any code shared in Community articles is to be considered a sample and is not endorsed by AWS.