Security

What to import (require) in my custom JavaScript to avoid error "Uncaught reference: Splunk is not defined"?

arkadyz1
Builder

Hello,
I'm trying to customize my page depending on the user. I found an example (hiding the navbar selectively - needed something else but wanted to start somewhere) with this code:

// show the jobs and alerts links for the given usernames.
 var allowedUsers = ["admin"];
 if (allowedUsers.indexOf(Splunk.util.getConfigValue("USERNAME")) !=-1) {
     $(".navbar").show();
     // $(".AccountBar .job_manager_opener").show();
 } 
 //otherwise finish the job started by the css, and hide the little divider
 //lines too. 
 else {
     $(".navbar").parent().next().hide();
     // $(".AccountBar .job_manager_opener").parent().next().hide();
 }

Unfortunately, this code fails with "Uncaught reference: Splunk is not defined" message. What should I add to my script to define it? The script is in $SPLUNK_HOME/etc/apps/myapp/appserver/static. I'm using Splunk 6.2.1.

0 Karma
1 Solution

arkadyz1
Builder

OK, I decided to look at other apps. I took a look at $SPLUNK_HOME/etc/apps/search/appserver/static/status_dashboard.js and went on to mimic the approach.
Here is what I have in my dashboard.js right now - hides Settings, Activity and Help dropdowns in the navigation bar from all users but admin:

var allowedUsers = ["admin"];
require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function(){
 if (allowedUsers.indexOf(Splunk.util.getConfigValue("USERNAME")) ==-1) {
    $(document).ready(function() {
        var x = document.createElement("STYLE");
        var t = document.createTextNode(".shared-splunkbar-activitymenu{display:none !important;}.shared-splunkbar-systemmenu{display:none !important;}.shared-splunkbar-helpmenu{display:none !important}");
        x.appendChild(t);
        document.head.appendChild(x);
    });
}});

I still don't know which of the splunkjs/mvc and splunkjs/mvc/simplexml/ready! is responsible for defining that Splunk object, but it's working for me now.

View solution in original post

arkadyz1
Builder

OK, I decided to look at other apps. I took a look at $SPLUNK_HOME/etc/apps/search/appserver/static/status_dashboard.js and went on to mimic the approach.
Here is what I have in my dashboard.js right now - hides Settings, Activity and Help dropdowns in the navigation bar from all users but admin:

var allowedUsers = ["admin"];
require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function(){
 if (allowedUsers.indexOf(Splunk.util.getConfigValue("USERNAME")) ==-1) {
    $(document).ready(function() {
        var x = document.createElement("STYLE");
        var t = document.createTextNode(".shared-splunkbar-activitymenu{display:none !important;}.shared-splunkbar-systemmenu{display:none !important;}.shared-splunkbar-helpmenu{display:none !important}");
        x.appendChild(t);
        document.head.appendChild(x);
    });
}});

I still don't know which of the splunkjs/mvc and splunkjs/mvc/simplexml/ready! is responsible for defining that Splunk object, but it's working for me now.

Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...