This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Accept
Reject
Preferences
Log in to ask a question
Log in to ask a question

New dashboards (beta) HTML options

Posted on 06-12-2020 11:36 AM
izzymiller
Staff
Reply posted on --/--/---- --:-- AM

The clever @brecht discovered some new HTML functionality available in the Dashboards (beta). I figured I’d share it with the broader community in hopes you find it useful and customize it to your liking!

It can be pretty snazzy:

image

If you’re interested in making your dashboards fancy like this, read on for examples. Remember that if someone goes back to the old dashboard version of the dashboard, it’s going to look pretty messy.

These are all text tiles:

image

<div style='background-color: #ffffdd; padding: 5px 10px; border: solid 1px #ededed; border-radius: 5px;'>
<h2 style='margin-bottom: 15px;'>What?</h2>
<p>Dashboards-next allows more HTML than the old dashboards! Time for some basic HTML navbars and other snazzy elements!
</p>
</div>

image

<div style="border: solid 1px #4285F4; border-radius: 5px; padding: 5px 10px; background: #eaf1fe; height: 200px; text-align: center; margin-bottom: 10px;">
	<div>
		<img style="height: 60px; margin-top: 30px;" src="https://looker.com/assets/img/images/logos/looker_black.svg"/>
		<h1 style="font-size: 28px;">Business Pulse</h1>
	</div>
<nav style="font-size: 18px; position: absolute; bottom: 0; text-align: center;">
  <a style="padding: 5px; line-height: 40px; font-weight: bold;" href="#home">
  	<svg style="height: 16px; fill: #4285F4;" class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"></path>
						</svg>
					Pulse</a>
  <a style="padding: 5px; line-height: 40px;" href="#news">
  	<svg style="height: 16px; fill: #4285F4;" class="svg-icon" viewBox="0 0 20 20">
							<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
						</svg>
					Demographics</a>
  <a style="padding: 5px; line-height: 40px;" href="#contact">
  <svg  style="height: 16px; fill: #4285F4;" class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.237,3.056H2.93c-0.694,0-1.263,0.568-1.263,1.263v8.837c0,0.694,0.568,1.263,1.263,1.263h4.629v0.879c-0.015,0.086-0.183,0.306-0.273,0.423c-0.223,0.293-0.455,0.592-0.293,0.92c0.07,0.139,0.226,0.303,0.577,0.303h4.819c0.208,0,0.696,0,0.862-0.379c0.162-0.37-0.124-0.682-0.374-0.955c-0.089-0.097-0.231-0.252-0.268-0.328v-0.862h4.629c0.694,0,1.263-0.568,1.263-1.263V4.319C18.5,3.625,17.932,3.056,17.237,3.056 M8.053,16.102C8.232,15.862,8.4,15.597,8.4,15.309v-0.89h3.366v0.89c0,0.303,0.211,0.562,0.419,0.793H8.053z M17.658,13.156c0,0.228-0.193,0.421-0.421,0.421H2.93c-0.228,0-0.421-0.193-0.421-0.421v-1.263h15.149V13.156z M17.658,11.052H2.509V4.319c0-0.228,0.193-0.421,0.421-0.421h14.308c0.228,0,0.421,0.193,0.421,0.421V11.052z"></path>
						</svg>
					Web Analytics</a>
</nav>
</div>

image

<div style="border: solid 1px #4285F4; border-radius: 5px; padding: 5px 10px; background: #eaf1fe; height: 60px">
<nav style="font-size: 18px;">
  <a style="padding: 5px; float: left; line-height: 40px; font-weight: bold;" href="#home">☰
 Home</a>
  <a style="padding: 5px; float: left; line-height: 40px;" href="#news">News</a>
  <a style="padding: 5px; float: left; line-height: 40px;" href="#contact">Contact</a>
  <a style="padding: 5px; float: left; line-height: 40px;" href="#about">About</a>
</nav>
</div>

image

<div style="border-radius: 5px; padding: 5px 10px; background: #412399; height: 60px; color: red;">
<nav style="font-size: 18px;">
  <img style="color: #efefef; padding: 5px 15px; float: left; height: 40px;" src="https://wwwstatic.lookercdn.com/logos/looker_all_white.svg"/>
  <a style="color: #efefef; padding: 5px 15px; float: left; line-height: 40px; font-weight: bold;" href="#home">☰
 Home</a>
  <a style="color: #efefef; padding: 5px 15px; float: left; line-height: 40px;" href="#news">News</a>
  <a style="color: #efefef; padding: 5px 15px; float: left; line-height: 40px;" href="#contact">Contact</a>
  <a style="color: #efefef; padding: 5px 15px; float: left; line-height: 40px;" href="#about">About</a>
</nav>
</div>

image

<div style="font-size: 18px; padding: 5px 10px 0 10px;">
	<a style='display: block; border-radius: 5px; padding: 5px 10px; margin-bottom: 10px; font-weight: bold; background-color: #eaf1fe; border: solid 1px #4285F4;' href="#">Home</a>
	<a style='display: block; border-radius: 5px; padding: 5px 10px; margin-bottom: 10px;' href="#">Business Pulse</a>
	<a style='display: block; border-radius: 5px; padding: 5px 10px; margin-bottom: 10px;' href="#">Demographics</a>
	<a style='display: block; border-radius: 5px; padding: 5px 10px; margin-bottom: 10px;' href="#">Web Analytics</a>
</div>

image


<nav style="font-size: 18px; padding: 5px 10px 0 10px; height: 60px">
  <a style="padding: 5px; border-top: solid 1px #4285F4; border-left: solid 1px #4285F4; border-right: solid 1px #4285F4; border-radius: 5px 5px 0 0; float: left; line-height: 40px; font-weight: bold;" href="#home">
Home</a>
  <a style="padding: 5px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#news">News</a>
  <a style="padding: 5px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#contact">Contact</a>
  <a style="padding: 5px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#about">About</a>
</nav>

image


<div style="border-bottom: solid 1px #4285F4;">
<nav style="font-size: 18px; padding: 5px 10px 0 10px; height: 60px">
  <a style="padding: 5px 15px; border-top: solid 1px #4285F4; border-left: solid 1px #4285F4; border-right: solid 1px #4285F4; border-radius: 5px 5px 0 0; float: left; line-height: 40px; font-weight: bold; background-color: #eaf1fe;" href="#home">
Home</a>
  <a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#news">News</a>
  <a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#contact">Contact</a>
  <a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="#about">About</a>
</nav>
</div>

image

<h1 style="margin-top:20px; padding: 5px; border-bottom: solid 1px #412399; height: 60px; color: #412399; text-align: center;">Icons</h1>

image

<div style='background-color: #fff; padding: 5px 10px; border: solid 1px #ededed; border-radius: 5px;'>
<h2 style='margin-bottom: 15px; font-weight: bold;'>Easy SVG Icons</h2>

<p>Get your SVG icons <a href='http://svgicons.sparkk.fr/' target="_blank">here</a>. Copy the HTML snippet with the SVG path and add a style attribute where you set the color and the size of the icon. For example:<code><svg style='fill: red; height: 64px;' class="svg-icon" ...</code>
</p>
<br>

<svg style='fill: #4285F4; height: 64px;' class="svg-icon" viewBox="0 0 20 20">
							<path d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
						</svg>

<svg style='fill: #EA4335; height: 64px;'  class="svg-icon" viewBox="0 0 20 20">
							<path d="M18.092,5.137l-3.977-1.466h-0.006c0.084,0.042-0.123-0.08-0.283,0H13.82L10,5.079L6.178,3.671H6.172c0.076,0.038-0.114-0.076-0.285,0H5.884L1.908,5.137c-0.151,0.062-0.25,0.207-0.25,0.369v10.451c0,0.691,0.879,0.244,0.545,0.369l3.829-1.406l3.821,1.406c0.186,0.062,0.385-0.029,0.294,0l3.822-1.406l3.83,1.406c0.26,0.1,0.543-0.08,0.543-0.369V5.506C18.342,5.344,18.242,5.199,18.092,5.137 M5.633,14.221l-3.181,1.15V5.776l3.181-1.15V14.221z M9.602,15.371l-3.173-1.15V4.626l3.173,1.15V15.371z M13.57,14.221l-3.173,1.15V5.776l3.173-1.15V14.221z M17.547,15.371l-3.182-1.15V4.626l3.182,1.15V15.371z"></path>
						</svg>

<svg style='fill: #FBBC04; height: 64px;'  class="svg-icon" viewBox="0 0 20 20">
							<path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
						</svg>

<svg style='fill: #34A852; height: 64px;' class="svg-icon" viewBox="0 0 20 20">
							<path d="M6.176,7.241V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.221,0-0.403,0.181-0.403,0.402v0.461C4.79,7.416,4.365,7.955,4.365,8.591c0,0.636,0.424,1.175,1.006,1.35v3.278c0,0.222,0.182,0.402,0.403,0.402c0.222,0,0.402-0.181,0.402-0.402V9.941c0.582-0.175,1.006-0.714,1.006-1.35C7.183,7.955,6.758,7.416,6.176,7.241 M5.774,9.195c-0.332,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C6.377,8.923,6.105,9.195,5.774,9.195 M10.402,10.058V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.222,0-0.402,0.181-0.402,0.402v3.278c-0.582,0.175-1.006,0.714-1.006,1.35c0,0.637,0.424,1.175,1.006,1.351v0.461c0,0.222,0.181,0.402,0.402,0.402c0.221,0,0.402-0.181,0.402-0.402v-0.461c0.582-0.176,1.006-0.714,1.006-1.351C11.408,10.772,10.984,10.233,10.402,10.058M10,12.013c-0.333,0-0.604-0.272-0.604-0.604S9.667,10.805,10,10.805c0.332,0,0.604,0.271,0.604,0.604S10.332,12.013,10,12.013M14.629,8.448V6.78c0-0.221-0.182-0.402-0.403-0.402c-0.221,0-0.402,0.181-0.402,0.402v1.668c-0.581,0.175-1.006,0.714-1.006,1.35c0,0.636,0.425,1.176,1.006,1.351v2.07c0,0.222,0.182,0.402,0.402,0.402c0.222,0,0.403-0.181,0.403-0.402v-2.07c0.581-0.175,1.006-0.715,1.006-1.351C15.635,9.163,15.21,8.624,14.629,8.448 M14.226,10.402c-0.331,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C14.83,10.13,14.558,10.402,14.226,10.402 M17.647,3.962H2.353c-0.221,0-0.402,0.181-0.402,0.402v11.27c0,0.222,0.181,0.402,0.402,0.402h15.295c0.222,0,0.402-0.181,0.402-0.402V4.365C18.05,4.144,17.869,3.962,17.647,3.962 M17.245,15.232H2.755V4.768h14.49V15.232z"></path>
						</svg>
</div>

image

<!-- verbose inline css award winner 2020 -->
<div style="text-align: center; display: inline-block;">
<a style="
	color: #4285F4;
    border: solid 1px #4285F4;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #EA4335;
    border: solid 1px #EA4335;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #FBBC04;
    border: solid 1px #FBBC04;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #34A852;
    border: solid 1px #34A852;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a></div>

image

<!-- verbose inline css award winner 2020 -->
<div style="margin: auto; ">
<a style="
	color: #fff;
    background-color: #4285F4;
    border-color: #4285F4;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #fff;
    background-color: #EA4335;
    border-color: #EA4335;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #fff;
    background-color: #FBBC04;
    border-color: #FBBC04;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>

<a style="
	color: #fff;
    background-color: #34A852;
    border-color: #34A852;
    float: left;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>
</div>

image

<div style="text-align: center; min-height: 60px; padding: 25px;">
<a style="
	color: #fff;
    background-color: #4285F4;
    border-color: #4285F4;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    margin: 5px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;"
    href="#">
    This is a button!
</a>
</div>

Enjoy! Have fun monkeying around with the options. If you build something nice, share it in the comments here!

21 22 25K
22 REPLIES 22

Posted on --/--/---- --:-- AM
Nicole_Johnson
New Member
Reply posted on --/--/---- --:-- AM

This is awesome! I’m curious if anyone has found a way to get the elements to float as a user scrolls through a dashboard.

0 Likes

Posted on --/--/---- --:-- AM
bpowis
Bronze 5
Bronze 5
Reply posted on --/--/---- --:-- AM

Love this - thanks for sharing!

High-five @brecht ✋

Posted on --/--/---- --:-- AM
cflicker
New Member
Reply posted on --/--/---- --:-- AM

Have you tried liquid variable hyperlinks with this yet? Previously, I could only get those to work with images hosted by our company and used as hyperlinked dimensions within the LookML. Then the dimensions must be called in a table, single value or single record to show on the dashboard.

0 Likes

Posted on --/--/---- --:-- AM
aiden2
New Member
Reply posted on --/--/---- --:-- AM

Hi there,

Is there any documentation available as to what HTML and CSS tags are/are not available in the new dashboards?

0 Likes

Posted on --/--/---- --:-- AM
izzymiller
Staff
Reply posted on --/--/---- --:-- AM

Yeah, Liquid only works in LookML, not on text tiles on dashboards. Your workaround is still the best way to get dynamic html stuff on a dashboard!

0 Likes

Posted on --/--/---- --:-- AM
izzymiller
Staff
Reply posted on --/--/---- --:-- AM

https://docs.looker.com/admin-options/security/html-sanitization is fairly comprehensive for the not allowed stuff. There may be some discrepancies there with the new dashboards though, I’ll flag internally for a docs review to check.

