Dashboards & Visualizations

Reveal dependent panel changes width set by Javascript

bowesmana
Champion

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

niketnilay
Legend

@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

niketnilay
Legend

@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
Champion

Thanks @niketnilay 

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
Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!