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!

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Hello Splunk Community,   We're thrilled to share an exciting update that will help you manage your data more ...

Splunk MCP & Agentic AI: Machine Data Without Limits

Discover how the Splunk Model Context Protocol (MCP) Server can revolutionize the way your organization uses ...

Application management with Targeted Application Install for Victoria Experience

Experience a new era of flexibility in managing your Splunk Cloud Platform apps! With Targeted Application ...