Solved: How do I get dashboard "depends" param to be honor...

lmlamanna · ‎10-04-2018

This is my first attempt using custom JavaScript in a dashboard, and I am not well versed in JavaScript either. So I am hoping this is an easy fix.

I have a token I am setting with messages from the REST calls executed within the JavaScript. The token is being set and I can see the messages in the dashboard. However, if I add a "depends" parameter to the row it is not being displayed when the token is set. How do I get the row to re-render and honor the depends param after the token is set?

XML Snippet:

<row id="errorMessages" depends="$errorMessages$">
    <html>
        <p>$errorMessages$</p>
    </html>
</row>

JavaScript:

require([
    "underscore",
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
    ],
    function(_, $, mvc, TableView) {
        var tokensDefault= mvc.Components.get("default");

        $(document).on('click', '#submitButton', function(e) {
            e.preventDefault();
            var record={"keyType": "nidDetail"};
            var keySet=0;
            record.nid={};
            record.circuit={};
            record.misc={};
            $('form *').filter(':input').each(function(){
                var value = $(this).val();
                var field = $(this).attr('name');
                var shortField;
                if (field === undefined || field === null) {
                    console.log("Skipping: " + field + " = " + value);
                } else if (value === undefined || value === null || value === "") {
                    console.log("Skipping: " + field + " = " + value);
                } else if(field.match(/^nid/)){
                    shortField=field.replace("nid.","");
            record.nid[shortField] = value;
                } ...
            });

            /* Use the request method to send a REST POST request
             to the storage/collections/data/{collection}/ endpoint */
            serviceDev.get("storage/collections/data/dtsKvStore/" + encodeURIComponent(record._key),{},function(err, response){
                if (err){
                   serviceDev.request(
                        "storage/collections/data/dtsKvStore",
                        "POST",
                        null,
                        null,
                        JSON.stringify(record),
                        {"Content-Type": "application/json"},
                        function(err, response){
                            if(err){
                                tokensDefault.set('errorMessages', "dtsKvStore Update Failed With Following Error:  " + err);
                            } else {
                                tokensDefault.set('errorMessages', "dtsKvStore Update Succeeded for " + record.nid['hostname']);
                            }
                        }
                    );
                }
                summaryTableSearch.startSearch();
                $('form *').filter(':input').each(function(){
                    $(this).val('');
                });
            });
        });
    }
);

jeffland · ‎10-05-2018

Using the default token model won't trigger the code that makes depends and the like work. If you use the submitted token model, everything should work fine. Sample dashboard and code:

<form script="file.js">
  <label>Depend on token set from js</label>
  <row>
    <panel>
      <html>
        <div>
          <a id="submit" href="#">Toggle second row</p>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$token$">
    <panel>
      <html>
        <div>
          <p>Hello World</p>
        </div>
      </html>
    </panel>
  </row>
</form>

file.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc) {
    // This line right here:
    var tokensDefault = mvc.Components.get("submitted");
    $(document).on('click', '#submit', function (e) {
        if (tokensDefault.get('token') == 'enable') {
            tokensDefault.unset('token');
        } else {
            tokensDefault.set('token', 'enable');
        }
    });
});
//# sourceURL=file.js

View solution in original post

jeffland · ‎10-05-2018

Using the default token model won't trigger the code that makes depends and the like work. If you use the submitted token model, everything should work fine. Sample dashboard and code:

<form script="file.js">
  <label>Depend on token set from js</label>
  <row>
    <panel>
      <html>
        <div>
          <a id="submit" href="#">Toggle second row</p>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$token$">
    <panel>
      <html>
        <div>
          <p>Hello World</p>
        </div>
      </html>
    </panel>
  </row>
</form>

file.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc) {
    // This line right here:
    var tokensDefault = mvc.Components.get("submitted");
    $(document).on('click', '#submit', function (e) {
        if (tokensDefault.get('token') == 'enable') {
            tokensDefault.unset('token');
        } else {
            tokensDefault.set('token', 'enable');
        }
    });
});
//# sourceURL=file.js

lmlamanna · ‎10-08-2018

Thanks jeffland for your insight. This put me on the right track to figuring out what I needed to do . Your suggestion of using submitted rather than default did make the depends work as expected. However, the value of my token was not being passed. I would only get $errorMessages$ displayed in the row. I decided to use a combination of the two and I am getting what I need!

I am setting the errorDisplay token with submitted and errorMessages token with default and it is working marvelously!

<row depends="$errorDisplay$">
    <panel>
    <html>
      <p>$errorMessages$</p>
    </html>
    </panel>
  </row>

How do I get dashboard "depends" param to be honored on row when token is set by JavaScript?

Welcome to the Splunk Community!

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Adoption of RUM and APM at Splunk