topic Re: How to add input filters in dashboard header section in Dashboards & Visualizations

How to add input filters in dashboard header section

vinothn — Wed, 22 Apr 2020 05:39:40 GMT

Hi All,
Need your suggestion & guidance to attain the below. To get more space on the dashboard i want to move the input filters to the header section itself.(Attached in the pic).
Edited:
@to4kawa please find the attached pic, let me know if you still need clarification.

Re: How to add input filters in dashboard header section

to4kawa — Wed, 22 Apr 2020 09:26:22 GMT

like this?

Re: How to add input filters in dashboard header section

vinothn — Wed, 22 Apr 2020 11:25:45 GMT

since we can update only two pics i have edited the question @to4kawa please take a look into that & let me know if you need more clarification. (Basically i wanted to add the input filters in the dashboard header section itself)

Re: How to add input filters in dashboard header section

to4kawa — Wed, 22 Apr 2020 12:36:56 GMT

I see your pic.
I don't know input can be used in header field with SimpleXML.

<form hideEdit="true"> is disable edit button

Re: How to add input filters in dashboard header section

vinothn — Wed, 22 Apr 2020 15:24:28 GMT

@to4kawa i have tried this options already but this is not helping me to met my expectations.
Just need one information is there any way to include the input filters inside the html content.
Even by using additional Js also fine but please provide some kind of skeleton so i will work on this.

<panel>
  <html>
     <style>
        #filter_time,#filter_refresh{
         display: inline-flex !important;
       }
      #id_multiselect{
         display: inline-flex !important;

       }

       #filter_time label,#id_multiselect label,#filter_refresh label,#filter_refresh label{
         padding-right: 20px;
         padding-top: 5px;

       }
     </style>

     <input id="filter_time" type="time" token="tokDateRange" searchWhenChanged="true">
    <label>Date Range</label>
    <default>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
    </default>
  </input>
  <input id="filter_refresh" type="dropdown" token="field1">
    <label>Drop_Down</label>
    <choice value="value1">val</choice>
    <choice value="value2">val1</choice>
    <default>value1</default>
    <initialValue>value1</initialValue>
  </input>

 </html>


</panel>

i am trying to do something like this, but this is not the correct way i need your help to achieve this.
Let me know if you need any clarification on the question.

Re: How to add input filters in dashboard header section

Sfry1981 — Wed, 22 Apr 2020 16:00:33 GMT

@vinothn

Are you able to use the below just under the title field in the panel so you can use for any panel you need?

     <input type="text" token="field1">
        <label>field1</label>
      </input>

Re: How to add input filters in dashboard header section

vinothn — Thu, 23 Apr 2020 05:51:57 GMT

@Sfry1981 thanks for your response but it is not working.

Re: How to add input filters in dashboard header section

Sfry1981 — Thu, 23 Apr 2020 07:26:29 GMT

@vinothn If you add a text input on the dashboard and then drag that text input to the header of the panel you want does that work?

Re: How to add input filters in dashboard header section

jeffland — Thu, 23 Apr 2020 10:48:16 GMT

I would not really recommend this, but you could move the fieldset around with jquery and with some additional CSS, you're halfway there.

$('div.fieldset').appendTo('div.dashboard-header').css('float', 'right');
$('h1.dashboard-title').css('float', 'left');

You might want to hide input titles and adjust some padding, this is just to get you started.

And as I said, I would not exactly recommend this as it is hacky, probably not upgrade safe. And I'm not an UI/UX expert, so there's probably a better way to achieve what you intend.

Re: How to add input filters in dashboard header section

to4kawa — Thu, 23 Apr 2020 11:11:33 GMT

see https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML
SimpleXML can't display input in header.