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!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...