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

[arkadyz1]

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.

[arkadyz1 · Accepted solution]

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.