Dashboards & Visualizations

How do I place a Panel / Row at the top of My Splunk Dashboard? Need XML/HTML Help

jithinmathew
Explorer

Hi all,

I want to place a Panel / Row above the Fieldset tag. By default Fieldset always appears at the top of the page, is there anyway to change this ? I want a Panel right at the top of my dashboard before any search fields etc.

I have also created a reset dashboard button so that I wish to display AFTER the submit button. Is this possible?

Please view the attached image for reference. For example, I want that row that says welcome user AT THE TOP.

alt text

Tags (2)
0 Karma
1 Solution

niketn
Legend

@jithinmathew as stated in my comment earlier, you can move all inputs to a <panel> which can then be positioned as per your needs.

However, for Submit button you need to use
1) Either CSS override to position the same at position required
2) Use the blog from OctoInsight for multiple Submit Buttons shared or similar answers on Splunk Answers to create your own <html> button input and wire in JS based click handler to perform activity of Submit button using Splunk JS stack.

Please find below changes to your dashboard as per Option 1. Please try out and confirm!

alt text

Following is the updated Simple XML code. PS: I have performed indentation.

<form>
  <label>Inputs inside Panel</label>

  <search id="base_name">
    <query>
       <![CDATA[
     | rest /services/authentication/current-context splunk_server=local | eval firstname="" | eval lastname="" | rex field=realname "^(?<lastname>[^,]+),(?<firstname>.+)?$" | eval firstname=if(firstname=="",realname,firstname) | eval name= firstname . " " . lastname | fields name
     ]]>
    </query>
    <done>
      <set token="username">$result.name$</set>
    </done>
  </search>
  <fieldset submitButton="true" autoRun="false">
  </fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <html>
      <style>
        .reset_btn{
           border-radius: 5px;
           font-size: 12px;

           font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
           text-decoration: none;
           background-color: #5D9933;
           color: #FFFFFF;
           padding: 6px 8px 6px 8px;
           border-top: 1px solid #CCCCCC;
           border-right: 1px solid #333333;
           border-bottom: 1px solid #333333;
           border-left: 1px solid #CCCCCC;
        }
        #submit{
            position: relative;
            top: 310px;
            z-index: 1;
            left: 150px;
        }
      </style>
    </html>
  </row>
  <row>
     <panel>
       <title>Welcome, $username$!</title>
       <html>
       </html>
     </panel>
  </row>
  <row>
    <panel>
      <input type="time" token="field1">
        <label>TimePicker</label>
        <default>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="multisearch" searchWhenChanged="false">
        <label>Number of Searches</label>
        <choice value="1">1</choice>
        <choice value="2">2</choice>
        <change>
          <condition value="1">
            <set token="hideSearch2">2</set>
          </condition>
          <condition value="2">
            <unset token="hideSearch2"></unset>
          </condition>
        </change>
        <default>1</default>
        <initialValue>1</initialValue>
      </input>
      <input type="radio" token="radioSearchFilter1" searchWhenChanged="false">
        <label>Search Method 1</label>
        <choice value="">Simple Search</choice>
        <choice value="foo=">foo</choice>
        <choice value="bar=">bar</choice>
        <default></default>
      </input>
      <input type="text" token="searchString1" searchWhenChanged="false">
        <label>Search 1</label>
        <default>*</default>
        <prefix>$radioSearchFilter1$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <input type="radio" token="radioSearchFilter2" searchWhenChanged="false" rejects="$hideSearch2$">
        <label>Search Method 2</label>
        <choice value="">Simple Search</choice>
        <choice value="Foo=">Foo</choice>
        <choice value="Bar=">Bar</choice>
        <default></default>
      </input>
      <input type="text" token="searchString2" searchWhenChanged="true" rejects="$hideSearch2$">
        <label>Search 2</label>
        <default>*</default>
        <prefix>$radioSearchFilter2$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <html>
        <div>
          <a href="YourLink.com" class="reset_btn">Reset Dashboard</a>
        </div>        
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <title>Raw Events</title>
        <search>
          <query>index="foo"
 | convert ctime(_time) AS TimeStamp 
 | search $searchString1$ $searchString2$ 
 | table TimeStamp 
 | sort _time desc
          </query>
        </search>
      </event>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

lucasfbeinjamin
Path Finder

Hi @jithinmathew,

