How can I add an icon representing a file type for a URL into a table?

D_Markley34 · 2024-02-08T21:25:49+00:00

There was an error rendering this rich post.

I have a data set which contains a column for URL's for file a user has upload and a second column that contains the type of file that has been uploaded. I have created a beast mode that displays a thumbnail of any uploads that are images. I now want to display an icon for items that are not images but cannot get the icons to display.

This is the beast mode that I have been using to display the thumbnails:

CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')

As a test I attempted to load a PDF icon for all non-image file types, using the following beast mode. The thumbnail worked for images but all other types were blank.

CASE
WHEN stepAnswerUploadType = 'IMAGE' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')
ELSE
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<i class="fas fa-file-pdf"></i>',
'</a>')
END

Any assistance would be greatly appreciated

Quick Links

Accepted answers

DavidChurchman

I would probably still create a column that is either the link to the image or a link to an image that represents the file type, and then use that as the image source in the HTML Beastmode. (To me, it's harder to get HTML code right, so I want to keep that part of the code as simple as possible).

But if you want to do it in your case statement, you just need a working img src, which is missing from that clause of your case statement:

CASE
WHEN stepAnswerUploadType = 'IMAGE' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')
WHEN stepAnswerUploadType = 'PDF' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',

'<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png height="20px" alt="Click for file"/>',
'</a>')
END

All comments

ColemenWilson

I used:

CASE
WHEN stepAnswerUploadType = 'IMAGE' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')
WHEN stepAnswerUploadType = 'PDF' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')
END

And get the following:

Will that work for you?

D_Markley34

Thanks for the quick response. Unfortunately that does not work for me. The value in stepAnswerUploadUrl is the url for the actual file that was uploaded not an icon. The image works because it opens a thumbnail of the actual image.

DavidChurchman

You're using `stepAnswerUploadUrl` to point towards the image icon and that's working? Why don't you add the url for your PDF icon to that same column so you don't need a CASE statement?

Like all IMAGES, could have this url as their <img src>:

And all PDFs could have this url as their <img src>:

D_Markley34

The stepAnswerUploadUrl contains the url of the actual item that was uploaded to the system not the url for the icon. Ideally, I would want to show a thumbnail of the uploaded file regardless of the file type, but am willing to settle for the icon of the file type if it is not an image.

DaveTestImage contains this beast mode calculation:

DavidChurchman

But if you want to do it in your case statement, you just need a working img src, which is missing from that clause of your case statement:

CASE
WHEN stepAnswerUploadType = 'IMAGE' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',
'<img src="',`stepAnswerUploadUrl`,'" height="20px" alt="Click for image"/>',
'</a>')
WHEN stepAnswerUploadType = 'PDF' THEN
CONCAT('<a href="',`stepAnswerUploadUrl`,'" target="_blank">',

'<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png height="20px" alt="Click for file"/>',
'</a>')
END

D_Markley34

Thanks that does work

other categories

Product Ideas
Have a Domo product enhancement idea? Submit or upvote on ideas in the Ideas Exchange.
Ideas Exchange
Suggest & vote on new features you would like to see implemented in the Domo Product.
Data Connections
Ask questions about Connectors, Workbench, Cloud Amplifier and get best practices from Domo peers
Connectors
Connectors, Custom Connectors, Writeback
Workbench
Ask questions about Workbench, a secure, client-side solution for uploading your on-premise data to Domo.
Cloud Integrations
Ask questions about Cloud Integrations and Federated Data connection to your data warehouse or lake.
Data & ETL
Ask questions about Magic ETL, SQL DataFlows, DataFusion, Dataset Views and get best practices from Domo peers
Magic ETL
Ask Magic ETL questions and get answers from Domo peers
SQL DataFlows
Ask SQL DataFlow questions and get answers from Domo peers
Datasets
Ask DataFusion and Dataset Views questions and get answers from Domo peers
Visualize & Apps
Ask questions about Beast Mode, Cards, Charting, Dashboards, Stories, Variables and get best practices from Domo peers
Dashboards
Ask Cards, Dashboards, and Stories questions and get answers from Domo peers
App Studio
Ask questions about building apps in App Studio.
Pro-code Components
Ask questions about pro-code components and Domo Bricks and get answers from Domo peers.
Charting & Analyzer
Ask questions about charting and Analyzer and get answers from Domo peers.
Calculations & Variables (Beast Mode)
Ask questions about using calculated fields and Variables (Beast Modes) in Analyzer.
AI & Data science
Ask questions about DomoAI and get answers from Domo peers.
Domo AI & AI Chat
Ask questions about AI Chat and AI assistants.
Managing AI
Ask questions about managing AI with AI Playground, AI projects, AI models, and more.
Jupyter Workspaces
Ask questions about Jupyter Workspaces, Notebooks, and file share.
Automate
Ask questions about App Framework, Workflows, Domo Bricks, Domo Developer, API and get best practices from Domo peers
Workflows
Ask questions about Task Center, building automations with Domo Workflows, and executing JavaScript or Python code with Code Engine.
Alerts
Ask questions about managing alerts in Domo and get answers from Domo peers.
Distribute
Ask questions about Domo Everywhere, Scheduled Reports, Mobile and get best practices from Domo peers
Domo Everywhere
Ask questions about embedded analytics with Domo Everywhere.
Reporting
Ask questions about Scheduled Reports, Report Builder, and Slideshow Publications.
Manage
Ask questions about Governance Administration, Approvals, Teams, Alerts, and Buzz and get best practices from Domo peers
Governance & Security
Ask questions about People, Groups, Roles, Sandbox, Activity log, Buzz, Teams, Approvals and PDP and get best practices from Domo peers
Navigation & Productivity
Ask questions about navigation, Projects & Tasks, Goals, and Buzz chat.
APIs
Ask APIs and Developer.domo.com questions and get answers from Domo peers
Add-ins & Plugins
Ask questions about plugins, Microsoft add-ins, and other third-party software integrations.
Domo Community Gallery
Watch how our Customers are using Domo to solve their complex problems.
Product Releases
Domo support and product teams are here to live-answer questions about the most recent product releases. Please post questions in this Forum board for all users to benefit (rather than submitting a support ticket).
Domo University
Questions or discussions related to Domo University, trainings and certifications
Community Forums
Getting Started
Welcome to Domo's Community Forums! You'll find everything you need to get started in this category.
Community Announcements
Get the latest from Domo's Community Team.
Social Groups
Archive
Old or outdated content that could still be found helpful.

Find more posts tagged with

Beast Mode