Creating hyperlinked button dimensions

[Joshua_Moskovit]

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:

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.

[cutler]

Way slick, never crossed my mind!

[jyothisai]

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.

[izzymiller]

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!

[jyothisai]

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;;
}

[Dawid]

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

Unfortunately no way of adding :hover effect

[Kyle_Webb]

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:

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

[Dawid]

@Kyle_Webb

Can you post your LookML code for that field?

[Kyle_Webb]

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> ;;

[Noa1]

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

[uttpeshvyas]

Hello,

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

Can you suggest ?