I made some changes to your xml, I believe that's what you wanted.
I have already seen that someone answered above but information is never too much right.
If possible test the code and give me a feedback.
If there is any question about the code please send me a message, I am at your disposal.

GoSplunkers

<form>
  <search id="base_name">
    <query>
       <![CDATA[
     | rest /services/authentication/current-context splunk_server=local | eval firstname="" | eval lastname="" | rex field=realname "^(?<lastname>[^,]+),(?<firstname>.+)?$" | eval firstname=if(firstname=="",realname,firstname) | eval name= firstname . " " . lastname | fields name
     ]]>
     </query>
    <done>
      <set token="username">$result.name$</set>
    </done>
  </search>
  <label></label>
  <fieldset autoRun="true"></fieldset>
  <row>
    <panel>
      <title>Welcome, $username$!</title>
      <input type="time" token="field1">
        <label>TimePicker</label>
        <default>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="multisearch" searchWhenChanged="false">
        <label>Number of Searches</label>
        <choice value="1">1</choice>
        <choice value="2">2</choice>
        <change>
          <condition value="1">
            <set token="hideSearch2">2</set>
          </condition>
          <condition value="2">
            <unset token="hideSearch2"></unset>
          </condition>
        </change>
        <default>1</default>
        <initialValue>1</initialValue>
      </input>
      <input type="text" token="searchString1" searchWhenChanged="false">
        <label>Search 1</label>
        <default>*</default>
        <prefix>$radioSearchFilter1$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <input type="radio" token="radioSearchFilter1" searchWhenChanged="false">
        <label>Search Method 1</label>
        <choice value="">Simple Search</choice>
        <choice value="foo=">foo</choice>
        <choice value="bar=">bar</choice>
        <default></default>
      </input>
      <html>
              </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="radio" token="radioSearchFilter2" searchWhenChanged="false" rejects="$hideSearch2$">
        <label>Search Method 2</label>
        <choice value="">Simple Search</choice>
        <choice value="Foo=">Foo</choice>
        <choice value="Bar=">Bar</choice>
        <default></default>
      </input>
      <input type="text" token="searchString2" searchWhenChanged="true" rejects="$hideSearch2$">
        <label>Search 2</label>
        <default>*</default>
        <prefix>$radioSearchFilter2$"*</prefix>
        <suffix>*"</suffix>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <title>Raw Events</title>
        <search>
          <query>index="foo"
        | convert ctime(_time) AS TimeStamp 
 | search $searchString1$ $searchString2$ 
 | table TimeStamp 
 | sort _time desc
 </query>
        </search>
      </event>
    </panel>
  </row>
  <row>
    <panel>
      <html>
       <div>
         <a class="submit_btn">Submit</a>
         <a href="YourLink.com" class="reset_btn">Reset Dashboard</a>
        <style>

           .submit_btn{

               border-radius: 6px;
               font-size: 12px;

               font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
               text-decoration: none;
               background-color: #5D9933;
               color: #FFFFFF;
               padding: 6px 8px 6px 8px;
               border-top: 1px solid #CCCCCC;
               border-right: 1px solid #333333;
               border-bottom: 1px solid #333333;
               border-left: 1px solid #CCCCCC;
             }

             .reset_btn{

               border-radius: 6px;
               font-size: 12px;

               font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
               text-decoration: none;
               background-color: #5D9933;
               color: #FFFFFF;
               padding: 6px 8px 6px 8px;
               border-top: 1px solid #CCCCCC;
               border-right: 1px solid #333333;
               border-bottom: 1px solid #333333;
               border-left: 1px solid #CCCCCC;
             }
          </style>
        </div>
       </html>
    </panel>
  </row>
</form>

niketn
Legend

@jithinmathew as stated in my comment earlier, you can move all inputs to a <panel> which can then be positioned as per your needs.

However, for Submit button you need to use
1) Either CSS override to position the same at position required
2) Use the blog from OctoInsight for multiple Submit Buttons shared or similar answers on Splunk Answers to create your own <html> button input and wire in JS based click handler to perform activity of Submit button using Splunk JS stack.

Please find below changes to your dashboard as per Option 1. Please try out and confirm!

alt text

Following is the updated Simple XML code. PS: I have performed indentation.

