Re: Custom javascript doesn't work

catta99 · ‎10-19-2024

Hi,

i am trying to use custom javascript file to customize some button actions in my dashboard, but it doesn't work and i don't know why. I'm using the last version of Splunk enterprise

My custom script is in the folder $SPLUNK_HOME/etc/apps/app_name/appserver/static/.

I have tried to restart Splunk web, use the bumps button but nothing works.

Can anyone help me?

Simple xml dashboard code

<form version="1.1" theme="dark" script="button.js">
  <search>
    <query>
      
      | makeresults | eval field1="test", field2="test1", field3="lll", field4="sgsgsg"
    </query>
    <earliest></earliest>
    <latest>now</latest>
    <done>
      <set token="field1">$result.field1$</set>
      <set token="field2">$result.field2$</set>
      <set token="field3">$result.field3$</set>
      <set token="field4">$result.field4$</set>
    </done>
  </search>
  <label>stacked_inputs</label>
  <fieldset submitButton="false" autoRun="true"></fieldset>
  <row>
    <panel>
      <title>title</title>
      <input id="test_input1" type="text" token="field1">
        <label>field1</label>
        <default>$field1$</default>
        <initialValue>$field1$</initialValue>
      </input>
      <input id="test_input2" type="text" token="field2">
        <label>field2</label>
        <default>$field2$</default>
        <initialValue>$field2$</initialValue>
      </input>
      <html>
            
            <style>
              #test_input2 {
                  padding-left: 30px !important; 
                  
                  }
              
              
            </style>
            
          </html>
    </panel>
  </row>
  <row>
    <panel>
      <input id="test_input3" type="text" token="field3">
        <label>field3</label>
        <default>$field3$</default>
        <initialValue>$field3$</initialValue>
      </input>
      <input id="test_input4" type="text" token="field4">
        <label>field4</label>
        <default>$field4$</default>
        <initialValue>$field4$</initialValue>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <form>
         <div>
           <div>
            <label>Password</label>
            <input type="text" value="$field4$"/>
            <br/>
            <input type="password" id="exampleInputPassword1" placeholder="Password"/>
          </div>
           </div>
           <button type="submit" class="btn btn-primary">Submit</button>
           </form>
           <button onclick="test()">Back</button>
           <button onclick="test1()">Back1</button>
           <button id="back" data-param="test">Back2</button>
      </html>
    </panel>
  </row>
</form>

Javascript code

As you can see i have tried different methods

Thanks for your help.

kamlesh_vaghela

@catta99

Please check below code

function test() {
    console.log("in test");
}

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {


    console.log("hello 2");
    function test1() {
        console.log("in test1");
    }
    
    $(document).ready(function () {
        $("#back").click(function(){
            alert("button");
            var param = $(this).data("param");
            console.log(param); 
            console.log("click"); 
            history.back();
        });
        $("#backtest").click(function(){
            test();
            alert("Back");
        });
        $("#back1test").click(function(){
            test1();
            alert("Back1");
        });
    })
});

Splunk Web Framework works little different from regular or Native Jquery/Javascript behaviour specially on HTML element. So when you write

It may not work bcoz when you run the dashboard, the Dashboard XML is rendering into complied version of JS, CSS and HTML. After all this process it will allow developer to add custom JS, CSS and even custom components through custom JS like button_test.js. So all customisation and the element event handleling will be define in this JS only.

Suggestion: Using below code is not best practive. Just code what you want instead of

this.history.back();

I hope this will help you.

Let me know if you need further help on this.

Thanks
KV
An upvote would be appreciated if any of my replies help you solve the problem or gain knowledge.

tscroggins · ‎10-20-2024

Hi @catta99,

In your JavaScript source, you can use jQuery selectors to attach a click event handler to an object.

In this example, I define a button with id="button1" in button_test.xml and attach a click event handler in button_test.js:

<!-- button_test.xml -->
<dashboard version="1.1" theme="light" script="button_test.js">
  <label>button_test</label>
  <row>
    <panel>
      <html>
        <button id="button1">Button 1</button>
      </html>
    </panel>
  </row>
