Splunk Search

How to allow user to enter a value that doesn't exist in a dropdown

w564432
Explorer

I have a dropdown that reads from a lookup but would like to allow the user to enter in a value that doesn't exist in the dropdown. Is this possible?

0 Karma
1 Solution

mayurr98
Super Champion

Hi

You could try adding one more input box where user could enter the text manually and it will automatically get reflect in dropdown. However, if user wants to select predefined value from dropdown so he can do that and it will also be automatically get reflected in the input box.

Here is sample run anywhere XML.
Create a new dashboard and just copy paste this XML and try manually entering text to see how it works.

<form>
  <label>test</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="host" searchWhenChanged="true">
      <label>host</label>
      <choice value="*">ALL</choice>
      <fieldForLabel>host</fieldForLabel>
      <fieldForValue>host</fieldForValue>
      <search>
        <query>index=_internal | dedup host | table host</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="text" token="host" searchWhenChanged="true">
      <label>Manually type host</label>
      <default>$host$</default>
      <initialValue>$host$</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <event>
        <title>test</title>
        <search>
          <query>index=_internal host=$host$ | stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>
</form>

View solution in original post

niketn
Legend

@w564432 this would be a tough ask for the built in Splunk Dropdown as the Text Box that searches the values and Dropdown Values are two different DOM nodes in the same Dropdown. So what it means is if you have values like host1, host2, host3 .... in the dropdown and you type in host in the textbox and then choose host1 or host2 as the value you Dropdown, you will still have host value present in the textbox.

Since Value selected in the text box may not exist in the dropdown, if you select any text not present as Dropdown value, will not be displayed in the input.

Following is one way to implement this using Simple XML JS extension and Splunk JS

<form script="dropdown_textbox.js">
  <label>Dropdown with Text Box</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokHost" searchWhenChanged="true">
      <label>Select Host</label>
      <fieldForLabel>host</fieldForLabel>
      <fieldForValue>host</fieldForValue>
      <default>*</default>
      <search>
        <query>| makeresults count=10
| fields - _time
| eval sno=random()
| eval sno=substr(sno,0,2)
| eval host="host".sno
| fields - sno
| dedup host</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
      <choice value="*">All</choice>
    </input>
  </fieldset>
  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
        <style>
          input[class^="TextStyles__StyledInputSearchInput-sc-"][data-test="textbox"]{
            background:red !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults
          | fields - _time
          | eval finalToken="$tokHostForSearch$"</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>

Following is the required JavaScript file dropdown_textbox.js file to be put under your Splunk App's appserver/static folder (which would need to be created if already not existing, also would required system restart/refresh/bump and browser history cleanup in case changes do not reflect).

PS: jQuery Selector is based on Splunk 7.1.x and higher versions and may not work on previous versions. Within test Simple XML Dashboard hidden css <style> section has been added to test the Text Box selector within Dropdown which will turn red in case selector is valid (tested in Splunk 7.3.x)

require(["jquery", 
         "splunkjs/mvc",
         "splunkjs/mvc/simplexml/ready!"],
 function($,
          mvc) {
    console.log("Inside Dropdown JS");
    var defaultTokenModel=mvc.Components.get("default");
    var submittedTokenModel=mvc.Components.get("submit");
    //Token Value changed
    defaultTokenModel.on("change:tokHost",function(value,newValue,options){
        console.log("Dropdown Value Changed");
        var strDropdownSelection=defaultTokenModel.get("tokHost");
        console.log("Changed strDropdownSelection:",strDropdownSelection);
        if(strDropdownSelection!==undefined){
            //Set the token tokHostForSearch from strDropdownSelection
            defaultTokenModel.set("tokHostForSearch",strDropdownSelection);
        }
    });
    //Text Box value changed
    $(document).on('change','input[class^="TextStyles__StyledInputSearchInput-sc-"][data-test="textbox"]',function(){
        console.log("TextBox Value Changed");
        var strTextBoxSelection=$('input[class^="TextStyles__StyledInputSearchInput-sc-"][data-test="textbox"]').val();
        console.log("Changed strTextBoxSelection:",strTextBoxSelection);
        //Clear Dropdown
        if(strTextBoxSelection!==undefined){
            defaultTokenModel.unset("form.tokHost");
            //Set the token tokHostForSearch from strTextBoxSelection
            defaultTokenModel.set("tokHostForSearch",strTextBoxSelection);
        }
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mayurr98
Super Champion

Hi

You could try adding one more input box where user could enter the text manually and it will automatically get reflect in dropdown. However, if user wants to select predefined value from dropdown so he can do that and it will also be automatically get reflected in the input box.

Here is sample run anywhere XML.
Create a new dashboard and just copy paste this XML and try manually entering text to see how it works.

<form>
  <label>test</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="host" searchWhenChanged="true">
      <label>host</label>
      <choice value="*">ALL</choice>
      <fieldForLabel>host</fieldForLabel>
      <fieldForValue>host</fieldForValue>
      <search>
        <query>index=_internal | dedup host | table host</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="text" token="host" searchWhenChanged="true">
      <label>Manually type host</label>
      <default>$host$</default>
      <initialValue>$host$</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <event>
        <title>test</title>
        <search>
          <query>index=_internal host=$host$ | stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>
</form>

mayurr98
Super Champion

Pls accept the answer if it works for you to close this question.

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 ...