<form>
  <label>Inputs inside Panel</label>

  <search id="base_name">
    <query>
       <![CDATA[
     | rest /services/authentication/current-context splunk_server=local | eval firstname="" | eval lastname="" | rex field=realname "^(?<lastname>[^,]+),(?<firstname>.+)?$" | eval firstname=if(firstname=="",realname,firstname) | eval name= firstname . " " . lastname | fields name
     ]]>
    </query>
    <done>
      <set token="username">$result.name$</set>
    </done>
  </search>
  <fieldset submitButton="true" autoRun="false">
  </fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <html>
      <style>
        .reset_btn{
           border-radius: 5px;
           font-size: 12px;

           font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
           text-decoration: none;
           background-color: #5D9933;
           color: #FFFFFF;
           padding: 6px 8px 6px 8px;
           border-top: 1px solid #CCCCCC;
           border-right: 1px solid #333333;
           border-bottom: 1px solid #333333;
           border-left: 1px solid #CCCCCC;
        }
        #submit{
            position: relative;
            top: 310px;
            z-index: 1;
            left: 150px;
        }
      </style>
    </html>
  </row>
  <row>
     <panel>
       <title>Welcome, $username$!</title>
       <html>
       </html>
     </panel>
  </row>
  <row>
    <panel>
      <input type="time" token="field1">
        <label>TimePicker</label>
        <default>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="multisearch" searchWhenChanged="false">
        <label>Number of Searches</label>
        <choice value="1">1</choice>
        <choice value="2">2</choice>
        <change>
          <condition value="1">
            <set token="hideSearch2">2</set>
          </condition>
          <condition value="2">
            <unset token="hideSearch2"></unset>
          </condition>
        </change>
        <default>1</default>
        <initialValue>1</initialValue>
      </input>
      <input type="radio" token="radioSearchFilter1" searchWhenChanged="false">
        <label>Search Method 1</label>
        <choice value="">Simple Search</choice>
        <choice value="foo=">foo</choice>
        <choice value="bar=">bar</choice>
        <default></default>
      </input>
      <input type="text" token="searchString1" searchWhenChanged="false">
        <label>Search 1</label>
        <default>*</default>
        <prefix>$radioSearchFilter1$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <input type="radio" token="radioSearchFilter2" searchWhenChanged="false" rejects="$hideSearch2$">
        <label>Search Method 2</label>
        <choice value="">Simple Search</choice>
        <choice value="Foo=">Foo</choice>
        <choice value="Bar=">Bar</choice>
        <default></default>
      </input>
      <input type="text" token="searchString2" searchWhenChanged="true" rejects="$hideSearch2$">
        <label>Search 2</label>
        <default>*</default>
        <prefix>$radioSearchFilter2$"*</prefix>
        <suffix>*"</suffix>
      </input>
      <html>
        <div>
          <a href="YourLink.com" class="reset_btn">Reset Dashboard</a>
        </div>        
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <title>Raw Events</title>
        <search>
          <query>index="foo"
 | convert ctime(_time) AS TimeStamp 
 | search $searchString1$ $searchString2$ 
 | table TimeStamp 
 | sort _time desc
          </query>
        </search>
      </event>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jithinmathew
Explorer

@niketnilay

Hey!

This works great!! I had the idea of creating panels but I didn't know if the submit button would still work in that case. Didn't know how to re position it either. Only problem that I currently have with the code provided is that if I re-size the page the submit button position flys around.

I'm still very new to Splunk / XML so this was very helpful. Thank you so much!

0 Karma

niketn
Legend

Then

1) Either your Submit Button should be above all other inputs or towards bottom right

i.e.

#submit {
    position: relative;
    top: 310px;
    z-index: 1;
    float: right;
}

Or

#submit {
    position: relative;
    top: 170px;
    z-index: 1;
    float: right;
}

2) Or else instead of using Splunk's default Submit button, you create your own Submit Button and perform similar activity as Submit Button using Splunk Simple XML JS Extension and Splunk JS Stack. You might already have JS in place for Reset Dashboard button that you have.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jithinmathew
Explorer

I've made it float to right for now. Suppose I can't do much else unless of course I went through some Java Script and made my own submit button. Thank you for your help. Appreciate it.

niketn
Legend

@jithinmathew except for default Submit Button all other built in inputs in Splunk can be moved inside a panel. This means you can have panel with input moved to a different row. <html> <input type="button"> can be added to Splunk using <html> panel and then JavaScript extension can be used to code Click handler for the button.

