DP22 - Using Beast Mode to Build Data Storytelling - Links and Images
This post is part of a series of beast modes I presented on during my “Using Beast Mode to Build Data Storytelling” Domopalooza 2022 session. If you find this post helpful please make sure to give it a like or an awesome below.
Use Case
We wanted to enhance the visualization experience and allow users to see which specific item we’re referencing with an image rather than just a specific ID code. Another think we wanted to do was to allow users to click on the image or hyperlink to go to the website to get more information on the product rather than having to look it up themselves. We utilized a Mega Table for this but the beast mode will also work in an HTML table if desired.
Beast Mode
CONCAT( '<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">', '<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>', '</A>’)
Beast Mode Breakdown
Hyperlinks
CONCAT('<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">@</A>’)
Generates HTML code to create hyperlink for users to click on by dynamically creating the URL with the correct product ID. For example: <A HREF="https://my.url.com/store/detail/SM58" TARGET="_blank">@</A>
TARGET="_blank"
causes the link to open in a new tab instead of replacing the existing window. This is important because if it’s opened in a new window and a user clicks back to get back to the card they will lose all of their filtering. Opening a new tab allows the card to still exist with the filtering in place giving a much better user experience.
Whatever is in between the <A>
and </A>
tags will be highlighted for the user to click on and go to the URL defined in the HREF. In this example @ is the text that will be highlighted for a user to click.
Can only use mailto, http and https protocols in hyperlinks.
Images
CONCAT('<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>’) •
Dynamically generate the URL of the image using the product ID For example: https://my.url.com/images/items/SM58-small.jpg
CONCAT
wraps the dynamic URL in HTML IMG
tag to tell the browser to display an image
Images & Hyperlinks
CONCAT( '<A HREF="https://my.url.com/store/detail/', `Product ID`, '" TARGET="_blank">', '<IMG SRC="https://my.url.com/images/items/', `Product ID`, '-small.jpg"/>', '</A>’)
Combines the logic from the Link beast mode with the Image beast mode to allow for users to click on the image to open the link.
We’ve replaced the @ in the Link beast mode
Final Result
Clinking the image takes you to the webpage defined in the A tag's HREF URL.
**Did this solve your problem? Accept it as a solution!**
Comments
-
Did I mention this was Awesome?
0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.4K Charting
- 710 Beast Mode
- 50 App Studio
- 39 Variables
- 668 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 45 Workflows
- 7 DomoAI
- 33 Predict
- 13 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 116 Manage
- 113 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 103 Community Announcements
- 4.8K Archive