Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Issue with simple HTML dashboard customization
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
My goal is to change the CSS apply to a row depending on a value a cell, I have find the .js code below which seems work before but not for me.
To sum up I have :
- js and css files located in : $MYSPLUNKDIR/etc/apps/search/appserver/static/application.(js|css)
- A HTML dashboard convert from XML by Splunk who normally include the both files
I have seen that the js and css files are well retrieve by the browser that let me think the code include in the HTML dashboard is OK...
Maybe the application.js use an old code ?
If you have some ideas it's very welcom.
Thanks,
Extract of the include in HTML dashboard :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Alerts Page Clone | Splunk</title>
<link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/application.css"
[...]
<script type="text/javascript" src="/static/app/search/application.js"></script>
</body>
</html>
application.js :
if ((Splunk.util.getCurrentView() == 'MYDASHBOARD') && Splunk.Module.SimpleResultsTable) {
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
onResultsRendered: function($super) {
var retVal = $super();
this.myCustomHeatMapDecorator();
return retVal;
},
myCustomHeatMapDecorator: function() {
$("tr:has(td)", this.container).each(function() {
var tr = $(this);
if (tr.find("td:nth-child(3)").text() == "crit") {
tr.addClass("severityCritical");
}
if (tr.find("td:nth-child(3)").text() == "high" ) {
tr.addClass("severityHigh");
}
});
},
});
}
application.css :
tr.severityHigh td {
background-color:#ed2b21 !important;
color: #fff !important;
font-weight: bold;
}
tr.severityCritical td {
background-color:#ed2b21 !important;
color: #fff !important;
font-weight: bold;
}
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
There is an example for how to do this in the "Splunk 6 Dashboard Examples" app.
http://apps.splunk.com/app/1603/
Note that this example is written in Simple XML, using custom js and css extensions.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
There is an example for how to do this in the "Splunk 6 Dashboard Examples" app.
http://apps.splunk.com/app/1603/
Note that this example is written in Simple XML, using custom js and css extensions.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks I found the perfect example !
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Nobody has a workaround, another way to do that ?
Thanks,
.conf25 Global Broadcast: Don’t Miss a Moment
Observe and Secure All Apps with Splunk
What's New in Splunk Observability - August 2025
