Dashboards & Visualizations

Link list triggers "change" on page load

joelsz
Engager

Hi, I have the following Link List input to provide a shortcut to other dashboards, when any of them are selected it would open a new tab to the specified dashboard.

The issue is that when a link is selected it's being added as a parameter to the url, so the next time the page is refreshed it would trigger an input "change" and will immediately open a new tab to the link.

What would be the best way to trigger only when it was selected? I've tried adding <set> and <unset> the input token after the <link> tag so it should be removed from the url once the new tab was opened, but it had no effect.

<input id="linkToOtherDash" type="link" token="link_dash">
<label>View other Dashboard:</label>
<choice value="dash1">Dashboard 1 ↗</choice>
<choice value="dash2">Dashboard 2 ↗</choice>
<choice value="dash3">Dashboard 3 ↗</choice>
<change>
<condition value="dash1">
<link target="_blank">https://example.com/dash1</link>
<set token="link_dash">.</set>
</condition>
<condition value="dash2">
<link target="_blank">https://example.com/dash1</link>
<set token="link_dash">.</set>
</condition>
<condition value="dash3">
<link target="_blank">https://example.com/dash1</link>
<set token="link_dash">.</set>
</condition>
</change>
</input>

 

Labels (4)
0 Karma
1 Solution

danspav
SplunkTrust
SplunkTrust

Ok, here's a quick fix to stop any dashboards loading after a page refresh:

<condition value="dash_a">
    <link target="_blank">/app/search/dash_a</link>
    <set token="form.link_dash"></set>
    <set token="link_dash"></set>
</condition>

This will only create a new window with a dashboard if the token matches dash_a, and  do nothing if it's blank.

Once we load the dashboard, we reset the token (both form.token and token) to an empty string. That way if the page reloads, we do nothing.


We can also make the condition statement a bit smarter. If you set the choice values to be the name of the dashboard you want to load, we can do this:

Final Version

<form version="1.1" theme="light">
  <label>Dash_C</label>
  <fieldset submitButton="false">
    <input type="link" token="link_dash">
      <label>View other Dashboard:</label>
      <choice value="dash_a">Dashboard 1 ↗</choice>
      <choice value="dash_b">Dashboard 2 ↗</choice>
      <choice value="dash_c">Dashboard 3 ↗</choice>
      <change>
        <condition value="">
        </condition>
        <condition>
          <link target="_blank">/app/search/$link_dash$</link>
          <set token="form.link_dash"></set>
          <set token="link_dash"></set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row><panel depends="$CSS$"><html><style>
