Dashboards & Visualizations

How do I make it so links only display when clicking on the h1 tag?

navd
New Member

I have a dashboard with a panel which has a heading(h1 tag) and two links under it . Now, I want to display those two links only when I click on the h1 tag, which means by default links should not be shown. The sample code which I use is shown below:

<row>
        <panel>
          <title></title>
         <html>
           <h1>Click Here</h1>
              <a href="https/xyz?"><h3>link to dashboard 1</h3></a>
               <a href="https:events/abc? "><h3>link to dashboard 2</h3></a> 
             </html>
        </panel>
      </row>
0 Karma

niketn
Legend

Try the following run anywhere example in Simple XML (no JS required), which use Splunk link input to set the token for secondary links to be displayed. CSS style can be overridden using Simple XML CSS Extension which has not been added to keep the example simple!

<form>
  <label>Show Secondary Links on Click of Main Link</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="link" token="tokTitle" searchWhenChanged="true">
        <label></label>
        <choice value="panel-title">Panel Title (to be clicked)</choice>
        <change>
          <condition value="panel-title">
            <set token="tokShowSecondaryLink">true</set>
            <unset token="tokTitle"></unset>
          </condition>
          <condition>
            <unset token="tokTitle"></unset>
          </condition>
        </change>
      </input>
      <html>
        <div>tokShowSecondaryLink: $tokShowSecondaryLink$</div>
        <div>tokTitle: $tokTitle$</div>
      </html>
      <html depends="$tokShowSecondaryLink$">
        <div>
          <a href="https/xyz?"><h3>link to dashboard 1</h3></a>
          <a href="https:events/abc? "><h3>link to dashboard 2</h3></a>
        </div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@navd Clicking on h1 will show the secondary link, however, what will hide it again or rather what keeps it hidden?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pramit46
Contributor

Try this:

<dashboard  script="linktest.js">
<row>
    <html>
      <h1 id="link">Click Here</h1>
      <div id="testDiv"  style="display:none;"> <a href="http://www.google.com">go to google</a></div>
    </html>
  </row>
</dashboard>

linktest.js:

 require([
 'underscore',
 'jquery',
 'splunkjs/mvc',
'splunkjs/mvc/utils',
'splunkjs/mvc/tokenutils',
 'splunkjs/mvc/simplexml/ready!'], function(_, $, mvc, utils, TokenUtils){
        var tokens = mvc.Components.get('default');         
        $("#link").on("click", function (e){
            console.log("link clicked....");
            document.getElementById('testDiv').style.display = "block";
        });             
    });
0 Karma

pramit46
Contributor

make sure you bump the server after doing the change, otherwise the js will not be loaded.

0 Karma

mstjohn_splunk
Splunk Employee
Splunk Employee

Hi @navd,

Thanks for posting. Could you give us some more context for your query? What were you trying to do with this, etc.. You have a much better chance of getting your question answered if you provide more information about your issue. Plus, it will help guide future community users who are facing a similar problem.

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...