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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...