.splunk-linklist{width:fit-content!important;}
.splunk-linklist button{ min-width: 120px;}
.splunk-linklist button span{ -webkit-box-pack: left; justify-content: left;-webkit-box-align: left; align-items: left;}
.splunk-linklist button{background-color: #dddddd82;margin: 4px 2px 0px 0px; transition: 0.3s;}
.splunk-linklist button:hover {background-color:#007abd!important;color:white!important;}</style></html></panel>
  </row>
</form>

The condition block will do nothing if the link_dash token is blank, but will load the dashboard in $link_dash$ if it's not blank. It then sets the token to "" so it won't load the dashboard again on a refresh.

By using the <condition> as above,  it allows you to add as many dashboards as you want via the dropdown UI without needing to update the code.

 

 

View solution in original post

0 Karma

danspav
SplunkTrust
SplunkTrust

Hi @joelsz,

Using Splunk 9.1.0 I set up 3 dashboards: dash_a, dash_b, dash_c

When you click a button it loads the corresponding dashboard, and that's all. 

I've added some starter CSS to pretty up the buttons:

<form version="1.1" theme="light">
  <label>Dash_C</label>
  <fieldset submitButton="false">
    <input id="linkToOtherDash" type="link" token="link_dash">
      <label>View other Dashboard:</label>
      <choice value="dash_a">Dashboard 1 ↗</choice>
      <choice value="dash_b">Dashboard 2 ↗</choice>
      <choice value="dash_c">Dashboard 3 ↗</choice>
      <change>
        <condition value="dash_a">
          <link target="_blank">/app/search/dash_a</link>
        </condition>
        <condition value="dash_b">
          <link target="_blank">/app/search/dash_b</link>
        </condition>
        <condition value="dash_c">
          <link target="_blank">/app/search/dash_c</link>
        </condition>
      </change>
    </input>
  </fieldset>
  <row><panel depends="$CSS$"><html><style>
    .splunk-linklist{
    width:fit-content!important;    
}

.splunk-linklist button{
    min-width: 120px;
}

.splunk-linklist button span{
    -webkit-box-pack: left;
    justify-content: left;
    -webkit-box-align: left;
    align-items: left;
}

.splunk-linklist button{
  background-color: #dddddd82;
  margin: 4px 2px 0px 0px;
  transition: 0.3s;
}

.splunk-linklist button:hover {
  background-color: #007abd!important;
  color: white!important;
}
  </style></html></panel>
  </row>
</form>

danspav_1-1712010900398.png

Note that if you click a button, then go back to the original dashboard and click edit then cancel, it will load the second dashboard again. If you want to avoid that then update the links and remove target="_blank" .

0 Karma

joelsz
Engager

Thanks @danspav for your response. First of all, I didn't mention that I'm using Splunk Enterprise 9.0.6 if that makes a difference.

The provided XML code is similar to the one originally posted except it removes the <set> element. Although I tried it and when a button was clicked it is adding the following "form.link_dash" parameter to the main dashboards URL:

/app/search/dash_main?form.link_dash=dash_a

With this modified URL now in the URL bar, if the browser reload button is pressed it is opening a new tab to dash_a after loading and rendering the main dashboard, as if the button was clicked. It is like prefilling the button value from the URL parameter.

0 Karma

danspav
SplunkTrust
SplunkTrust

Ok, here's a quick fix to stop any dashboards loading after a page refresh:

<condition value="dash_a">
    <link target="_blank">/app/search/dash_a</link>
    <set token="form.link_dash"></set>
    <set token="link_dash"></set>
</condition>

This will only create a new window with a dashboard if the token matches dash_a, and  do nothing if it's blank.

Once we load the dashboard, we reset the token (both form.token and token) to an empty string. That way if the page reloads, we do nothing.


We can also make the condition statement a bit smarter. If you set the choice values to be the name of the dashboard you want to load, we can do this:

Final Version

<form version="1.1" theme="light">
  <label>Dash_C</label>
  <fieldset submitButton="false">
    <input type="link" token="link_dash">
      <label>View other Dashboard:</label>
      <choice value="dash_a">Dashboard 1 ↗</choice>
      <choice value="dash_b">Dashboard 2 ↗</choice>
      <choice value="dash_c">Dashboard 3 ↗</choice>
      <change>
        <condition value="">
        </condition>
        <condition>
          <link target="_blank">/app/search/$link_dash$</link>
          <set token="form.link_dash"></set>
          <set token="link_dash"></set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row><panel depends="$CSS$"><html><style>
.splunk-linklist{width:fit-content!important;}
.splunk-linklist button{ min-width: 120px;}
.splunk-linklist button span{ -webkit-box-pack: left; justify-content: left;-webkit-box-align: left; align-items: left;}
.splunk-linklist button{background-color: #dddddd82;margin: 4px 2px 0px 0px; transition: 0.3s;}
.splunk-linklist button:hover {background-color:#007abd!important;color:white!important;}</style></html></panel>
  </row>
</form>

The condition block will do nothing if the link_dash token is blank, but will load the dashboard in $link_dash$ if it's not blank. It then sets the token to "" so it won't load the dashboard again on a refresh.

By using the <condition> as above,  it allows you to add as many dashboards as you want via the dropdown UI without needing to update the code.

 

 

0 Karma

joelsz
Engager

Thanks @danspav, this worked, although I had to add <default> to an empty string so it doesn't trigger the second condition on the initial page load.

<default></default>

Thanks much.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

 (view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...