Creating hyperlinked button dimensions

Looker Q&A Looker
,
1

Was looking for a way to improve UX for end users when creating dimensions that link to other URLs and explores.

A common LookML use case to enable further exploration is to create a dimension that links to another Looker report or explore. For example you may create a dimension that links to a history of all orders that user has ever created.

Typically we create a HTML parameter with liquid templating to generate a URL for a given user and their order history:

  dimension: history {
    sql: ${TABLE}.id ;;
    html: <a href="/explore/thelook/order_items?fields=order_items.detail*&f[users.id]={{ value }}">Order History</a>
      ;;
  }

However it’s not immediately obvious to the end user they can click on this dimension value. We can simply add a <button> HTML tag to render the link as a button, making the UX a bit more clear for our end users.

  dimension: history_button {
    sql: ${TABLE}.id ;;
    html: <a href="/explore/thelook/order_items?fields=order_items.detail*&f[users.id]={{ value }}"><button>Order History</button></a>
      ;;
  }

Here’s what the two fields look like side by side:

714dc311e5af73f71cd48289311707352895c030.png
714dc311e5af73f71cd48289311707352895c030.png2164×218 22.5 KB

Do you have any other UX tricks that better guide users towards all the exploring and drilling they can do in Looker? Would love to see what you’ve come up with.

13 Likes
2

Way slick, never crossed my mind!

1 Like
3

Hi, I have a dimension with the URL’s. I am trying to create a button for the values that will redirect to the respected page in the URL on clicking the button.

Can you please help me with this.

4

What are you stuck with in that process?

Thinking about it, if you have a dimension like

dimension: url {
type: string
sql: ${TABLE}.url ;;
}

you could create a dimension

dimension: button {
type:string
sql: ${url} ;; 
html: <a href="{{value}}"><button>URL Button</button></a> ;; }

That would reference the value of that field!

3 Likes
5

Thanks, IZZY for the response. I figured it out just a few mins ago.
Since its an external link.

After creating this dimension referencing url

dimension: url {
type: string
sql: ${TABLE}.url ;;
}

While creating another dimension for the link, I had to add "http:// in front of {{value}}.

dimension: button {
type:string
sql: ${url} ;;
html: LINK;;
}

2 Likes
6

You can also apply different styles to make it stand out:

image.png

Unfortunately no way of adding :hover effect

2 Likes
7

Hey @Dawid I’m curious how you were able to format the buttons?
I tried adding HTML styling (which I know next to nothing about) but could only format the space around the button (i.e. in the ‘cell’ of the table). See below - I was formatting the background to be white:

image.png
image.png664×336 10.7 KB

But I was trying to edit the background of the button itself. Any help is appreciated!

8

@Kyle_Webb

Can you post your LookML code for that field?

9

I had a few iterations of it and since removed the button altogether, as I figured out how to make the image itself hyperlink…but I think this how I got to the above (I changed the href to google just to keep things simple):

html: <p style="color: white; font-weight: bold; background-color: white; font-size:100%; text-align:left"><button><img src="https://findicons.com/files/icons/756/ginux/64/e_mail.png" height=15 width=20><a href="https://google.com"></button></p></a> ;;

2 Likes
10

Has anyone figured out a way to add (1) underline on hover (2) right click and open in new tab?

2 Likes
11

Hello,

Is it also possible to pass the Filter as a part of the html parameter to the next look ?

Can you suggest ?

12

add target=“new” before your href in your tag