Dashboards & Visualizations

Setting text input with javascript

sassofrasso
Loves-to-Learn

Hello everyone! 
I'm trying to create a dashboard and set some tokens through javascript.
I have some html text inputs and I want that, on the click of a button, they set the corresponding tokens to the inputted value. 
However, when I try to click again the button, the click event doesn't trigger. Can you help me?

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
    
    function setToken(name, value) {
      mvc.Components.get("default").set(name, value);   
      mvc.Components.get('submitted', {create: true}).set(name, value);    
    }
    /* ----------------------- */
    let prefix = mvc.Components.get("default").get('personal_input_prefix') ?? "personal_";

    // Setting tokens for Inputs with prefix ${prefix}

    $('#personal_submit').on('click', function(e){
        e.preventDefault();        
        console.log("CLICKED");
        let input_text = $("input[type=text]");
        for (let element of input_text) {     
            let id = element.id;            
            if (id !== undefined && id.startsWith(prefix)){
                let value = element.value;
                setToken(`${id}_token`, value);                     // <---
                document.getElementById(`${id}_token_id`).innerHTML = value;
                // Set token ${id}_token to value ${value}
            }
        }        
    });
});

 

 

 DASHBOARD EXAMPLE:

 

<form version="1.1" theme="light" script="test.js">
  <label>Dashboard test</label> 
    <row>
    <panel>
      <html>
      <input id="personal_valueA" type="text"/>
      <input id="personal_valueB" type="text"/>
      <button id="personal_submit" class="primary-btn">Click</button>
      <br/>
      Show:
      <p id="personal_valueA_token_id">$personal_valueA_token$</p>
      <p id="personal_valueA_token_id">$personal_valueB_token$</p>
    </html>
    </panel>
  </row>
</form>

 

 

Labels (2)
0 Karma

bowesmana
SplunkTrust
SplunkTrust

Do you get the CLICKED message in the console log or any other message? I assume you've looked at the dashboard examples for setting tokens on buttons, as your code is similar.

If you add logging to the base code, does anything get logged at all.

0 Karma

sassofrasso
Loves-to-Learn

No, the second time i click on the button it does not log "CLICKED" nor anything at all. It is as if I'm not clicking the button, and it doesn't print errors nor warnings

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Other than debugging the JS, I can only question if you need to do this in JS - Splunk inputs do this out of the box. Are you using JS for a specific reason that the out of the box stuff does not handle?

0 Karma

sassofrasso
Loves-to-Learn

I am using JS because I need to embed the input in an html section to perform further customizations, and Splunk input doesn't allow me to do them.

Regarding the JS, the problem has something to do with the button and the setToken function: if i comment the line 

setToken(`${id}_token`, value);                     // <---

 the button responds to each click without problems, but when I decomment the line it triggers only on the first button click and then no more. I cannot understand why

0 Karma

bowesmana
SplunkTrust
SplunkTrust

In Developer tools you posted example gives this

bowesmana_0-1737578605602.png

 

0 Karma

sassofrasso
Loves-to-Learn

Thanks for the observation. The problem is that, even if I comment the highlighted row, the event of clicking the submit button works only the first time I click, the following times it doesn't event print "CLICKED". I'm more interested in solving that issue, because I don't understand why it is working like that.

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Interesting - I see now - yes, you can see that at the start there are event listeners for the button

bowesmana_0-1737670409928.png

but once the first call to set(name, value) in SetToken is called, it will remove the event listener, when this trigger() function is called as the value changes. Don't know why, but it doesn't get reset, so there is no longer an event listener

bowesmana_1-1737672393006.png

 

0 Karma

bowesmana
SplunkTrust
SplunkTrust

Seems like your problem is that the ID in your XML is wrong - you have duplicated 

      <p id="personal_valueA_token_id">$personal_valueA_token$</p>
      <p id="personal_valueB_token_id">$personal_valueB_token$</p>

Your original duplicates the personal_valueA_token_id

      <p id="personal_valueA_token_id">$personal_valueA_token$</p>
      <p id="personal_valueA_token_id">$personal_valueB_token$</p>
0 Karma
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In January, the Splunk Threat Research Team had one release of new security content via the Splunk ES Content ...

Expert Tips from Splunk Professional Services, Ensuring Compliance, and More New ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Observability Release Update: AI Assistant, AppD + Observability Cloud Integrations & ...

This month’s releases across the Splunk Observability portfolio deliver earlier detection and faster ...