I have uploaded my .js and .css scripts in $SPLUNK_HOME/etc/apps/search/appserver/static path, but still these scripts are now working.
Below is my .js script:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['ProductName']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Apply interpretation for number of historical searches
if (cell.field === 'ProductName') {
if (value === "Dream Crusher" ) {
$td.addClass('range-cell').addClass('range-green');
}
}
// Update the cell content
$td.text(value).addClass('string');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
Below is my .css script:
> #highlight tr.range-orange td {
> background-color:#ffcc99 !important; } #highlight
> tr.range-red td {
> background-color:#ff0000 !important; } #highlight
> tr.range-green td {
> background-color:#00ff00 !important; }
I have added these scripts in my Dashboard as:
> script="oip_table_row_color.js"
> stylesheet="oip_table_row_color.css">
I have already tried /debus/refresh and Clearing browser cookies.
Also, restarted Splunk. But still The color coding is not reflecting in my dashboard.
Do I need to add something in my Dashboard Xml?
TIA
Possible reason,
1. Check the permission and user role of the two file added
2. Check whether it is in the same application. if not prefix app_name: in your dashboard
e.g: script="search:my_code.js" stylesheet="my_code.css"
I guess yours is reason 1
After changing permission restart SH
@nagar57, while posting code on Splunk Answers make sure you use the Code button i.e. one with 101010
or shortcut Ctrl+K
, so that special characters do not escape. Based on the details provided, if you are trying to use the CSS and JS from Simple XML Dashboard examples app then it should have worked after refreshing Splunk and clearing Browser cache history. So try the following things for debugging:
1) Type in the following URL if you have uploaded the static files under the search
app's appserver/static
folder.
http://<yourSplunkServerAndPort>/en-US/static/app/search/oip_table_row_color.js
and
http://<yourSplunkServerAndPort>/en-US/static/app/search/oip_table_row_color.css
1) If you get Not Found error, then you have not uploaded the file to correct folder. You can also confirm this by right click and choosing Browser Inspector to see any Console error/s.
2) If you can see the source code of JS and CSS then you have uploaded files to the correct folder but there is issue with the code.
In order to look further at code related issues. Try the following:
2 a) For CSS move the code from CSS file to html panel in dashboard i.e. under the following code
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
<!-- Your CSS Style override goes here-->
</style>
</html
</panel>
</row>
2 b) Once CSS is found to be written correctly, change the JS Code to print only debug info first i.e.
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
console.log("Inside JS Script for Table Render Extension");
});
First of all Thanks a lot for taking so much pain to explain in this detail 🙂
I am able to read my .jss and .css files through http://localhost:8000/static/app/search/oip_table_row_color.js
Now as you mentioned I changed the .js script to just print only debug info. I am pretty knew to Splunk so could you please help me out on how can I see this debug log info through splunk
Right Click on browser and select the Inspect Option. You should have several tabs of which one would be Console.
https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html
Yes, I can see the debug log.
Also, I tried with bump and what I can see is when I am refreshing the dashboard color appears and then goes away. I don't know what is going wrong.
Seems like you are running into known issue with 6.6+ where TableView needs slight delay in rendering. So setTimeout needs to be added. Refer to one of previous answers: https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html
Hi nagar57,
did you created your dashboard in Search App on in a different one?
bye.
Giuseppe
Yes the dashboard is in Search App
You might have created your dashboard in search app and might have put js and css in appserver/static folder of some other app. This has happened with me once.
Thanks,
Pallavi
@pallavi25 Well this was not the issue. The issue was with the file permissions.
@nagar57
have you tried https://SPLUNK_HOME:8000/en-GB/_bump
?
You mean
http://localhost:8000/en-GB/_bump
It gave Forbidden