2

I am trying to build a component that renders the structure of sites and subsites for a sharepoint site collection, and using the code from here

This code is great but, unfortunately for case, it returns all sites one after the other without hierarchy, I'm interested in returning/building the output something along the lines like this: (because I can then bind to a treeview library)

<ul>
  <li>site 1
  <li>site 2
  <li>site 3
  <ul>
  <li>Sub-site 3.1
  <ul>
    <li>Sub-site 3.1.1
    <li>Sub-site 3.1.2
  </ul>
  <li>Sub-site 3.2
  <ul>
    <li>Sub-site 3.2.1
    <li>Sub-site 3.2.2
  </ul>
</ul>

Would love to hear from anyone with ideas on this or who has done something similar. I was hoping to find something like jquery site treeview navigation for SharePoint 2013 but all i found was the KWizCom treeview component (which would perfectly solve our challenge) and we are not allowed to deploy server-side code to the farm.

Thanks in advance

1 Answer 1

1

This is relatively straightforward if you're willing to toss a little recursion into the mix.

The basic process is as follows: Get all the child webs of a given web, display them in the hierarchy, then repeat that process for each child web.

Here's an example to get you started.

<ul id="root_hierarchy"></ul>

<script>
ExecuteOrDelayUntilScriptLoaded(showWebHierarchy,"sp.js");

function showWebHierarchy(){
    var rootUrl = "/yoursitecollectionurl";
    rootNode = document.getElementById("root_hierarchy");   
    get_subwebs(rootUrl,rootNode);
}

// get_subwebs is a recursive function that accepts the following parameters:
// url: the server relative url of a web 
// node: <ul> element in which to display subsites
function get_subwebs(url,node){
    var clientContext = new SP.ClientContext(url);
    var webs = clientContext.get_web().get_webs();
    clientContext.load(webs);
    clientContext.executeQueryAsync(function(){
        for(var i = 0, len = webs.get_count(); i < len; i++){
            var web = webs.getItemAtIndex(i);
            node.insertAdjacentHTML("beforeend","<li><a target='_blank' href='"
                 + web.get_serverRelativeUrl() + "'>"
                 + web.get_title() + "</a><ul url='" 
                 + web.get_serverRelativeUrl() + "'></ul></li>");
        }
        var subnodes = node.querySelectorAll("ul");
        for(var i = 0, len = subnodes.length; i < len; i++){
            var subnode = subnodes[i];
            var url = subnode.getAttribute("url");
            get_subwebs(url,subnode);
        }
    },function(sender,args){alert(args.get_message());});   
}
</script>

Note that this runs with the currently logged-in user's permissions, so it won't be able to display sites to which the current user does not have access.

2
  • great stuff! thanks for that. One thing I noticed is that some users do not see the full tree. I guess that's because they don't have access to the site, thus the JavaScript is not able to query the site? can I fix this by giving them visitor access ? I don't think I can RunWithElevatedPrivileges a client-side script Sep 5, 2016 at 5:52
  • Giving them visitor access will probably do the trick, depending on what that means in your environment. What they really need is any permission level that will grant them both the "Open" and the "Use Remote Interfaces" granular permissions. By default the "Read" permission level includes both of those.
    – Thriggle
    Sep 6, 2016 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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