Dashboards & Visualizations

How to display a message after clicking the "Submit" button on the dashboard based on radio button selection?

kulsplunk
Explorer

Hi there,

I want to display a message after clicking the "Submit" button on the dashboard based on the radio button selection. So, if I select the "Panel-1" and click on Submit button, it should display a message "Panel-1 selected".

Thanks a lot for your help in advance!

My sample code:

Choose a panel

<input type="radio" token="panel">
  <label>Panel-List</label>
  <choice value="1">Panel 1</choice>
  <choice value="2">Panel 2</choice>
  <change>
    <condition value="1">
      <set token="pan1"></set>
      <unset token="pan2"></unset>
    </condition>
    <condition value="2">
      <set token="pan2"></set>
      <unset token="pan1"></unset>
    </condition>
  </change>
</input>
0 Karma
1 Solution

niketnilay
Legend

@kulsplunk, Could you please add the details on why you don't need JavaScript dependency? Would you be able to HTML Dashboard, that way you can have JavaScript in front-end?

If you can use Splunk's Submit button input (provided you move the logic from input <change> to an independent <search>), you can try an approach like the following run anywhere example.

alt text

Following is the simple XML code for the run anywhere example which uses Splunk's _internal index:

<form>
  <label>Submit Button Testing</label>
  <!-- Independent search to set the token for Panel on Click of Submit button.
  1) Input Change Event Handler has not been used as token will then be available on change and not after submit button click.
  2) In order ro access token value after the click of Submit button i.e. from Submitted Token Model independent search has been used.
  -->
  <search>
    <query>| makeresults
| eval Panel=$tokPanel|s$
    </query>
    <done>
      <condition match="$result.Panel$==&quot;1&quot;">
        <set token="tokPanelSelected">1</set>
        <set token="pan1"></set>
        <unset token="pan2"></unset>
      </condition>
      <condition match="$result.Panel$==&quot;2&quot;">
        <unset token="pan1"></unset>
        <set token="pan2"></set>
        <set token="tokPanelSelected">2</set>
      </condition>
      <condition>
        <unset token="tokPanelSelected"></unset>
      </condition>
    </done>
  </search>
  <fieldset submitButton="true">
    <input type="dropdown" token="tokPanel" searchWhenChanged="false">
      <label></label>
      <choice value="1">One</choice>
      <choice value="2">Two</choice>
      <default>1</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Msg Panel Selected: $tokPanelSelected$</title>
      <html/>
    </panel>
  </row>
  <row>
    <panel depends="$pan1$">
      <title>Panel 1</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| top 5 component showperc=f</query>
          <earliest>-1d@d</earliest>
          <latest>-0d@d</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel depends="$pan2$">
      <title>Panel 2</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| timechart count by component limit=5 useother=f</query>
          <earliest>-1d@d</earliest>
          <latest>-0d@d</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

nick405060
Motivator

ugh... it would be nice if there was a way to do this solely on submit click without js

0 Karma

niketnilay
Legend

@kulsplunk, Could you please add the details on why you don't need JavaScript dependency? Would you be able to HTML Dashboard, that way you can have JavaScript in front-end?

If you can use Splunk's Submit button input (provided you move the logic from input <change> to an independent <search>), you can try an approach like the following run anywhere example.

alt text

Following is the simple XML code for the run anywhere example which uses Splunk's _internal index:

<form>
  <label>Submit Button Testing</label>
  <!-- Independent search to set the token for Panel on Click of Submit button.
  1) Input Change Event Handler has not been used as token will then be available on change and not after submit button click.
  2) In order ro access token value after the click of Submit button i.e. from Submitted Token Model independent search has been used.
  -->
  <search>
    <query>| makeresults
| eval Panel=$tokPanel|s$
    </query>
    <done>
      <condition match="$result.Panel$==&quot;1&quot;">
        <set token="tokPanelSelected">1</set>
        <set token="pan1"></set>
        <unset token="pan2"></unset>
      </condition>
      <condition match="$result.Panel$==&quot;2&quot;">
        <unset token="pan1"></unset>
        <set token="pan2"></set>
        <set token="tokPanelSelected">2</set>
      </condition>
      <condition>
        <unset token="tokPanelSelected"></unset>
      </condition>
    </done>
  </search>
  <fieldset submitButton="true">
    <input type="dropdown" token="tokPanel" searchWhenChanged="false">
      <label></label>
      <choice value="1">One</choice>
      <choice value="2">Two</choice>
      <default>1</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Msg Panel Selected: $tokPanelSelected$</title>
      <html/>
    </panel>
  </row>
  <row>
    <panel depends="$pan1$">
      <title>Panel 1</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| top 5 component showperc=f</query>
          <earliest>-1d@d</earliest>
          <latest>-0d@d</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel depends="$pan2$">
      <title>Panel 2</title>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO 
| timechart count by component limit=5 useother=f</query>
          <earliest>-1d@d</earliest>
          <latest>-0d@d</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

kulsplunk
Explorer

Thanks much @niketnilay ! I like the way you have used the Token Model independent search. It solves my display issue, however I've a dependency of "Input change event handler" because I have two hidden panels and I want to display only one panel based on the selected radio button. With your solution, I will have to click the Submit button to display the message and the panel.

I guess it would be better to use the javascript to get both problem solved. I would appreciate if you could share any sample code.

Thanks a lot!!

0 Karma

niketnilay
Legend

@kulsplunk , refer to one of my older answers to Use Splunk XML JS Extension along with Splunk JS to control tokens in Submitted and Default Token Models: https://answers.splunk.com/answers/581652/how-can-i-create-a-button-switcher.html

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

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @kulsplunk,

Have you tried by setting up token on change event? Can you please try below example?

<form>
  <label>Submit Button Msg</label>
  <init>
    <set token="msg"> </set>
  </init>
  <fieldset submitButton="true">
    <input type="radio" token="panel">
   <label>Panel-List</label>
   <choice value="1">Panel 1</choice>
   <choice value="2">Panel 2</choice>
   <change>
     <set token="msg">$label$ selected</set>
   </change>
 </input>
  </fieldset>
  <row>
    <panel>
      <html>
        $msg$
      </html>
    </panel>
  </row>
</form>
0 Karma

kulsplunk
Explorer

Hi @kamlesh_vaghela ,

Thanks for your response. Actually I want to display the message on "Submit" button click, not based on the radio button selection. This example just shows the message based on my radio button selection. Is it possible to write code on OnSubmit within simpleXML code? Thanks a lot!

0 Karma

poete
Builder

Hello @kulsplunk,

where do you want the message to be displayed? On the dashboard? In an alert popup?

Can you please give more details?

0 Karma

kulsplunk
Explorer

Hi Poete, I wanted to display the message on the dashboard right next to the "Submit" button. Thanks!

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!