Why are tokens set by a javascript file not workin...

andrewtrobec · ‎01-03-2020

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:

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

Federico92 · ‎06-01-2021

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!!

niketn · ‎01-03-2020

@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!!!"

andrewtrobec · ‎01-08-2020

@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?

roelscholte · ‎01-03-2020

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>');

andrewtrobec · ‎01-03-2020

@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.

Kawtar · ‎01-03-2020

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 · ‎01-03-2020

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

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

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor