Use javascript in dashboard

[Assor]

Hi,
I am using HTML in a text tile and I want to add a link with specific parameters taken from the URL (these parameters are actually the current filters of the dashboard).

Any idea how can I do that? My first thought was JS, but I am not sure if I can use it in a text tile.

Thanks

[Eric_Lyons]

Hi @Assor, generally we cannot use liquid in text tiles, but we could use them in a single value visualization. We could leverage the framework for pulling filter values into HTML listed here. Would you be able to tell me a bit more about what the link looks like please? 

Thanks,

Eric

[ThibaultDC]

Hi,

I have a similar request. I want to add to my dashboard a responsive navigation menu with dropdown buttons in order to give access to numerous links. To do that I would need HTML, CSS and JavaScript. The first two seems to work in a title tile but not the third.

How can I setup scripts in my tile in order to make my menu responsive?

[abrarkhan777]

 By using JavaScript in your HTML text tile. Extract the parameters from the URL using JavaScript and then dynamically generate the link with those parameters included. Just make sure to properly handle any potential security risks associated with user input in the URL parameters.

[ThibaultDC]

Here is an example of some HTML/CSS/JavaScript I want to put in a Looker dashboard:

<script>
    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
</script>

<style>
.dropbtn {
padding: 16px;
border: none;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}

.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

If you put it in a html file you will see that it displays a basic dropdown button, however if you try to put it in a Looker tile you will notice that both the JS and the CSS code does not execute. How can I make it work?