Using SharePoint leftSide Navigation in SharePoint Custom App

Question

Is it possible to use SharePoint left navigation bar in a "Provider Hosted App". The navigation shown on SharePoint site "PlaceHolderLeftNavBar". Is there any way like some ajax call or REST/CSOM functionality?

Answer 1

According to the official MSDN documentation, the CSOM and JSOM both contain Navigation properties which also provide access to the quick launch menu (aka "left navigation bar").

Links to the docs are as follows:

SP.Navigation.quickLaunch property (sp.js) (JSOM)

Navigation.QuickLaunch property (CSOM)

In order to use either CSOM or JSOM in a provider hosted app, you would need to authenticate using either OAUTH (for Office 365 / SharePoint Online) or by using certificates in a High-Trust / on-premises environment.

If you use the App for SharePoint 2013 template provided by Visual Studio 2013, and select provider-hosted, it should come with a TokenHelper.cs/vb class file which will do much of the heavy lifting for both scenarios. More info on authentication techniques is also available on MSDN - look for the following topics in particular:

• Authorization and authentication for apps in SharePoint 2013 How to:
• Create high-trust apps for SharePoint 2013 (advanced topic)

I'm not sure if there is a pure REST endpoint available at this time, which could certainly simplify the advanced authorization requirements of CSOM / JSOM in a provider hosted app.

Answer 2

SP.Web.navigation property gets a value that specifies the navigation structure on the site, including the Quick Launch area and the top navigation bar

How to access Navigation (Quick Launch) via CSOM (JavaScript)

function getQuickLaunch(success,error)
{
   var context = new SP.ClientContext.get_current();
   var web = context.get_web();
   var nav = web.get_navigation();
   var quickLaunch = nav.get_quickLaunch();
   context.load(quickLaunch);
   context.executeQueryAsync(
      function() { 
         var nodes = [];
         var nodesCount = quickLaunch.get_count();
         for(var i = 0; i < nodesCount;i++){
             var node = quickLaunch.getItemAtIndex(i);
             nodes.push(node);
         }
         success(nodes);
      },
      error
   );
}

Usage

getQuickLaunch(
   function(nodes){
      for(var idx in nodes)
      {
          console.log(nodes[idx].get_title());
      }
   },
   function(sender, args) {
          console.log('Error:' + args.get_message());
   }
);

How to access Navigation (Quick Launch) via REST

function getQuickLaunch(siteurl, success, failure) {
    $.ajax({
        url: siteurl + "/_api/web/navigation/quickLaunch",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data.d.results);
        },
        error: function (data) {
            failure(data);
        }
    });
}

Usage

getQuickLaunch(_spPageContextInfo.webAbsoluteUrl,
   function(nodes){
      for(var idx in nodes)
      {
          console.log(nodes[idx].Title);
      }
   },
   function(error) {
          console.log(JSON.stringify(error));
   }
);