Rao Waqas Akram

URL as Hyperlink in Apache Superset

Rao Waqas Akram's photo
Rao Waqas Akram
·

2 min read

Table of contents

Background

In apache superset, if you want to show a URL in the "Visualization Table" then the required functionality could be to show it as

  • Clickable URL - when the user clicks on this URL it should navigate and open in a new tab.

  • Embedded URL - A embedded URL behind any (short) text.

As per Apache Superset version 2.0, this is not supported. GitHub Issue

So I'm writing this article to present you with another way around.

Current Representation

I have taken a simple example of the recipe which is showing a few attributes of the recipe along with the URL.(which isn't clickable yet)

Let's make it a Clickable URL

Step 1: Go to the "Edit Chart"

Step 2: Edit the dataset

Currently, the dataset has a query.

SELECT * FROM recipe;

Step 3: Update the query

This query has the "url" column which contains an HTML anchor link with the contents of the original "url" column as the link text and the value of "url" as the href attribute. The link opens in a new tab (target="_blank").

SELECT id , name, author,CONCAT('<a href="', url,'" target="_blank">',url,'</a>') AS url FROM recipe;

Step 4: Save the dataset

Step 5: Save the chart

Step 6: Verification

Yahoo!! Now you have a clickable URL.

Let's make it an Embedded URL

A lengthy URL can be an unpleasant experience for users of Superset. Instead, they prefer to have an embedded link to quickly access the desired information.

For this purpose, all the steps mentioned for Clickable URLs will be followed.

Just at Step 3: You need to write the following query.

SELECT id , name, author,CONCAT('<a href="', url,'" target="_blank">Check Details</a>') AS url FROM recipe;

Query Explanation

The "url" column is generated using the CONCAT function which combines the string '<a href="' with the value in the "url" column and the string '" target="_blank">Check Details</a>' to create an HTML link.

The generated HTML link will have the value of the "url" column as its destination and will display the text "Check Details" as the link text. The 'target="_blank"' attribute in the HTML link will make the linked URL open in a new browser tab or window.

Step 6: Verification

Yahoo!! Now you have an embedded URL.

Happy Learning!

WeMakeDevsApache SupersetMySQL