Dashboards & Visualizations

Reveal dependent panel changes width set by Javascript

bowesmana
SplunkTrust
SplunkTrust

I have a dashboard row with two panels, where the width of the panels is set in javascript to 20% and 80% using this script. 

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    // Grab the DOM for the score row
    var scoreRow = $('#score_row');
    // Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
    var panelCells = $(scoreRow).children('.dashboard-cell');
    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '80%');
});

This works nicely for the dashboard configured with

<row id="score_row">
  <panel>...<panel>
  <panel>...<panel>
</row>

 however, as soon as I add depends="$var$" to the <row>, when var is set and the row displayed, the two panel widths are set to 50%.

If I inspect the page before the token is set, this is the raw html

bowesmana_1-1602044571521.png

but as soon as var is set, the html changes to 

bowesmana_2-1602044676175.png

Note score_row is hidden class in the former, but as expected is not hidden after, but the widths are now 50%.

Any idea how to control this redraw, so the JS effects the displayed size as intended?

 

Labels (2)
Tags (3)
0 Karma
1 Solution

@bowesmana based on above JS code provided, I dont understand why you would need JS to apply width. You can use CSS nth-child(1) and nth-child(2) to get the same effect.

If you really want JS approach (which I think would be an overkill for your CSS use case), you would need to apply CSS override for token change event handler depending on which the row is displayed or hidden.

Screen Shot 2020-10-11 at 9.57.15 PM.png

<form>
  <label>Dynamic Row width Adjustment</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="chkHideThis" searchWhenChanged="true">
      <label></label>
      <choice value="hidethis">Hide This?</choice>
      <change>
        <condition value="hidethis">
          <set token="hideThis">true</set>
        </condition>
        <condition>
          <unset token="hideThis"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row depends="$alwaysHiddenCSS$">
    <panel>
      <html>
        <style>
          #score_row .dashboard-cell:nth-child(1){
            width:20% !important;
          }
          #score_row .dashboard-cell:nth-child(2){
            width:80% !important;
          } 
        </style>
      </html>
    </panel>
  </row>
  <row depends="$hideThis$" id="score_row">
    <panel>
      <title>1</title>
    </panel>
    <panel>
      <title>2</title>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

@bowesmana based on above JS code provided, I dont understand why you would need JS to apply width. You can use CSS nth-child(1) and nth-child(2) to get the same effect.

If you really want JS approach (which I think would be an overkill for your CSS use case), you would need to apply CSS override for token change event handler depending on which the row is displayed or hidden.

Screen Shot 2020-10-11 at 9.57.15 PM.png

<form>
  <label>Dynamic Row width Adjustment</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="chkHideThis" searchWhenChanged="true">
      <label></label>
      <choice value="hidethis">Hide This?</choice>
      <change>
        <condition value="hidethis">
          <set token="hideThis">true</set>
        </condition>
        <condition>
          <unset token="hideThis"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row depends="$alwaysHiddenCSS$">
    <panel>
      <html>
        <style>
          #score_row .dashboard-cell:nth-child(1){
            width:20% !important;
          }
          #score_row .dashboard-cell:nth-child(2){
            width:80% !important;
          } 
        </style>
      </html>
    </panel>
  </row>
  <row depends="$hideThis$" id="score_row">
    <panel>
      <title>1</title>
    </panel>
    <panel>
      <title>2</title>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

bowesmana
SplunkTrust
SplunkTrust

Thanks @niketn-deceased 

There are two Splunk dashboard examples, one showing how to define custom panel widths, which uses the JS example (Layout Customization: Panel Width) and the other showing how to define custom _column_ widths, using the CSS similar to yours. (Table With Custom Column Width)

I just followed the first and didn't realise you could apply the CSS to the panels too.

So, thanks heaps for that. Makes it much simpler.

0 Karma
Get Updates on the Splunk Community!

Introducing Ingest Actions: Filter, Mask, Route, Repeat

WATCH NOW Ingest Actions (IA) is the best new way to easily filter, mask and route your data in Splunk® ...

Splunk Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...