All Apps and Add-ons
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Unlocking Unified Insights: New Gigamon Federated Search App for Splunk

In today’s data-heavy environment, organizations are caught in a data distribution dilemma. As data volumes ...

GA: New Data Management App in Splunk Platform

Streamlining Data Management: Introducing a unified experience in Splunk Managing data at scale shouldn’t feel ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...