Dashboards & Visualizations

Ho can I use CSS grid/flex to move these displays?

ViniciusMariano
Explorer

Hey guys I have a question about CSS in splunk, I want to move these displays like this:

ViniciusMariano_0-1717769852203.png

And I can't use dashboard studio because I need some special things that dahsboard studio doesn't have yet, like depends functionality, I'm trying with css grid but I couldn't find a way to do this yet

Labels (4)
0 Karma
1 Solution

tscroggins
Influencer

Hi @ViniciusMariano,

In Simple XML, you can use row and panel elements to group inputs and visualizations. To display objects side-by-side, place them in separate panel elements. To display objects stacked top-to-bottom, place them in the same panel element. Combine panel elements within row elements for mixed layouts.

<form version="1.1" theme="light">
  <label>Quality Management Storage Rework</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="dropdown" token="region_tok">
        <label>Region</label>
        <choice value="All">All</choice>
        <default>All</default>
        <initialValue>All</initialValue>
      </input>
      <input type="dropdown" token="info_tok">
        <label>Info</label>
        <choice value="General">General</choice>
        <default>General</default>
        <initialValue>General</initialValue>
      </input>
      <chart>
        <title>Chart</title>
        <search>
          <query>| makeresults count=10
| rename count as x
| eval y=random()%10
| table x y</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel>
      <table>
        <title>Table</title>
        <search>
          <query>| makeresults count=10
| eval x=random()%10
| table _time x</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

tscroggins_0-1717888157086.png

 

View solution in original post

tscroggins
Influencer

Hi @ViniciusMariano,

In Simple XML, you can use row and panel elements to group inputs and visualizations. To display objects side-by-side, place them in separate panel elements. To display objects stacked top-to-bottom, place them in the same panel element. Combine panel elements within row elements for mixed layouts.

<form version="1.1" theme="light">
  <label>Quality Management Storage Rework</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="dropdown" token="region_tok">
        <label>Region</label>
        <choice value="All">All</choice>
        <default>All</default>
        <initialValue>All</initialValue>
      </input>
      <input type="dropdown" token="info_tok">
        <label>Info</label>
        <choice value="General">General</choice>
        <default>General</default>
        <initialValue>General</initialValue>
      </input>
      <chart>
        <title>Chart</title>
        <search>
          <query>| makeresults count=10
| rename count as x
| eval y=random()%10
| table x y</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel>
      <table>
        <title>Table</title>
        <search>
          <query>| makeresults count=10
| eval x=random()%10
| table _time x</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

tscroggins_0-1717888157086.png

 

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