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!

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...

Splunk AppDynamics Agents Webinar Series

Mark your calendars! On June 24th at 12PM PST, we’re going live with the second session of our Splunk ...

SplunkTrust Application Period is Officially OPEN!

It's that time, folks! The application/nomination period for the 2025 SplunkTrust is officially open! If you ...