How to avoid un-responsive dropdown input with 100K or more results using Simple XML

[niketn]

We would have noticed Dropdown input in Simple XML dashboards with 100K or more results kind of makes the dropdown un-responsive. They take longer to open and difficult to scroll through the values. Ideal fix would be to use Simple XML JS Extension and Splunk JS Stack to load partial results using AJAX kind of framework. This question is to document how to solve this using Simple XML and CSS extension.

[niketn]

Like mentioned above ideal fix would be through custom JS implementation. This solution approach with Simple XML and some CSS extension (NO JS Required), actually uses a Text Box, couple of Link Inputs for up and down buttons (to show and collapse values) and a table with pagination.

Following are the advantages of using this approach:

1. This makes dropdown responsive if there are more than 1K results as Table will have pagination and people can pick from loaded results.
2. Can toggle between Select First Choice feature or Filter results using Text Box.
3. Pagination can be toggled based on number of rows required (ideally 5-10, but dropdown does not have it).
4. Table will allow sorting of results.
5. Any other features of Table can be used for example
1. highlighted results by applying Table cell color
2. wrap/no wrap for results
3. Row numbers.
6. Any CSS override like Horizontal Scrolling instead of Pagination.

 PS: CSS customization and change event handler or similar changes might be required as actual implementation in dashboard. Like default behavior, whether you want search to continue once value is selected, search option through text box, having multiple inputs, having inputs in multiple panels, having multiple dropdown etc. But idea remains the same.

Following is the Simple XML code for run anywhere example screenshot attached above.

<form theme="dark">
  <label>Table as Dropdown</label>
  <init>
    <unset token="showComponents"></unset>
    <set token="runComponentSearch">true</set>
    <set token="showComponentUpLink">true</set>
    <unset token="showComponentDownLink"></unset>
  </init>
  <fieldset submitButton="false" autoRun="true"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="text" token="tokComponent" searchWhenChanged="true">
        <label>Select Component</label>
        <!-- To mimic selectFirstChoice property of dropdown use the following default selection instead -->
        <!--
        <default>$tokSelectedComponent$</default>
        -->
        <default>*</default>
        <change>
          <condition>
            <set token="tableFilterText">$value$</set>
          </condition>
        </change>
      </input>
      <input id="link_component_down" type="link" token="linkComponentDownArrow" depends="$showComponentUpLink$">
        <label></label>
        <choice value="down">v</choice>
        <change>
          <condition value="down">
            <set token="showComponents">true</set>
            <unset token="form.linkComponentDownArrow"></unset>
            <unset token="showComponentUpLink"></unset>
            <set token="showComponentDownLink">true</set>
          </condition>
        </change>
      </input>
      <input id="link_component_up" type="link" token="linkComponentUpArrow" depends="$showComponentDownLink$">
        <label></label>
        <choice value="up">^</choice>
        <change>
          <condition value="up">
            <unset token="showComponents"></unset>
            <unset token="form.linkComponentUpArrow"></unset>
            <unset token="showComponentDownLink"></unset>
            <set token="showComponentUpLink">true</set>
          </condition>
        </change>
      </input>
      <input type="dropdown" token="tokSplunkComponent" searchWhenChanged="true">
        <label>Select Component</label>
        <fieldForLabel>component</fieldForLabel>
        <fieldForValue>component</fieldForValue>
        <selectFirstChoice>true</selectFirstChoice>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| stats count by component
| fields - count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
        </search>
      </input>
    </panel>
  </row>
  <row>
    <panel id="panelDropdownMenu">
      <html depends="$alwaysHideCSSStyleOverride$">
        <style>
          #panelDropdownMenu{
            position: relative !important;
            left: 230px !important;
            width: 280px !important;
          }
          #panelDropdownMenu div[data-view="views/dashboard/element/Footer"]{
            display: none !important;
          }
          #link_component_down.input,#link_component_up.input{
            width: 50px !important;
          }
          #link_component_down.input button,#link_component_up.input button{
            position: relative !important;
            left: -60px !important;
            background: rgb(92, 103, 115) !important;
          }
        </style>
      </html>
      <table depends="$showComponents$">
        <search depends="$runComponentSearch$">
          <progress>
            <set token="tokSelectedComponent">$result.component$</set>
          </progress>
          <query>index=_internal sourcetype=splunkd log_level!=INFO component="*$tableFilterText$*"
| stats count by component
| fields - count
| sort 0 count</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">10</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="link.visible">0</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="refresh.link.visible">0</option>
        <option name="refresh.time.visible">0</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="form.tokComponent">$row.component$</set>
          <unset token="showComponents"></unset>
          <set token="showComponentUpLink">true</set>
          <unset token="showComponentDownLink"></unset>
        </drilldown>
      </table>
    </panel>
  </row>
</form>