How do I make it so links only display when clicki...

navd · ‎09-17-2018

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>

niketn · ‎09-17-2018

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!!!"

niketn · ‎09-17-2018

@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!!!"

pramit46 · ‎09-17-2018

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

pramit46 · ‎09-17-2018

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

mstjohn_splunk · ‎09-17-2018

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.

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

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!