Site Directory App with Tree Structure – O365 SharePoint Hosted App

Requirement 

Create a Site Directory App with Tree Structure to show all the sub-sites created under the root web.

Options 

Following are the options I tried to incorporate the above said requirement

  1. AngularJS Tree View (https://jimliu.github.io/angular-ui-tree/)
  2. D3 Layout Tree (https://github.com/mbostock/d3/wiki/Tree-Layout)

Output Screenshots

D3

sitedirectory_using_d3

AngularJs Tree View

sitedirectory_using_angulartree

Disclaimer and confession

This is a drop in solution, but you have to adapt it to suite your needs: your mileage may vary. I wasn’t born a JS developer and actually learned most of what I know on this subject the past few years. I am not following best practices (JS/D3/AngularJS), but this post should get you started.

Sample Code

Click Here

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: