How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

david_poulin — Wed, 27 May 2015 19:24:05 GMT

Hi,

i have a HTML dashboard converted from xml....and i have checkboxes group with around 25-27 checkboxes, and when the dashboard is loaded, i want that checkboxes checked automatically so the chart contains all possibilities

I tried by using Javascript...i took a look at the splunkjs documentation, but found nothing that worked. Every time the code is executed before the checkbox choices are loaded, so the code has no effect.

Here is my full dashboard code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Backlogs | Splunk</title>
    <link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@241817/css/build/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/en-US/static/@241817/css/build/pages/dashboard-simple-bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="https://splunk.canam.ws/canamvault/backlog-custom-layout.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 splunk-header">
        <div id="placeholder-splunk-bar">
            <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></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>Backlogs</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panelServerInput" class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">
               <h2 class="panel-title">Servers</h2>
                <div class="fieldset">
                  <button type="button" onclick="checkAll('#panelServerInput .checkbox .btn .icon-check','btnCheckServers')" id="btnCheckServers" class="btn">Check All</button>
                    <div class="input input-checkboxgroup" id="input1">
        </div>
                </div>

            </div>
        </div>
        <div id="panel2" class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Backlogs per server over the last 7 days (freq=60min)</h2>

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element chart" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row2" class="dashboard-row dashboard-row2">
        <div id="panelFoldersInput" class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">
               <h2 class="panel-title">Replicated folder</h2>
                <div class="fieldset">
                  <button type="button" onclick="checkAll('#panelFoldersInput .checkbox .btn .icon-check','btnCheckFolders')" id="btnCheckFolders" class="btn">Check All</button>
                    <div class="input input-checkboxgroup" id="input2">
        </div>
                </div>

            </div>
        </div>
        <div id="panel4" class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">
                <h2 class="panel-title">Backlogs per replicated folder over the last 7 days (freq=60min)</h2>

                <div class="panel-element-row">
                    <div id="element2" class="dashboard-element chart" style="width: 100%">
                        <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/dashboard/panelref",
    "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/simplexml/eventhandler",
    "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,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        FormUtils,
        EventHandler,
        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",
            "search": "index=\"vaultlogs\" earliest=-7d | spath Message  | search Message=BacklogsPerServer | spath Properties.BL.ReceivingMemberLocationName output=location | where $servers$ | timechart span=1h sum(Properties.BL.Backlog) by Properties.BL.ReceivingMemberServerOnly limit=100",
            "latest_time": "$latest$",
            "earliest_time": "-7d",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        var search2 = new SearchManager({
            "id": "search2",
            "search": "index=\"vaultlogs\" earliest=-7d  | spath Message | search Message=ReplicationCheckerTask $replicatedFolder$ | spath Properties.RC.LocationName output=location  |where $servers$ | timechart span=1h sum(Properties.RC.Count) by Properties.RC.FolderNameWLocation limit=20",
            "latest_time": "$latest$",
            "earliest_time": "-7d",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

        new SearchManager({
            "id": "search3",
  "search": "index=\"vaultlogs\"  earliest=-24h   | spath Message   | search Message=SplunkTaskServerList Properties.ServerInfo.ServerName!=\"dc-apps17\" | stats  count by Properties.ServerInfo.LocationName Properties.ServerInfo.ServerName",
            "latest_time": "now",
            "earliest_time": "-24h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true});

        var search4 = new SearchManager({
            "id": "search4",
            "search": "index=\"vaultlogs\" | spath Message  | search Message=ReplicationCheckerTask | spath Properties.RC.Count output=nbr | where nbr>0 | stats count  by Properties.RC.FolderName",
            "latest_time": "now",
            "earliest_time": "-7d",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true});



        //
        // SPLUNK HEADER AND FOOTER
        //

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

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


        //
        // DASHBOARD EDITOR
        //

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

        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new ChartElement({
            "id": "element1",
            "charting.chart.style": "shiny",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.bubbleMaximumSize": "50",
            "charting.chart": "line",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "collapsed",
            "charting.layout.splitSeries": "0",
            "charting.axisY.scale": "linear",
            "charting.axisTitleY2.visibility": "visible",
            "charting.legend.placement": "right",
            "charting.chart.stackMode": "default",
            "charting.drilldown": "all",
            "charting.chart.nullValueMode": "zero",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "false",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisX.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleY.text": "Backlogs",
            "charting.chart.bubbleSizeBy": "area",
            "resizable": true,
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();


        var element2 = new ChartElement({
            "id": "element2",
            "charting.chart.style": "shiny",
            "charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
            "charting.chart.bubbleMaximumSize": "50",
            "charting.chart": "line",
            "charting.chart.bubbleMinimumSize": "10",
            "charting.axisTitleX.visibility": "collapsed",
            "charting.layout.splitSeries": "0",
            "charting.axisY.scale": "linear",
            "charting.axisTitleY2.visibility": "visible",
            "charting.legend.placement": "right",
            "charting.chart.stackMode": "default",
            "charting.drilldown": "all",
            "charting.chart.nullValueMode": "zero",
            "charting.axisY2.scale": "inherit",
            "charting.axisY2.enabled": "false",
            "charting.chart.sliceCollapsingThreshold": "0.01",
            "charting.axisX.scale": "linear",
            "charting.axisLabelsX.majorLabelStyle.rotation": "0",
            "charting.axisTitleY.visibility": "visible",
            "charting.axisTitleY.text": "Backlogs",
            "charting.chart.bubbleSizeBy": "area",
            "resizable": true,
            "charting.axisLabelsX.majorLabelStyle.overflowMode": "ellipsisNone",
            "managerid": "search2",
            "el": $('#element2')
        }, {tokens: true, tokenNamespace: "submitted"}).render();




        //
        // VIEWS: FORM INPUTS
        //
        var input1 = new CheckboxGroupInput({
            "id": "input1",
            "choices": [],
            "valueSuffix": "\"",
            "searchWhenChanged": true,
            "labelField": "Properties.ServerInfo.LocationName",
            "delimiter": " OR ",
            "valueField": "Properties.ServerInfo.LocationName",
            "valuePrefix": "location=\"",
            "value": "$form.servers$",
            "managerid": "search3",
            "el": $('#input1')
        }, {tokens: true}).render();

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


        var input2 = new CheckboxGroupInput({
            "id": "input2",
            "choices": [],
            "valueSuffix": "\"",
            "searchWhenChanged": true,
            "labelField": "Properties.RC.FolderName",
            "delimiter": " OR ",
            "valueField": "Properties.RC.FolderName",
            "valuePrefix": "Properties.RC.FolderName=\"",
            "value": "$form.replicatedFolder$",
            "managerid": "search4",
            "el": $('#input2')
        }, {tokens: true}).render();

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



        // 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="https://splunk.canam.ws/canamvault/custom_layout_width.js"></script>
</body>
</html>

There is probably something quite simple to add a event when all panels,inputs,chart...is loaded..

anyone could help me...thanks!!

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

tincupchalice — Wed, 27 May 2015 19:56:49 GMT

Did you try adding this to the initial body js, or onload()?

document.getElementById("btnCheckServers").click();

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

david_poulin — Wed, 27 May 2015 20:04:47 GMT

Yes i try with the onload event off the body...tags...but a this point no panel is displayed on the dashboard..so when we try to get the elemeent...there's probably zero element..so nothing to click.

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

lweber — Wed, 27 May 2015 20:21:37 GMT

just guessing, because its a pain to read your code above (do you mind reformatting it (remove the ``, highlight your code and click on the 'code' icon)?)

you might also want to try the jQuery approach:

$("input[type='checkbox']").attr("checked", "checked")

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

ppablo — Wed, 27 May 2015 21:16:58 GMT

Just edited the post to make it easier for everyone to read. Cheers!

Patrick

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

david_poulin — Thu, 28 May 2015 12:07:53 GMT

Thank ppablo...

topic Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads? in Dashboards & Visualizations

How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?

Re: How to edit my code to have all checkboxes automatically checked when my HTML dashboard loads?