Dashboards & Visualizations

How to get the values of a drop-down box input to navigate to another page in Simple XML?

Dawson014
Path Finder

Hello,

My Dashboard has two simple drop-downs which generate the options in them dynamically by executing a search. The search performs an inputlookup to populate the drop-downs from a csv file present in the server.
Here's how my csv file looks like:

APP_FAMILY,APPLICATION
app_fam1,app_name1
app_fam1,app_name2
app_fam2,app_name3
app_fam2,app_name4

Now the first drop-down populates itself with the distinct values from the APP_FAMILY (application family) column, and then the second drop-down populates itself with the applications under that application family.

Now, according to what application the user chooses, the page should load that application specific page containing its metrics in a dashboard.

Example:
If the application name is app_name1;
the page that loads should be business_metrics_app_name1?form.app_family=app_fam1&form.app=app_name1

Here's my code in Simple XML:

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| inputlookup lookupFile.csv | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| inputlookup lookupFile.csv | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
    </input>
  </fieldset>
</form>

how can this be achieved using simple XML?

I can perform the task using HTML and JQuery, but I want the same look and feel that splunk provides in the dashboard.
If further clarifications are needed I will assist in any way I can.

alt text

1 Solution

somesoni2
Revered Legend

You can give this a try. This give two dropdown (used your sample static data, change the dropdown queries accordingly). Once you select options from both the dropdown, a table appears with clickable rows. Click on the row will redirect to specified URL with values passed from dropdown.

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
      <populatingSearch fieldForLabel="App_Family" fieldForValue="App_Family">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</populatingSearch>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
      <populatingSearch fieldForLabel="Application" fieldForValue="Application">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</populatingSearch>
    </input>
  </fieldset>
   <row>
    <panel>
      <table depends="$app$">
        <title>Launcher</title>
        <searchString>| gentimes start=-1 | eval Launcher="Click Here to Launch the Dashboard" | table Launcher</searchString>
        <earliestTime>0</earliestTime>
        <latestTime/>       
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <drilldown>
          <link>
             <![CDATA[
/app/YourAppNameHere/business_metrics_$app$?form.app_family=$app_family$&form.app=$app$
  ]]>
          </link>
        </drilldown>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

View solution in original post

somesoni2
Revered Legend

You can give this a try. This give two dropdown (used your sample static data, change the dropdown queries accordingly). Once you select options from both the dropdown, a table appears with clickable rows. Click on the row will redirect to specified URL with values passed from dropdown.

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
      <populatingSearch fieldForLabel="App_Family" fieldForValue="App_Family">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</populatingSearch>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
      <populatingSearch fieldForLabel="Application" fieldForValue="Application">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</populatingSearch>
    </input>
  </fieldset>
   <row>
    <panel>
      <table depends="$app$">
        <title>Launcher</title>
        <searchString>| gentimes start=-1 | eval Launcher="Click Here to Launch the Dashboard" | table Launcher</searchString>
        <earliestTime>0</earliestTime>
        <latestTime/>       
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <drilldown>
          <link>
             <![CDATA[
/app/YourAppNameHere/business_metrics_$app$?form.app_family=$app_family$&form.app=$app$
  ]]>
          </link>
        </drilldown>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

Dawson014
Path Finder

I thought that the submit button can be manipulated to this extent, but this will work too. Thank you for your answer @somesoni2

Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...

Data Persistence in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. What happens if the OpenTelemetry collector ...

Thanks for the Memories! Splunk University, .conf25, and our Community

Thank you to everyone in the Splunk Community who joined us for .conf25, which kicked off with our iconic ...