topic Re: .js and .css scripts not working for Splunk Dashboard in Dashboards & Visualizations

.js and .css scripts not working for Splunk Dashboard

nagar57 — Mon, 10 Jun 2019 11:19:25 GMT

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

Re: .js and .css scripts not working for Splunk Dashboard

kamlesh_vaghela — Mon, 10 Jun 2019 12:52:39 GMT

@nagar57

have you tried https://SPLUNK_HOME:8000/en-GB/_bump ?

Re: .js and .css scripts not working for Splunk Dashboard

gcusello — Mon, 10 Jun 2019 12:58:25 GMT

Hi nagar57,
did you created your dashboard in Search App on in a different one?
bye.
Giuseppe

Re: .js and .css scripts not working for Splunk Dashboard

nagar57 — Mon, 10 Jun 2019 15:42:47 GMT

You mean
http://localhost:8000/en-GB/_bump

It gave Forbidden

Re: .js and .css scripts not working for Splunk Dashboard

nagar57 — Mon, 10 Jun 2019 15:44:15 GMT

Yes the dashboard is in Search App

Re: .js and .css scripts not working for Splunk Dashboard

niketn — Mon, 10 Jun 2019 16:46:27 GMT

@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");
});

Re: .js and .css scripts not working for Splunk Dashboard

nagar57 — Mon, 10 Jun 2019 17:09:34 GMT

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

Re: .js and .css scripts not working for Splunk Dashboard

niketn — Mon, 10 Jun 2019 17:18:45 GMT

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

Re: .js and .css scripts not working for Splunk Dashboard

nagar57 — Mon, 10 Jun 2019 17:37:02 GMT

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.

Re: .js and .css scripts not working for Splunk Dashboard

paramagurukarth — Wed, 30 Sep 2020 00:52:38 GMT

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

Re: .js and .css scripts not working for Splunk Dashboard

pallavi25 — Wed, 25 Sep 2019 10:37:12 GMT

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

Re: .js and .css scripts not working for Splunk Dashboard

nagar57 — Wed, 25 Sep 2019 11:51:10 GMT

@pallavi25 Well this was not the issue. The issue was with the file permissions.

Re: .js and .css scripts not working for Splunk Dashboard

niketn — Sun, 12 Apr 2020 18:15:11 GMT

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