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!

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