6

I am working with SharePoint Online.

I have a requirement where I have to add Quick Launch Navigation Item and call JavaScript function on click of the item. I am using code shown here.

Following is my code:

var oQuickLaunchColl;
function addNavigation() {
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    oQuickLaunchColl = oWeb.get_navigation().get_quickLaunch();
    var oNavigation = new SP.NavigationNodeCreationInformation();
    oNavigation.set_title("Start new Chat");
    oNavigation.set_url('javascript:callNavigationAction()');
    oQuickLaunchColl.add(oNavigation);
    clientContext.load(oQuickLaunchColl);
    clientContext.executeQueryAsync(QuerySuccess1, QueryFailure1);
}
function QuerySuccess1() {
    //Get the item count of navigation nodes and loop through it  
    var itemCount = oQuickLaunchColl.get_count();
    console.log("The navigation node details are:");
    for (var i = 0; i < itemCount; i++) {
        var title = oQuickLaunchColl.get_item(i).get_title();
        console.log(title);
    }
}
function QueryFailure1(sender, args) {
    console.log('Request failed' + args.get_message());
}

Here I got error,

The URL format was invalid.

Note: I have also added item in Edit Control block of list item, also new action in Site Action menu, there I have used following code to call JavaScript function,

set_url('javascript:callNavigationAction()')

Here, my JavaScript function executed.

But when I tried the same approach for calling JavaScript function from Quick Launch Navigation it failed.

How can I call JavaScript function from Quick Launch Navigation item?

  • So, just to clarify: in your actual code you don't have oNavigation.set_url(testt); but instead oNavigation.set_url('javascript:callNavigationAction()');? – moe Jun 8 '17 at 11:57
  • yes, the actual code has javascript:callNavigationAction() value. – Trimantra Software Solution Jun 8 '17 at 11:58
  • But why is it defined as a variable in the first place? – moe Jun 8 '17 at 12:55
  • That make no difference. Still I updated the code for more clarification.... – Trimantra Software Solution Jun 8 '17 at 13:01
5

That JSOM API only accepts local references or full URI external references

So one option is to create a distinct URI that is accepted:

function addNavigation(title,url) {
    var clientContext = new SP.ClientContext();
    var oQuickLaunchColl = clientContext.get_web().get_navigation().get_quickLaunch();
    var oNavigation = new SP.NavigationNodeCreationInformation();
    oNavigation.set_title(title);
    oNavigation.set_url(url);
    oNavigation.set_isExternal();
    oQuickLaunchColl.add(oNavigation);
    clientContext.load(oQuickLaunchColl);
    clientContext.executeQueryAsync(
        function(){
            var itemCount = oQuickLaunchColl.get_count();
            for (var i = 0; i < itemCount; i++) {
                var item=oQuickLaunchColl.get_item(i);
                console.log({
                    title : item.get_title(),
                    url:item.get_url()
                });
            }
        }
        ,
        function QueryFailure1(sender, args) {
            console.error('Request failed' + args.get_message());
        }
    );
}
addNavigation('test2',"http://myjavascript.test2");

And then

on every page load!

Execute script that rewrites the HREF tag:

document.querySelectorAll("a[href*='myjavascript']").forEach(function(element){
   var title=element.href.split('myjavascript.')[1].split('/')[0];
   console.info(title);
   if(title==='test2') element.href="javascript:alert('Hello World!')";
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.