All Apps and Add-ons
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | 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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey
Get Updates on the Splunk Community!

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

Data Persistence in the OpenTelemetry Collector

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

Introducing Splunk 10.0: Smarter, Faster, and More Powerful Than Ever

Now On Demand Whether you're managing complex deployments or looking to future-proof your data ...