Dashboards & Visualizations

Inconsistency in displaying Collapse/Expand buttons in dashboard

mythili
Explorer

Hi Team,

We are currently using Classic XML and have made the panels Collapsible/Expandable using HTML/CSS with suggestion from below thread:
https://community.splunk.com/t5/Dashboards-Visualizations/How-to-add-feature-expand-or-collapse-pane...

However, sometimes during first dashboard load, both the "+" and "-" sign are visible. This happens occasionally, so I am not able to find the cause for this. Do you have any suggestions or ideas to fix this?

Thank you!

Labels (4)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

Try using a single show token

  <init>
    <unset token="showCollapseLink5"/>
  </init>

  <row depends="$alwaysHideCSSStyleOverride$">
    <panel>
      <html>
        <style>
          div[id^="linkCollapse"],
          div[id^="linkExpand"]{
            width: 32px !important;
            float: right;
          }
          div[id^="linkCollapse"] button,
          div[id^="linkExpand"] button{
            flex-grow: 0;
            border-radius: 50%;
            border-width: thick;
            border-color: lightgrey;
            border-style: inset;
            width: 32px;
            padding: 0px;
          }
          div[id^="linkCollapse"] label,
          div[id^="linkExpand"] label{
            display:none;
          }
          div[id^="panel"].fieldset{
            padding: 0px;
          }
        </style>
      </html>
    </panel>
  </row>

  <row>
    <panel>
      <title>Chart title</title>
      <input id="linkCollapse5" type="link" token="tokLinkCollapse5" searchWhenChanged="true" depends="$showCollapseLink5$">
        <label></label>
        <choice value="collapse">-</choice>
        <change>
          <condition value="collapse">
            <unset token="showCollapseLink5"></unset>
            <unset token="form.tokLinkCollapse5"></unset>
          </condition>
        </change>
      </input>
      <input id="linkExpand5" type="link" token="tokLinkExpand5" searchWhenChanged="true" rejects="$showCollapseLink5$">
        <label></label>
        <choice value="expand">+</choice>
        <change>
          <condition value="expand">
            <set token="showCollapseLink5">true</set>
            <unset token="form.tokLinkExpand5"></unset>
          </condition>
        </change>
      </input>
      <table depends="$showCollapseLink5$">
        <search>
          <query> My query </query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

In order to be able to debug your code, it might be useful to see your actual code, or at least a cut-down version of your code which demonstrates the problem. Also, does it occur with large dashboards, or only small ones? Does it occur with fresh browser instances or old? Does it occur with different browsers or just one? Which browser(s) does it occur with? Any other information like this might give a clue as to what it happening.

0 Karma

mythili
Explorer

Hi @ITWhisperer ,

Please find below the cut down version of the code:
 

<init>
<set token="showExpandLink5">true</set>
</init>

<row depends="$alwaysHideCSSStyleOverride$">
<panel>
<html>
<style>
div[id^="linkCollapse"],
div[id^="linkExpand"]{
width: 32px !important;
float: right;
}
div[id^="linkCollapse"] button,
div[id^="linkExpand"] button{
flex-grow: 0;
border-radius: 50%;
border-width: thick;
border-color: lightgrey;
border-style: inset;
width: 32px;
padding: 0px;
}
div[id^="linkCollapse"] label,
div[id^="linkExpand"] label{
display:none;
}
div[id^="panel"].fieldset{
padding: 0px;
}
</style>
</html>
</panel>
</row>

<row>
<panel>
<title>Chart title</title>
<input id="linkCollapse5" type="link" token="tokLinkCollapse5" searchWhenChanged="true" depends="$showCollapseLink5$">
<label></label>
<choice value="collapse">-</choice>
<change>
<condition value="collapse">
<unset token="showCollapseLink5"></unset>
<set token="showExpandLink5">true</set>
<unset token="form.tokLinkCollapse5"></unset>
</condition>
</change>
</input>
<input id="linkExpand5" type="link" token="tokLinkExpand5" searchWhenChanged="true" depends="$showExpandLink5$">
<label></label>
<choice value="expand">+</choice>
<change>
<condition value="expand">
<set token="showCollapseLink5">true</set>
<unset token="showExpandLink5"></unset>
<unset token="form.tokLinkExpand5"></unset>
</condition>
</change>
</input>
<table rejects="$showExpandLink5$">
<search>
<query> My query </query>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>


It occurs in both larger and small dashboards but not often. It occurs mostly for fresh browser load. It occurs with different browsers, I tried with Chrome and Edge.

Do you have any suggestions on this?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try using a single show token

  <init>
    <unset token="showCollapseLink5"/>
  </init>

  <row depends="$alwaysHideCSSStyleOverride$">
    <panel>
      <html>
        <style>
          div[id^="linkCollapse"],
          div[id^="linkExpand"]{
            width: 32px !important;
            float: right;
          }
          div[id^="linkCollapse"] button,
          div[id^="linkExpand"] button{
            flex-grow: 0;
            border-radius: 50%;
            border-width: thick;
            border-color: lightgrey;
            border-style: inset;
            width: 32px;
            padding: 0px;
          }
          div[id^="linkCollapse"] label,
          div[id^="linkExpand"] label{
            display:none;
          }
          div[id^="panel"].fieldset{
            padding: 0px;
          }
        </style>
      </html>
    </panel>
  </row>

  <row>
    <panel>
      <title>Chart title</title>
      <input id="linkCollapse5" type="link" token="tokLinkCollapse5" searchWhenChanged="true" depends="$showCollapseLink5$">
        <label></label>
        <choice value="collapse">-</choice>
        <change>
          <condition value="collapse">
            <unset token="showCollapseLink5"></unset>
            <unset token="form.tokLinkCollapse5"></unset>
          </condition>
        </change>
      </input>
      <input id="linkExpand5" type="link" token="tokLinkExpand5" searchWhenChanged="true" rejects="$showCollapseLink5$">
        <label></label>
        <choice value="expand">+</choice>
        <change>
          <condition value="expand">
            <set token="showCollapseLink5">true</set>
            <unset token="form.tokLinkExpand5"></unset>
          </condition>
        </change>
      </input>
      <table depends="$showCollapseLink5$">
        <search>
          <query> My query </query>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
0 Karma

mythili
Explorer

Hi @ITWhisperer ,

Thank you for the suggestions. This seems to work.

0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...