All Apps and Add-ons
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

iKate
Builder
‎03-30-2016 11:47 AM

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
Reply
1 Solution
Solved! Jump to solution
Solution

skawasaki_splun
Splunk Employee
Splunk Employee
‎03-30-2016 12:55 PM 
"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

Reply
Solved! Jump to solution
Solution

skawasaki_splun
Splunk Employee
Splunk Employee
‎03-30-2016 12:55 PM 
"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$$" 
},
Reply
Solved! Jump to solution

iKate
Builder
‎04-04-2016 02:55 AM

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
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...