All Apps and Add-ons

Nested Form Inputs: Is it possible to have textbox as an option for a Radio button in Simple XML or Sideview Utils?

jackson1990
Path Finder

Is it possible to have textbox as an option for Radio button?

Scenario:

I need to have a Radio button input type with two options.
First option is a static one.
Second option should have a label and text box.
On click of second option, I need the text box to get enabled so that user can enter the values in it as part of radio input type.
Is it possible to achieve the above in simple XML? or in Sideview Utils?

0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

Here's a way to implement it in Sideview Utils without any CustomBehavior. meaning without having to write or think about any custom javascript.

<module name="Radio">
  <param name="name">myRadio</param>
  <param name="template">someField="$value$"</param>
  <param name="float">left</param>
  <param name="staticRadios">
    <list>
      <param name="label">Value 1</param>
      <param name="value">auto</param>
    </list>
    <list>
      <param name="label"> </param>
      <param name="value">manual</param>
    </list>
  </param>

  <module name="Switcher" group=" ">
    <param name="selectedGroup">$myRadio$</param>

    <module name="TextField" group="manual">
      <param name="name">myRadio</param>
      <param name="template">someField="$value$"</param>

      <module name="Gate">
        <param name="to">everythingElse</param>
      </module>
    <module>
    <module name="Gate" group="auto">
      <param name="to">everythingElse</param>
    </module>
  </module>
</module>
<module name="Gate">
  <param name="id">everythingElse</param>
  .. all your other modules that actually use $myRadio$ will go inside here. 
</module>

The idea above is to make the Switcher module do the dirty work of showing/hiding the TextField module. It's a bit weird in that if the user selects the first radio, the textfield will dissappear entirely rather than grey out. If you are comfortable in JS, it might be good to explore a simple customBehavior here, in which case you could disable and undisable the Textfield's textbox fairly easily and thus dispense with the complexity of the Switcher module and the Gate modules...

View solution in original post

sideview
SplunkTrust
SplunkTrust

Here's a way to implement it in Sideview Utils without any CustomBehavior. meaning without having to write or think about any custom javascript.

<module name="Radio">
  <param name="name">myRadio</param>
  <param name="template">someField="$value$"</param>
  <param name="float">left</param>
  <param name="staticRadios">
    <list>
      <param name="label">Value 1</param>
      <param name="value">auto</param>
    </list>
    <list>
      <param name="label"> </param>
      <param name="value">manual</param>
    </list>
  </param>

  <module name="Switcher" group=" ">
    <param name="selectedGroup">$myRadio$</param>

    <module name="TextField" group="manual">
      <param name="name">myRadio</param>
      <param name="template">someField="$value$"</param>

      <module name="Gate">
        <param name="to">everythingElse</param>
      </module>
    <module>
    <module name="Gate" group="auto">
      <param name="to">everythingElse</param>
    </module>
  </module>
</module>
<module name="Gate">
  <param name="id">everythingElse</param>
  .. all your other modules that actually use $myRadio$ will go inside here. 
</module>

The idea above is to make the Switcher module do the dirty work of showing/hiding the TextField module. It's a bit weird in that if the user selects the first radio, the textfield will dissappear entirely rather than grey out. If you are comfortable in JS, it might be good to explore a simple customBehavior here, in which case you could disable and undisable the Textfield's textbox fairly easily and thus dispense with the complexity of the Switcher module and the Gate modules...

gyslainlatsa
Motivator

hi jackson 19990,
try use this code

<form>
  <label>Radio Form Input Element and text box </label>
  <earliestTime>-24h@h</earliestTime>
  <latestTime>now</latestTime>

  <fieldset autoRun="true" submitButton="false">
    <input type="radio" token="username" searchWhenChanged="true">
      <label>Select a User:</label>
      <default>*</default>
      <choice value="*">All</choice>
      <choice value="admin">Admin</choice>
    </input>

      <input type="text" token="username" searchWhenChanged="true">
      <label>Enter one UserName:</label>
      <default>*</default>
      </input> 

  </fieldset>

  <row>

    <chart>
      <title>Chart of Events for user="$username$"</title>
      <searchString>index=_internal user=$username$ | timechart count </searchString>
      <option name="charting.chart">column</option>
    </chart>

  </row>
</form>

copy and paste in your xml view

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...