After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?

paulgreenspan — Sat, 04 Apr 2015 03:25:21 GMT

I have created a XML dashboard and that works fine. I had splunk generate an HTML view of that dashboard so that I can add my own Javascript and CSS for a tree viewer. Now I'm working on the HTML that Splunk generated.

My question is "Where do i put the CSS and .js files on the filesystem and how do I reference the items in the HTML.

I have been using the path:

 $SPLUNK_HOME/etc/apps/-appname-/appserver/static.

What path do I add to the in the HTML to get the CSS? I have been trying:

2. To get the javascript I tried adding entries to the "LIBRARY REQUIREMENTS" section in the HTML but I did not know what to use for the path in the require([]) arrays.

Same example HTML snippets would be great.

Re: After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?

stephanefotso — Mon, 28 Sep 2020 19:23:23 GMT

Hello! your js and css files remain where they were befor you generated the Html view: $SPLUNK_HOME/etc/apps/-appname-/appserver/static. Except the html file which is automatically created into: $SPLUNK_HOME/etc/apps/-appname-/local/data/ui/html/ folder.

Take a look at the example bellow and notice how my table_cell_highlighting.css and table_cell_highlighting.js are called (at the top , and at the end of the html file respectively) in my table_cell_highlithtn_html.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Table Cell Highlighting HTML | 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/build/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/stephane_app/table_cell_highlighting.css" />
    <!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload locale-en">

<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header">
    <div id="placeholder-splunk-bar">
        <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk &gt; listen to your data">splunk<strong>&gt;</strong></a>
    </div>
    <div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Table Cell Highlighting HTML</h2>
    </div>
    <div class="fieldset">
        <div class="input input-timerangepicker" id="field1">
            <label>Select a time:</label>
        </div>
        <div class="input input-dropdown" id="field2">
            <label>index</label>
        </div>
    </div>
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">                
                <div class="panel-element-row">
                    <div class="dashboard-element table" id="highlight" style="width: 100%">
                        <div class="panel-head">
                            <h3>Table of Count Sourcetypes Between $time_range.earliest$ and $time_range.latest$ for index= $index$</h3>
                        </div>
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>

<!-- 
END LAYOUT
-->

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0 // Disable require.js load timeout
});

//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/checkboxview"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        HeaderView,
        FooterView,
        Dashboard,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        DropdownInput,
        RadioGroupInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // CheckboxView
        ) {



        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }

        //
        // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "$time_range.latest$",
            "earliest_time": "$time_range.earliest$",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "search": "index=$index$  OR index=_$index$  | stats count as total_count  by sourcetype",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});



        //
        // SPLUNK HEADER AND FOOTER
        //

        new HeaderView({
            id: 'header',
            section: 'dashboards',
            el: $('.header'),
            acceleratedAppNav: true,
            useSessionStorageCache: true
        }, {tokens: true}).render();

        new FooterView({
            id: 'footer',
            el: $('.footer')
        }, {tokens: true}).render();


        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body')
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var highlight = new TableElement({
            "id": "highlight",
            "drilldown": "none",
            "managerid": "search1",
            "el": $('#highlight')
        }, {tokens: true}).render();



        //
        // VIEWS: FORM INPUTS
        //
        var field1 = new TimeRangeInput({
            "id": "field1",
            "searchWhenChanged": true,
            "default": {"latest_time": "now", "earliest_time": "0"},
            "earliest_time": "$form.time_range.earliest$",
            "latest_time": "$form.time_range.latest$",
            "el": $('#field1')
        }, {tokens: true}).render();

        field1.on("change", function(newValue) {
            FormUtils.handleValueChange(field1);
        });

        var field2 = new DropdownInput({
            "id": "field2",
            "choices": [
                {"value": "*", "label": "All"}
            ],
            "searchWhenChanged": true,
            "labelField": "index",
            "default": "*",
            "selectFirstChoice": false,
            "valueField": "index",
            "value": "$form.index$",
            "managerid": "search2",
            "showClearButton": true,
            "el": $('#field2')
        }, {tokens: true}).render();

        field2.on("change", function(newValue) {
            FormUtils.handleValueChange(field2);
        });

        // Populating search for field 'field2'
        var search2 = new SearchManager({
            "id": "search2",
            "earliest_time": "$earliest$",
            "latest_time": "$latest$",
            "status_buckets": 0,
            "cancelOnUnload": true,
            "search": "| eventcount summarize=false index=* OR index=_*",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true});



        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
</script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/app/stephane_app/table_cell_highlighting.js" type="text/javascript"></script>
</body>
</html>

table_cell_highlighting.js

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 _(['total_count', 'active_realtime_searches']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);

            // Apply interpretation for number of historical searches
            if (cell.field === 'total_count') {
                if (value > 400.00) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 100.00) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value < 100.00) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }

            // Apply interpretation for number of realtime searches
            if (cell.field === 'active_realtime_searches') {
                if (value > 1) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // 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).addClass(this.className);
           // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });

});

table_cell_highlighting.css

/* Cell Highlighting */

/* 
#highlight td {
    background-color: #c1ffc3 !important;
}
*/

#highlight td.range-low {
    color: #C0D9D9;


}

#highlight td.range-elevated {
    background-color: #ffc57a !important;
    font-weight: bold;
    color: blue;
}

#highlight td.range-severe {
    background-color: #d59392 !important;
    font-weight: bold;
    color: yellow;
}

Re: After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?

ewmin3m — Sat, 27 May 2017 00:11:16 GMT

omg i've been searching for the syntax of the script src="file location" for ages thank you greatly sir 😄

topic Re: After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML? in Dashboards & Visualizations

After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?

Re: After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?

Re: After converting an XML dashboard to HTML, where do I add CSS and javascript files on the filesystem and reference the items in the HTML?