0 Likes

Posted on --/--/---- --:-- AM
rbuckingham
New Member
Reply posted on --/--/---- --:-- AM

Hey there @izzymiller,

Do you know if these options, specifically the svg icons, will work with the html param for dimensions/measures? Or is this only usable with text tiles?

Thanks!

Rikley

0 Likes

Posted on --/--/---- --:-- AM
Kehinde
New Member
Reply posted on --/--/---- --:-- AM

Great resource!

0 Likes

Posted on --/--/---- --:-- AM
n_davis
Silver 2
Silver 2
Reply posted on --/--/---- --:-- AM

This is great!

I was able to implement this concept in the Looker UI, but ran into an issue when embedding within an iframe. The problem is that when a user middle clicks their mouse it’ll open the links in a new tab which we don’t want - this directs them to the Looker UI instead of staying within the iframe. Any thoughts on how to prevent this from happening? Help! 

0 Likes

Posted on --/--/---- --:-- AM
eliott
Bronze 5
Bronze 5
Reply posted on --/--/---- --:-- AM

@n_davis sorry this might be a bit late but you just need to use target="_self" on your anchor tags (<a>)

0 Likes

Posted on --/--/---- --:-- AM
n_davis
Silver 2
Silver 2
Reply posted on --/--/---- --:-- AM

@eliott Thanks for the reply - having the self tag didn’t prevent the end user from middle clicking on their mouse and opening this in a new tab on the Looker UI.  Could be because I’m using a single value viz to configure this since the URLs vary by a user attribute and that isn’t allowed in a text tile.

0 Likes

Posted on --/--/---- --:-- AM
daniel112233445
Bronze 2
Bronze 2
Reply posted on --/--/---- --:-- AM

can we get mp4 videos autolooping on the dashboard?

0 Likes

Posted on --/--/---- --:-- AM
daniel112233445
Bronze 2
Bronze 2
Reply posted on --/--/---- --:-- AM

yes you can

0 Likes

Posted on --/--/---- --:-- AM
heber_brandao
Bronze 3
Bronze 3
Reply posted on --/--/---- --:-- AM

Is there any way that we can connect multiple dashboards using this approach, and still maintain the filter selection?

Posted on --/--/---- --:-- AM
PhuongTrannn
Bronze 2
Bronze 2
In response to heber_brandao
Reply posted on --/--/---- --:-- AM

I do think and face the same requirement related to this. Will this approach could keep all the in common filters for different dashboard via link?

0 Likes

Posted on --/--/---- --:-- AM
rafiuddin2292-1
New Member
Reply posted on --/--/---- --:-- AM

Is there a way out to refer dimension/measure in “href” of html parameter?

0 Likes

Posted on --/--/---- --:-- AM
daniel112233445
Bronze 2
Bronze 2
Reply posted on --/--/---- --:-- AM

why not just make an intuitive user interface? instead of making people faff around with html to… change the font colour of text!!

Posted on --/--/---- --:-- AM
Santiago_Deniz
New Member
Reply posted on --/--/---- --:-- AM

Is there any way that we can connect multiple dashboards using this approach, and still maintain the filter selection?

Dear heber, 

I still have the same doubt 

I hope we can solve it out soon 

Posted on --/--/---- --:-- AM
geowelsh
Bronze 1
Bronze 1
In response to Santiago_Deniz
Reply posted on --/--/---- --:-- AM

If you were able to solve for maintaining filter selection when moving from dashboard to dashboard, could you share an example?

0 Likes

Posted on --/--/---- --:-- AM
lambdamusic
Bronze 5
Bronze 5
Reply posted on --/--/---- --:-- AM

Is this method still viable, using the 'Text' tiles? 

0 Likes

Posted on --/--/---- --:-- AM
GavinW
Staff
In response to lambdamusic
Reply posted on --/--/---- --:-- AM

I think you need to use 'Markdown' tiles.

0 Likes

Posted on --/--/---- --:-- AM
szaballa
Bronze 1
Bronze 1
Reply posted on --/--/---- --:-- AM

In the definition of my dashboard I first have the definition of common filters.
Then in the definition of "elements" I first have a text element with one of the html definitions expressed in this thread, simulating a menu.
What I would like, if possible, is that, depending on the menu option chosen, the sets of scans corresponding to that option are displayed in the dashboard, but all within the same dashboard.
Is this possible? If someone managed it, can they give an example of what ML is like.
And if not, how do they use it?
Thank you!

0 Likes
Top Labels in this Space