How to Customize a Table using HTML in Splunk

How to Customize a Table using HTML in Splunk

Hi Guys !!

Hope you are enjoyed the previous posts in Dashboard Section. Today we have come with a new idea. Often we create table in the dashboard for visualizing the data. Have you thought that a simple table can be done more attractive using HTML . This is very easy to implement in Splunk. Follow the below steps to customize a table using HTML.  

Step 1:
Create a simple XML dashboard using the below query.

index=_internal sourcetype=splunkd_ui_access | stats count by method,status.

Also we have given the dashboard name as Table Dashboard. Click on Save to create the dashboard. Then click on View Dashboard to see the dashboard.

table1

table2

table3

Step 2:
In the XML dashboard we can’t make attractive . Now convert the dashboard to HTML . You can see   button on the top right corner of the dashboard. Click on that and next click on Convert to HTML to convert.

table4
Step 3:
Now you can specify a new name for the html dashboard . Click on Convert Dashbaord to save the dashboard . We have given the name as Table Dashboard HTML for the html dashboard. Click on View to see the dashboard.

table5

table6

table7
Step 4:
Click on Edit to edit the source code of the HTML Dashboard.

table12
Step 5:
We will change into the following marked portions.

table8

Step 6:
We have written custom CSS inside style tag. Here we have used table,tr,td to customize the table. We have given the border color as solid red  by border attribute and also put all the values in the center by text-align attribute.

table9

We have called custom CSS inside the div tag. For dashboard name we have called dashboard . To change the background we have called panel2 . After making changes into the source code click on Save to make the changes.

table10

Step 7:
Now you can see one cool table has been created. Also we have given the borders as red and put the field names and field values in the center.

table11

You can also download the source code of this sample dashboard by clicking the below button.

SourceCode
 

Hope this has helped you in achieving the below requirement without fail:

How to Customize a Table using HTML in Splunk

 

Happy Splunking !!

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.