Dashboards & Visualizations

Why are tokens set by a javascript file not working correctly when I load a dashboard?

andrewtrobec
Motivator

Hello,

I am currently trying to use javascript governed tokens to manage labels on a dashboard. For now values are hardcoded within the javascript file. Here is a simplified version that sets a label Company:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function ($, mvc) {
    var def_tok = mvc.Components.get("default");
    var sub_tok = mvc.Components.get("submitted");

    def_tok.set("lbl_company","Company");
    sub_tok.set("lbl_company","Company");
});

This script loadLabels.js is set to run when the dashboard is loaded, and the label name is used for a dashboard input:

<form script="loadLabels.js">
    ...
    <input type="multiselect" token="tok_company">
        <label>$lbl_company$</label>
        ...
    </input>
    ...
</form>

The javscript file seems to load correctly but the only issue is that the inputs seem to load before the labels, so the result is a dashboard with label-less inputs. If I click the Edit button on the dashboard the label loads and I can Cancel out of edit mode and continue to use it until I refresh the dashboard, but obviously this is not a definitive solution.

Here are two screenshots of the input: one upon loading the dashboard where the label doesn't load and one after I click on Edit and Cancel buttons:

alt text

Is there any trick I can use to ensure that the label loads correctly first time around? For reference I am using Splunk 7.1.4.

Thanks and best regards,

Andrew

0 Karma

Federico92
Path Finder

Hi Andrew

Try to add this code to your stylesheet

label {
display: block !important;
}

It force splunk to visualize your label even where you're refreshing your dashboard. Without it, the display option for fieldset's inputs is set by default as "none"

Good Luck!!

0 Karma

niketn
Legend

@andrewtrobec try the following run anywhere example. I have used <init> section to set the token for multiselect lavel. Which you can set via Simple XML JS extension as well.

I have created an empty label for the multi-select i.e. <label></label> and then used <html><panel> to create my own div with multi-select label. Finally based on the multi-select position I have used <style> tag to re-position label div above the multi-select through CSS override.

Please try out and confirm!

 <form>
  <label>Multiselect with token based label</label>
  <init>
    <set token="tokMyMultiSelectLabel">My Initial Label</set>
  </init>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <html>
        <div id="my_multiselect_label">$tokMyMultiSelectLabel$</div>
        <style>
          #my_multiselect_label{
            position: absolute;
            top: -90px;
          }
        </style>
      </html>
      <input depends="$tokMyMultiSelectLabel$" id="myMultiSelect" type="multiselect" token="field1">
        <label></label>
        <choice value="all">All</choice>
        <choice value="alpha">Alpha</choice>
        <choice value="beta">Beta</choice>
        <delimiter> </delimiter>
      </input>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

andrewtrobec
Motivator

@niketnilay This works well! What would you suggest with multiple inputs? I've taken your run anywhere and added a second input:

<form>
   <label>Multiselect with token based label</label>
   <init>
     <set token="tokMyMultiSelectLabel">My Initial Label</set>
     <set token="tokMyMultiSelectLabel2">My Initial Label 2</set>
   </init>
   <fieldset submitButton="false"></fieldset>
   <row>
     <panel>
       <html>
         <div id="my_multiselect_label">$tokMyMultiSelectLabel$</div>
         <style>
           #my_multiselect_label{
             position: absolute;
             top: -90px;
           }
         </style>
       </html>
       <input depends="$tokMyMultiSelectLabel$" id="myMultiSelect" type="multiselect" token="field1">
         <label></label>
         <choice value="all">All</choice>
         <choice value="alpha">Alpha</choice>
         <choice value="beta">Beta</choice>
         <delimiter> </delimiter>
       </input>

       <html>
         <div id="my_multiselect_label2">$tokMyMultiSelectLabel2$</div>
         <style>
           #my_multiselect_label2{
             position: absolute;
             top: -90px;
           }
         </style>
       </html>
       <input depends="$tokMyMultiSelectLabel2$" id="myMultiSelect2" type="multiselect" token="field2">
         <label></label>
         <choice value="all2">All2</choice>
         <choice value="alpha2">Alpha2</choice>
         <choice value="beta2">Beta2</choice>
         <delimiter> </delimiter>
       </input>
     </panel>
   </row>
 </form>

Obviously this puts one label under the other which means that it's not lined up with the second input. I suppose I should add a new panel on the same row. Is that what you'd do?

0 Karma

roelscholte
New Member

Hi,

This is how I did it, without any tokens:

add id attribute to your input:

<form script="loadLabels.js">
     ...
     <input type="multiselect" id="company">
         ...
     </input>
     ...
 </form>

And use prepend in your .js:

$("#company").prepend('<label>Company</label>');
0 Karma

andrewtrobec
Motivator

@roelscholte I tried doing this but it does not add the label. Instead, the input field just displays the name of the token in place of the label. Btw, I removed the <label> tag completely from the dashboard XML assuming that the javascript would add it.

0 Karma

Kawtar
Path Finder

Hello @andrewtrobec,

You should clear the cache in SplunkWeb by calling the bump endpoint:
https://mysplunkinstall/en-US/_bump

replace mysplunkinstall by your hostname and then click on button bump and refresh your dashboard

Let me know if it's works or not.

andrewtrobec
Motivator

@Kawtar Thanks for the suggestion, but unfortunately this does not work.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...