none
How can CSOM set a left navigation links to open in a new tab?

    Question

  • We programmatically, via CSOM, add a bunch of links to the left hand side set of Navigation links on our sites/sub-sites. These sites are all on O365 SharePoint. 

    We have 3 of them that we would like to open in a new tab.  Now we can go in manually to Site Settings > Navigation > Structural Navigation: Editing and Sorting. Select the link in the list, and click the Edit option. From here a dialog opens and there is a checkbox for "Open link in new window". 

    As we have hundreds of school Team Sites to do this to, the manual option isn't popular.  We did try the javascript option, but that broke the save option when end uses made changes to the list of links.

    Are there any programmatic solutions to this problem? 

    burndorfer


    Friday, April 28, 2017 1:36 AM

All replies

  • Hi Karl,

    Below is a CSOM code demo to update a specific link in Quick Launch to open in a new tab, you can modify the code to loop through all the links in Quick Launch and then update the links one by one. In addition, you can get the Url property for the links first and then construct the new Url property with the JavaScript function to update the links.

                string url = "https://example.sharepoint.com/sites/testsite";
                string username = "Office365User@example.com";
                string userpass = "password";
                using (ClientContext clientContext = new ClientContext(url))
                {
                    Console.WriteLine("Connecting to {0} as {1}", url, username);
                    SecureString passWord = new SecureString();
                    foreach (char c in userpass.ToCharArray()) passWord.AppendChar(c);
                    clientContext.Credentials = new SharePointOnlineCredentials(username, passWord);
                    Web web = clientContext.Web;
                    clientContext.Load(web);
                    NavigationNodeCollection quickLaunchColl = web.Navigation.QuickLaunch;
    
                    clientContext.Load(quickLaunchColl);
                    clientContext.ExecuteQuery();
    
                    NavigationNode NavigationNode = quickLaunchColl.Where(n => n.Title == "Link1").FirstOrDefault();
                    NavigationNode.Url = "javascript:window.open('http://bing.com', '_blank'); void(0)";
                    NavigationNode.Update();
                    clientContext.ExecuteQuery();
                }
    

    Best Regards,

    Victoria


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, May 1, 2017 8:02 AM
    Moderator
  • Hi Karl,

    private static void UpdateNode(string url)
            {
             ClientContext context = new ClientContext(url);
             context.Load(context.Web);
             //Fetching website's Left Navigation node collection

              NavigationNodeCollection qlNavNodeColl = context.Web.Navigation.QuickLaunch;

              //Fetching node which needs to be updated

              IEnumerable<NavigationNode> ModifyNode = context.LoadQuery(qlNavNodeColl);

                try
                {
                    context.ExecuteQuery();
                }
                catch (Exception)
                {
                    //Handle exception
                }

                if (ModifyNode.Count() == 1)
                {
                    NavigationNode mNode = ModifyNode.FirstOrDefault();
                    mNode.Url = "javascript:window.open('http://www.xxxxxxxx.com', '_blank'); void(0)";
                    mNode.Update();

                    try
                    {
                        context.ExecuteQuery();
                    }
                    catch (Exception)
                    {
                       //Handle exception
                    }
                }
            }


    Abhijeet S. Thorat



    If my post solves your problem could you mark the post as Answered or Vote As Helpful if my post has been helpful for you.

    Wednesday, May 3, 2017 5:31 AM
  • Hi Victoria, we have tried the javascript approach. It all works fine until someone edits the list of links.

    No matter what changes you make to the list the save fails.

    I'm assuming this could be a bug in the SPO/O365 with our site. But we have not been able to get around it. 


    burndorfer


    Wednesday, May 3, 2017 7:09 PM
  • Hi Karl,

    Yes, I met the same issue as you got.

    In that case, I recommend to use JavaScript to change the <a> attribute target for the left navigation links instead to open in a new tab.

    Here is a demo for your reference:

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
        $("a[href='http://sp']").attr("target", "_blank");
    })
    </script>

    Best Regards,

    Victoria Xia


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, May 8, 2017 4:39 AM
    Moderator
  • Thanks Victoria, this jquery of yours I think applies to all <A> tags on the document. We only want to apply this to the 3 we have in the list that are like this. All the others are links we want to open on the same tab. 

    Would using jquery to add a class be something that would work?

    inject the new class for anchors at open in a new tab, and then use csom & jquery to apply the style to the specific links. 


    burndorfer

    Monday, May 8, 2017 6:08 PM
  • Hi Karl,

    You can use F12 tool to help you check the HTML element and use specific selector to get the links you need.

    In my example, I used "a[href='http://sp']" to get <a> which has its href attribute set to 'http://sp'.

    Best Regards,

    Victoria 


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, May 10, 2017 7:00 AM
    Moderator
  • Our CSOM is data driven and it will add and remove left nav links across all sites to keep them all the same. The data defines if the link should be open in a new tab or not. So we are aware which link needs this when we manage the CSOM left nav objects.  We can, via CSOM, add subsequent javascript code as well. It is here I was wondering if we could do something with a css class.  That way the javascript we apply via CSOM could have the appropriate class applied to the specific link.

    I found a link here we will try:

    https://css-tricks.com/snippets/jquery/open-external-links-in-new-window/


    burndorfer

    Wednesday, May 10, 2017 7:40 PM
  • Hi Karl,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    Best Regards,

    Victoria


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, June 1, 2017 12:09 PM
    Moderator
  • There was an option but it required modifying the master page, and it is recommended to not do this for maintainability. 

    burndorfer

    Friday, June 2, 2017 1:10 AM
  • Still looking...

    burndorfer

    Friday, June 2, 2017 1:10 AM