All Apps and Add-ons

How to get a table with custom Icon in form search using javascript and CSS?

Path Finder

hi ,

There is a Simple XML 6 Dashboard app , which demonstrates a lot of extended functions of new Web framework.

https://apps.splunk.com/app/1603/

And I like the demo called "Table Icon Set (Rangemap)" , which would render the table and put Icon in it.
But when I try to use the javascript & css files in my form search , It failed to work!!

I just noticed that there are no extended function examples for "Form Search".

Does anyone know how to implement the same effect in "Form" ? Or if this is just impossible ?

Thanks.

0 Karma

Motivator

Hi leowang!
Copy the file the table
iconsrangemap.js and tabledecorations.css and the folder icons in the $ splunk_home\etc\apps simple_xml_examples\appserver\static of application splunk Example 6 .x dashboard and paste it into the same directory in your application are: $splunk_home\etc\apps \your_app\appserver\static
Here is the xml code of your view that will appear in splunk.
This form allows you to select an index, or a sourcetype source

<form script="table_icons_rangemap.js" stylesheet="table_decorations.css">
<label>Table Icon Set (Rangemap)</label>
<fieldset submitButton="false">
<input type="dropdown" token="index" searchWhenChanged="true">
<populatingSearch fieldForLabel="index" fieldForValue="index">index=* OR index=_*| stats count by index</populatingSearch>
<choice value="*">All</choice>
<default>*</default>
</input>
<input type="dropdown" token="sourcetype" searchWhenChanged="true">
<populatingSearch fieldForLabel="sourcetype" fieldForValue="sourcetype">index=* OR index=_*| stats count by sourcetype</populatingSearch>
<choice value="*">All</choice>
<default>*</default>
</input>
<input type="dropdown" token="source" searchWhenChanged="true">
<populatingSearch fieldForLabel="source" fieldForValue="source">index=* OR index=_*| stats count by source</populatingSearch>
<choice value="*">All</choice>
<default>*</default>
</input>
</fieldset>
<row>
<table id="table1">
<searchString>
index=$index$ OR index=_$index$ sourcetype=$sourcetype$ source=$source$| stats count by sourcetype,source,host | rangemap field=count low=0-100 elevated=101-1000 default=severe </searchString>
<earliestTime>-1h</earliestTime>
<option name="drilldown">none</option>
</table>
</row>
</form>

please forgive my english.

0 Karma

Communicator

if its just a search

"paste it into the same directory in your application are: $splunkhome\etc\apps \yourapp\appserver\static"

we should be able to drop it into "\$splunk_home\etc\apps\search\appserver\static" right? I still cant get it to work.

0 Karma

Hi leo_wang!

It shouldn't make a difference if you use dashboard or form. I have played around with some of these examples in the last time and there are some points you can troubleshoot.

First of all you should check if your script is loaded when you open the dashboard. For this purpose you can use the developer tools of you browser. (For example in firefox you can go for developer tools and then debugger. Is your tableiconsrangemap.js listed there?)
Have you restarted splunk or at least splunk web after you created the js and css files? Are the js and css files in the correct folder of the app (appserver/static).
Are there any other Errors on the console of the Web developer tools?
Have you assigned an id to the table you want to display the icons in?

It could also possibly help if you can post a snipped of your dashboard, so others can take a look over it.

Greetings!

0 Karma