Refer to the following blog: https://blog.octoinsight.com/there-can-be-only-one-submit-button/

What is the content of First Panel is it Static or Dynamic content based on Splunk search?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

lucasfbeinjamin
Path Finder

Hi @jithinmathew can you share your xml ? I think i can help you.
The 2 things are possible to achieve, but i need to check your xml structure to try to help you.

Cya.

0 Karma

jithinmathew
Explorer

Hey @lucasfbeinjamin ,

here is the XML.

<form>

  <search id="base_name">
    <query>
      <![CDATA[
    | rest /services/authentication/current-context splunk_server=local | eval firstname="" | eval lastname="" | rex field=realname "^(?<lastname>[^,]+),(?<firstname>.+)?$" | eval firstname=if(firstname=="",realname,firstname) | eval name= firstname . " " . lastname | fields name
    ]]>
    </query>
    <done>
      <set token="username">$result.name$</set>
    </done>
  </search>


  <label>Experiment</label>
  <fieldset submitButton="true" autoRun="false">

 <input type="time" token="field1">
   <label>TimePicker</label>
   <default>
     <earliest>-60m@m</earliest>
     <latest>now</latest>
   </default>
 </input>
 <input type="dropdown" token="multisearch" searchWhenChanged="false">
   <label>Number of Searches</label>
   <choice value="1">1</choice>
   <choice value="2">2</choice>
   <change>
     <condition value="1">
       <set token="hideSearch2">2</set>
     </condition>
     <condition value="2">
       <unset token="hideSearch2"></unset>
     </condition>
   </change>
   <default>1</default>
   <initialValue>1</initialValue>
 </input>
 <input type="radio" token="radioSearchFilter1" searchWhenChanged="false">
   <label>Search Method 1</label>
   <choice value="">Simple Search</choice>
   <choice value="foo=">foo</choice>
   <choice value="bar=">bar</choice>
   <default></default>
 </input>
 <input type="text" token="searchString1" searchWhenChanged="false">
   <label>Search 1</label>
   <default>*</default>
   <prefix>$radioSearchFilter1$"*</prefix>
   <suffix>*"</suffix>
 </input>
 <input type="radio" token="radioSearchFilter2" searchWhenChanged="false" rejects="$hideSearch2$">
   <label>Search Method 2</label>
   <choice value="">Simple Search</choice>
   <choice value="Foo=">Foo</choice>
   <choice value="Bar=">Bar</choice>
   <default></default>
 </input>
 <input type="text" token="searchString2" searchWhenChanged="true" rejects="$hideSearch2$">
   <label>Search 2</label>
   <default>*</default>
   <prefix>$radioSearchFilter2$"*</prefix>
   <suffix>*"</suffix>
 </input>

           <html>
     <div>
        <a href="YourLink.com" class="reset_btn">Reset Dashboard</a>
       <style>

          .reset_btn{

              border-radius: 5px;
              font-size: 12px;

              font-family:"Roboto","Droid","Helvetica Neue",Helvetica,Arial,sans-serif;
              text-decoration: none;
              background-color: #5D9933;
              color: #FFFFFF;
              padding: 6px 8px 6px 8px;
              border-top: 1px solid #CCCCCC;
              border-right: 1px solid #333333;
              border-bottom: 1px solid #333333;
              border-left: 1px solid #CCCCCC;
            }

      </style>
     </div>
   </html>
    </fieldset>
      <row>
    <panel>
      <title>Welcome, $username$!</title>

      <html>
             </html>
    </panel>
  </row>
  <row>
 <panel>
   <event>
     <title>Raw Events</title>
     <search>
       <query>index="foo"
       | convert ctime(_time) AS TimeStamp 
| search $searchString1$ $searchString2$ 
| table TimeStamp 
| sort _time desc
</query>
</search>
</event>
       </panel>
       </row>
       </form>
0 Karma
Get Updates on the Splunk Community!

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud  In today’s fast-paced digital ...

Observability protocols to know about

Observability protocols define the specifications or formats for collecting, encoding, transporting, and ...

Take Your Breath Away with Splunk Risk-Based Alerting (RBA)

WATCH NOW!The Splunk Guide to Risk-Based Alerting is here to empower your SOC like never before. Join Haylee ...