Solved: Re: Link list triggers "change" on page load

joelsz · ‎04-01-2024

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>

danspav · ‎04-02-2024

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

danspav · ‎04-01-2024

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>

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

joelsz · ‎04-02-2024

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.

danspav · ‎04-02-2024

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.

joelsz · ‎04-03-2024

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.

Link list triggers "change" on page load

Classic dashboard

drilldown

form

token

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation