All Apps and Add-ons

Custom Visualizations app: How to pass parameters from input forms to a search inside a div tag of an HTML panel?

iKate
Builder

Hi!

How can one pass input parameters from drop-down/textfield/etc into a search that is inside a div tag of an html panel (I'm using bubble chart example)?
$$mytoken$$ or $mytoken$ - doesn't work
placing depends="$mytoken$" in html or div tag didn't help either

Here's part of bubble chart example xml and we can see text inputs term and category, but they aren't displayed on a dashboard and aren't used in the search inside html. Is it possible at all?

<form script="custom_vizs:autodiscover.js, custom_vizs:viz_bubblechart.js">
  <label>Bubble Chart</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" searchWhenChanged="true">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="term" id="input_term"/>
    <input type="text" token="category" id="input_category"/>
  </fieldset>
  <row>
    <panel>
      <html>
        <h2>Top 30 Most Common Terms in an Ad-hoc Search Query (drilldown)</h2>
        <div id="bubblechart_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options='{
          "preview": true,
          "search": "index=_audit NOT REST: search=* | regex search_id=\"&apos;\\d+\\.\\d+&apos;\" | rex field=search max_match=0 \"(?<terms>\\w+)\" | eval terms=mvdedup(terms) | top limit=30 terms | lookup search_commands.csv search_command AS terms OUTPUT search_command | eval type=case(isnum(terms), \"number\", isnotnull(search_command), \"command\", 1=1, \"word\") | eval terms=if(isnum(terms), \"\\\"\"+terms+\"\\\"\", terms)",
          "earliest_time": {
            "type": "token_safe",
            "value": "$$earliest$$"
            },
          "latest_time": {
            "type": "token_safe",
            "value": "$$latest$$"
          }
        }'>
        </div>
        <div id="bubblechart" class="splunk-view" data-require="app/custom_vizs/components/bubblechart/bubblechart" data-options='{
          "managerid": "bubblechart_search",
          "nameField": "terms",
          "valueField": "count",
          "categoryField": "type",
          "height": 600
        }'>
        </div>
      </html>
    </panel>
  </row>
0 Karma
1 Solution

skawasaki_splun
Splunk Employee
Splunk Employee
"search": {
  "type": "token_safe",
  "value": "index=foo sourcetype=$$sourcetype$$ | stats count"
}

The answer is in the Tutorial page of the Custom Visualization app:

Use the "token_safe" and the double-dollar sign syntax ($$token$$) to use tokens inside "data-options".
This also applies to the search query.
This is because if a regular $token$ is used then the <html> panel will clear everything in it if that $token$'s value changes.
"earliest_time": { 
  "type": "token_safe", 
  "value": "$$earliest$$" 
}, 

View solution in original post

skawasaki_splun
Splunk Employee
Splunk Employee
"search": {
  "type": "token_safe",
  "value": "index=foo sourcetype=$$sourcetype$$ | stats count"
}

The answer is in the Tutorial page of the Custom Visualization app:

Use the "token_safe" and the double-dollar sign syntax ($$token$$) to use tokens inside "data-options".
This also applies to the search query.
This is because if a regular $token$ is used then the <html> panel will clear everything in it if that $token$'s value changes.
"earliest_time": { 
  "type": "token_safe", 
  "value": "$$earliest$$" 
}, 

iKate
Builder

Thanks!
To be honest, I couldn't suppose to put all search string into value section even after reading tutorial.
This is how my working dashboard(part) looks like now:

<fieldset submitButton="false" autoRun="true">
    <input type="time" searchWhenChanged="true">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="devicemanufacturer">
      <label>device manufacturer</label>
      <search>
        <query>index=myindex earliest=-2d | stats dc(devicemanufacturer) as d by devicemanufacturer</query>
      </search>
      <fieldForLabel>devicemanufacturer</fieldForLabel>
      <fieldForValue>devicemanufacturer</fieldForValue>
      <choice value="*">All</choice>
      <default>*</default>
      <prefix>devicemanufacturer=</prefix>
    </input>
  </fieldset>
  <row>
    <panel>
      <html >
            <h2>Top 30 Search Strings</h2>
         <div id="search_words" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options="{
        "preview": true,
        "search": {
        "type": "token_safe",
        "value": " index=myindex $$devicemanufacturer$$ earliest=$$earliest$$ latest=$$latest$$| top limit=30 searchstr "
        }
        }">
        </div>
....
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...