</dashboard>

// button_test.js
require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
    $("#button1").on("click", function() {
        alert("Button 1 clicked.");
    });
});

When button1 is clicked, the browser displays a dialog box with the message "Button 1 clicked."

SplunkJS is documented at https://dev.splunk.com/enterprise/docs/developapps/visualizedata/usewebframework/, where you can find example JavaScript templates.

RequireJS is documented at https://requirejs.org/docs/api.html#jsfiles, but its use is limited to the require([...], function(...) {}); shown above.

jQuery selectors are documented at https://api.jquery.com/category/selectors/.

The jQuery click event is documented at https://api.jquery.com/click/.

catta99 · ‎10-21-2024

Thanks @tscroggins , for your answer.

But i still have some big problem with javascript, because sometimes Splunk web did not load the code, sometimes the code didn't work and some times works without changing it.

I have red the documentation, i use the refresh button (http://<ip:port>/debug/refresh), i'm using my browser in incognito mode but nothing, i restar splunk web when i add a new js file. I even tried to fully restart splunk

Thank for your help

tscroggins

Hi @catta99,

To clear the server-side cache, restart splunkweb as you have done:

$SPLUNK_HOME/splunk/bin/splunk restart splunkweb

To clear the client-side cache, use your browser's cache functions or temporarily disable caching in your browser's dev tools.

To prevent splunkweb from caching source files during development, you can disable caching in web.conf and restart Splunk:

# $SPLUNK_HOME/etc/system/local/web.conf
[settings]
cacheBytesLimit = 0

The example I provided can be expanded as needed. If you're still having issues after clearing all caches, reply with a reduced SimpleXML and JavaScript example, and we'll take another look.

catta99

Hi @tscroggins, thanks for your answer,

in the documentation i have found this configuration:

minify_js = False

js_no_cache = True

cacheEntriesLimit = 0

cacheBytesLimit = 0

enableWebDebug = True

and it works.

Sometimes not but i go to /debug/refresh and click the refresh button and splunk loads the new version of the js file.

But if you have a dashboard like that

<dashboard script="MyScript.js">
<search id="MySearch">
<query>
query that take some time
</query>
</search>
<row>
<panel>
<hmtl> <button id="btn">Button </button>
</html>
</panel>
</row>

//MyScript


require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {

$("#btn").on("click", function() {

// js code
});
});

Splunk will not load the Jquery part, but if you go on "edit"->"source"->"cancel" without modifiyng anything in the dashboard source code the javascript code works.

So the problem maybe is caused because the search (id="MySearch") in the dashboard is executed in an async way?

I have read some posts on this topic but i didn't find any solution

I have tried

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
$("#MySearch").on("search:done", function(){
$("#btn").on("click", function() {

// js code
});
});
});

but nothing

tscroggins

Hi @catta99,

You probably want to start with buttons disabled and then enabled them when the dashboard's async searches are done. You can use SplunkJS to attach search:done event handlers to your searches (see below).

A complex dashboard (multiple searches, multiple buttons, etc.) may require a more complex solution. You can find more information in the SplunkJS documentation or more generally, in your favorite web development resources (or AI stack, if you use one).

<!-- button_test.xml -->
<dashboard version="1.1" theme="light" script="button_test.js">
  <label>button_test</label>
  <search id="search1">
    <query>| stats count</query>
    <earliest>-24h</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <html>
        <!-- assign a value to the disabled attribute to pass SplunkWeb's Simple XML validation -->
        <button id="button1" disabled="disabled">Button 1</button>
      </html>
    </panel>
  </row>
</dashboard>

// button_test.js
require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
    search1 = splunkjs.mvc.Components.get("search1");

    search1.on("search:done", function(properties) {
      $("#button1").prop("disabled", false);
    });

    $("#button1").on("click", function() {
        alert("Button 1 clicked.");
    });
});

Custom javascript doesn't work

using Splunk Enterprise

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation