topic Re: Splunk Javascript - Calling a function in a JS from another JS in Dashboards & Visualizations

Splunk Javascript - How to call a function in a JS from another JS?

garenilla — Thu, 14 Apr 2022 17:01:59 GMT

Hello splunkers!

I'm still learning how javascript works and how it works with splunk and I'm trying to do something simple, calling a function from one JS, like a library, but I don´t know what I'm doing wrong.
In this case I have a javascript called myLib.js which is this

function doAlert(){
       alert("It works!");
}

And I have another javascript called myJS.js which is like this

require(["./myLib.js",
        "splunkjs/mvc",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/simplexml/ready!"
    ], function (mvc) {

    /* Stuff */

    $(document).ready(function () {
        console.log("Document Ready!");
        /* More stuff */

        $("#myButton").on("click", doAlert);
        console.log("Document Ready Done!");
    });

});

On my xml I also have a button myButton but the problem is that I'm getting this messages on console.
http://requirejs.org/docs/errors.html#scripterror
at makeError (eval at module.exports (common.js:248), :166:17)
at HTMLScriptElement.onScriptError (eval at module.exports (common.js:248), :1689:36)

I checked requiredjs error info but the only thing it says it's that I have an error on my script but it's only a function, I don't see any problem.

I tried to put myLib.js in script=" " tag, writting it without .js, making a var myLib = require('myLib'); but always it's the same error.
It must be something really simple but I dont see it.
Please, can you help me with this problem?

Many thanks!

Re: Splunk Javascript - Calling a function in a JS from another JS

elliotproebstel — Fri, 23 Feb 2018 17:33:04 GMT

I think the docs here will do a good job of walking you through what you're trying to do:
http://dev.splunk.com/view/webframework-developapps/SP-CAAAESY
This is also a really good previous answer that walks through how to integrate with require:
https://answers.splunk.com/answers/482069/how-to-include-js-file-inside-another-js-file.html

Start by looking at how to integrate your code in here:

 require(["./myLib.js",
         "splunkjs/mvc",
         "splunkjs/mvc/searchmanager",
         "splunkjs/mvc/simplexml/ready!"
     ], function (mvc) {...

I believe the only library you can import in require without adding the name into the function argument list is splunkjs/mvc/simplexml/ready!. So that snippet above should probably be more like this:

 require(["./myLib.js",
         "splunkjs/mvc",
         "splunkjs/mvc/searchmanager",
         "splunkjs/mvc/simplexml/ready!"
     ], function (myLib, mvc, SearchManager) {...

and then when you want to reference the doAlert function, I believe you'll need to reference it within the myLib namespace: myLib.doAlert().

But the guides will be a great place to help you understand the nitty gritty and save you a lot of pain as you develop.

Re: Splunk Javascript - Calling a function in a JS from another JS

garenilla — Mon, 26 Feb 2018 10:48:40 GMT

Hi eliot,

thank you for the quick reply, it helped me a lot! Now I understand more about loading libraries and also I have cleaned my code.
I have been digging a little and I have found what it was wrong on my code.

First I needed to add a define([]) clause on myLib and return it.

    define(["splunkjs/mvc/simplexml/ready!"], function () {
            return myLib = (function () {
                var myLib  = {
                    doAlert: function(){
                        console.log("It Works!");
                    }
                }
                return myLib;
            })();
        });

Then on main.js I specified the route for the lib on the app

    require(["../app/myApp/myLib",
            "splunkjs/mvc",
            "splunkjs/mvc/simplexml/ready!"
        ], function (myLib,mvc) {

Finally on a more deep digging, I found where are all the js splunk use, like mvc. There are on /share/splunk/search_mrsparkle/exposed/js

Thank you for all your help!
Best regards!

Re: Splunk Javascript - Calling a function in a JS from another JS

lucacaldiero — Thu, 14 Apr 2022 14:36:22 GMT

Hello,

thanks for your example, but I am facing some difficulties in importing a little complex js file that expose some functions.

The complete code is here

This is the beginning of the js file:

!function(t, e) { "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define("cronstrue", [], e) : "object" == typeof exports ? exports.cronstrue = e() : t.cronstrue = e() }(globalThis, (function() { return (()=>{ "use strict"; var t = { 794: (t,e,n)=>{ Object.defineProperty(e, "__esModule", { value: !0 }), e.CronParser = void 0 [...]

The end of the code is this:

, e = {}; function n(r) { var o = e[r]; if (void 0 !== o) return o.exports; var i = e[r] = { exports: {} }; return t[r](i, i.exports, n), i.exports } var r = {}; return (()=>{ var t = r; Object.defineProperty(t, "__esModule", { value: !0 }), t.toString = void 0; var e = n(728) , o = n(336); e.ExpressionDescriptor.initialize(new o.enLocaleLoader), t.default = e.ExpressionDescriptor; var i = e.ExpressionDescriptor.toString; t.toString = i } )(), r ); })(); });

How can I import this, please?

Thanks a lot in advance.

Luca Caldiero