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://angular-ui-tree.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