List of Links To SharePoint Sub Sites via Javascript

6/10/2014

Wanted to show the links to all the sub sites within my site on the left side navigation.
The user did not want to show OOB navigational links and also wanted to have a custom UI to it.

Brief look on net and four options seem worthy ...

1. Custom C# web part :  Easy but heard so much about * not writing code * anymore that was scared to do so.   Plus laziness killed the enthusiasm to do the deploy and all....so no

2. Use Table of Content Web Part :  Too complicated, could not understand it. Also having a custom UI seemed complicated.  Post SharePoint 2013 Display templates, writing custom XSLT is soo oldish and uncool

3. Script Editor web part :  Could not locate it. I know it is somewhere (hidden in some feature perhaps) but could not  find in web part gallery

4. CSOM  in CEWP :  This is the one i used finally. Put the JavaScript code in a content editor web part and Voilla....it works.  The code is pretty similar to what you could already find in web, but i had to figure out how to get the URL to site also and not just the title

[Updated 20 June 2014 ]

5. SpServices in CEWP: This is another flavour to point 4. Difference being it uses SPServices JS library rather than CSOM. SPServices  is a JS wrapper over the native SharePoint Web Services. I prefer this method ( now !!) because unlike CSOM it is REST
based. CSOM sends the requests in batches and if your page has lots of CSOM requests, you tend to end up in probs. The complete Documentation of  SPServices is in Codeplex. In snippet two below , you would find the code I used. Thanks to   for writing the cool library


Code ( Using CSOM)
-------------------------------------------------------------------------------------------
<div id="subWebList">
 </div>

<script language="javascript" type="text/javascript">
    var currentcontext = null;
    var currentweb = null;
    ExecuteOrDelayUntilScriptLoaded(RetriveSites, "sp.js");

   function RetriveSites()
        {
            currentcontext = new SP.ClientContext.get_current();
            currentweb = currentcontext.get_web();
            this.subsites = currentweb.get_webs();
            currentcontext.load(this.subsites);
            currentcontext.executeQueryAsync(Function.createDelegate(this, this.ExecuteOnSuccess),Function.createDelegate(this, this.ExecuteOnFailure));
         }

function ExecuteOnSuccess(sender, args) {
        var subsites = '';
        var enumSubSites = this.subsites.getEnumerator();
        var collHyperLinkSubWebs = '';
 
        while (enumSubSites.moveNext())
            {
                var Site = enumSubSites.get_current();
                subsites += '\nUrl: ' + Site.get_serverRelativeUrl() + '\nTitle: ' + Site.get_title();

                collHyperLinkSubWebs += "<div style='padding-bottom: 5px;'> <a style='font-size: 15px; font-weight: bold;' href='" + Site.get_serverRelativeUrl() +"' >" + Site.get_title() +"</a> </div>";
            }
            $("#subWebList").html(collHyperLinkSubWebs);
        }

   function ExecuteOnFailure(sender, args) {
           alert('error');
                }
 </script>

---------------------------------------------------------------------------------------------------------

Code  ( using  SP Services )

<script language="javascript" src="jquery-1.11.1.js" type="text/javascript"></script>
<script language="javascript" src="jquery.SPServices-2014.01.js" type="text/javascript"></script>

<div id="subWebCrisisList">
</div>


<script language="javascript" type="text/javascript">

$(document).ready(function() {

var collLink ='';

$().SPServices({
  operation: "GetWebCollection",
  webURL:"/sites/MyTestSites/",
  completefunc: function(xData, Status) {

    $(xData.responseXML).find("Webs > Web").each(function() {
      var $node = $(this);      
      collLink += "<div style='padding-left: 10px;padding-bottom: 5px;'> <a style='font-size: 15px; font-weight: bold;' href='" + $node.attr("Url") +"' >" + $node.attr("Title") +"</a> </div>";
    });

   $("#subWebCrisisList").html(collLink);
  }
});
});</script>

Name

Email

WebSite

SPServices isn't REST, actually. It uses the older SOAP or XML-based Web Services. You have yet another option if you want to use REST. M.

Sjoukje ZaalHi Laura,Thanks for your comment. I am very coriuus about the adoption of this new app model and if there indeed will be a lot of developers (who are using other programming languages then .Net) are going to create apps for SharePoint 2013. I know I'm definitely going to write some Apps in the near future .