All Apps and Add-ons

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

leo_wang
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

gyslainlatsa
Motivator

Hi leo_wang!
Copy the file the table_icons_rangemap.js and table_decorations.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

clintla
Contributor

if its just a search

"paste it into the same directory in your application are: $splunk_home\etc\apps \your_app\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

tom_frotscher
Builder

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