Dashboards & Visualizations
Highlighted

How can I create multiple panels being 1st and 2nd panel with submit button?

Path Finder

I am trying to achieve this using XML, HTML and ** JS.**

I am trying to build something like in the attached screenshot.

First I have started with dashboard creation for 1st and 2nd pane. And converted them into HTML using inbuilt function. Everything is perfect at this time. But, When I merge html code for both dashboards into one dashboard, I am not seeing text boxes and dropdowns. I am not sure about the mistake.

How can I achieve this with above preferred languages?

Thank you so much for the help.

PS: Existing code is done on django framework and we want to get rid of this.

0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Path Finder

PS: The page in the attachment is built with django framework

0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Legend

@sandeeprachuri, you can use <html> panel within Simple XML dashboard to add any html input as per your choice. You would need to extend the functionalities of this html inputs via JavaScript though.

Refer to following great blogs from Jason Conger( @jconger ) and Octoinsight ( @rjthibod 😞

https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html
https://blog.octoinsight.com/there-can-be-only-one-submit-button/

Refer to some of my previous answers to create a button and code in JavaScript:
https://answers.splunk.com/answers/581652/how-can-i-create-a-button-switcher.html
And one example to use HTML Date Picker: https://answers.splunk.com/answers/627432/jquery-datepicker-in-splunk.html

You can code any other HTML input on similar lines as per your need.




| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Path Finder

@niketnilay, Thank you so much for the quick response.

I have been following this answer https://answers.splunk.com/answers/581652/how-can-i-create-a-button-switcher.html from sometime.

Only thing I was looking for HTML text input and dropdown tags to fit there. But, I couldn't find them. I will go over Jason blog andtry if I can find those tags.

0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Legend

Following should create a html text input box:

 <input type="text" disabled="disabled" value="$someTextToken$"></input>

Refer to answer: https://answers.splunk.com/answers/623932/how-to-increase-the-textbox-size-when-you-want-to.html

Is there any reason why you do not want to use Splunk text and dropdown input?




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Legend

@sandeeprachuri , you can try the following Simple XML code. You can apply CSS Style to align the inputs/labels as per your needs. Then plug in the JavaScript for Apply and Search buttons. Since it uses Splunk Text input and Dropdown, hopefully, you would not need to code those using JavaScript 🙂

<form>
  <label>Dashboard with multiple input panels and Submit</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="text" token="txtTwo">
        <label>Text Two</label>
      </input>
      <input type="text" token="txtOne">
        <label>Text One</label>
      </input>
      <input type="dropdown" token="tokApp">
        <label>App</label>
      </input>
      <input type="dropdown" token="tokStatus">
        <label>Status</label>
      </input>
      <input type="text" token="tokCommment">
        <label>Comment</label>
      </input>
      <html>
        <button class="btn-primary">Apply</button>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="text" token="tokSearchOne">
        <label>Search One</label>
      </input>
      <input type="text" token="tokSearchTwo">
        <label>Search Two</label>
      </input>
      <input type="dropdown" token="tokAppFilter">
        <label>App</label>
      </input>
      <input type="time" token="field6">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <html>
        <button class="btn-primary">Search</button>
      </html>
    </panel>
  </row>
</form>



| eval message="Happy Splunking!!!"


Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Path Finder

@niketnilay, This is wonderful. I was trying the same way as you suggested.

However, input type="text" worked for me. But, this input type="dropdown" doesn't worked for me.

I have created dropdown as below:

<label>App</label>
 <input type="dropdown" token="appname" id="appnameid" searchWhenChanged="true"></input>

But, Your code is perfect.

Thank you so much.

0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Legend

You can use <select> for HTML Dropdown

    <select name="html_dropdown">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>

Glad you found the answer working. Do up vote the comments that helped 🙂




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Path Finder

@niketnilay, Definitely I will use this drop down method. I have made a note of it. Thank you for your help and learning a lot (specially coding) from your answers.

Highlighted

Re: How can I create multiple panels being 1st and 2nd panel with submit button?

Legend

Glad you found the details helpful. This is the sole purpose of this community. I also get to learn a lot from others. So hang around and contribute 🙂




| eval message="Happy Splunking!!!"


0 Karma