Click here to Skip to main content
12,445,274 members (55,329 online)
Click here to Skip to main content
Add your own
alternative version



Organization/Hierarchy Chart on SharePoint (using jquery, Javascipt-CSOM)

, 14 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Hi developers, This time I have a very interesting stuff for you guys. Few days back I got a tricky requirement from one of my customers , its about populating their organizational structure dynamically on their  SharePoint Intranet site without any server side components /Code.

Hi developers,

This time I have a very interesting stuff for you guys. Few days back I got a tricky requirement from one of my customers , its about populating their organizational structure dynamically on their SharePoint Intranet site without any server side components /Code. Means – there will be a SharePoint list from where data will be pulled and on a Webpart(CEWP or OOB WP) the hierarchy need to be displayed. Fortunately within few hours I was able to integrate 2-3 things with some javascript / jquery code to accomplish this requirement. Things require to cook out are

  • jQuery
  • jQuery OrgChart PlugIn – Kindly read the technical artifacts of jQuery OrgChart from this location.
  • Content Editor WebPart
  • SharePoint Javascript CSOM
  • a SharePoint list
  • jQuery Balloon Plug In – If need to show any additional data

The scenario, I am going to demonstrate here is to create a corporate organizational structure. For example, CEO on the top then COO, CFO, CTO then Excutive VPs, AVPs then comes Directors,Managers after that core execution team.

So, Here we start.

1. Create a custom SharePoint list having columns like Title, Manager, Designation .Enter some logical details as mentioned below.

List data for populating Org Chart

2. Download and place Jquery & jQuery OrgChart plug-in files into the hive’s _layouts folder(see image below).Note : When we are going through a solution deployment approach we need to place these files inside SP Project to package it to a WSP file. Here we are directly copying files to _layouts folder just for the sake of demo. If needed you can place the jQuery Balloon file too.


3.Creating the Content Editor WebPart / Script editor WP – Script source file. Save the below mentioned code to a txt file and upload it to the SiteAssets Library. Give the path of the file to CEWP like ”/SiteAssets/ScriptstxtFile.txt” or directly use this script to your client component.

<link rel="stylesheet" href="_layouts/jquery.orgchart.css" /></pre>

JQuery OrgChart basically needs a <ul><li> (unordered list) format for populating the Org-Chart. So I am querying the SP List using the SCOM(javascript) and using a recursive function (getChildNodes) the <ul><li> structure is created. After loading this <ul><li> structure I call the jquery orgchart function to populate the hierarchy on the other <div>

The main checkpoints on the above script are :

  • loadStructure() – JS Function uses SharePoint JS SCOM to Query the list to get the Parent-Child Hierarchy.
  • GetChildArrayObjects() – its an alternative to .filter JS function since this is not supported on IE8.
  • getChildNodes – Recursive function mentioned above – Which basically structures the unordered list.(see the <ul> mentioned on image below)
  • $(“#organisation”).orgChart({ container: $(“#main”), nodeClicked: onChartNodeClicked }); – This line of jQuery code in the above script actually reads the <ul><oli> and generate the OrgChart. While you skim the above code, you will be able to see a <ul> with ID as ‘organisation’ created which is read and org chart is populated to a <DIV> ‘main’
  • After creating the orgChart, I am iterating through the <DIV> of the OrgChart block according to its ID to enable the balloon
//enabling balloon for each orgchart block
for (var i = 0; i < tasksEntries.length; i++) {

$("div[title=\"" + tasksEntries[i].Title + "\"]").balloon({
contents: '<img src ="/Images1/_t/images_jpg.jpg"/></br><ul><li> Designation :' + tasksEntries[i].Designation + '</li><li>Phone# : 123-234-1233</li></ul>'


Finally the OrgChart is populated as displayed below. You can see a <ul><li> list on the top, which can made to visible=false to the <DIV> with ID ‘left’ on the above mentioned script, displayed only for testing purpose.


Hope you have enjoyed this article, Kindly let me know if there is any issues .


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

abin jaik
Web Developer
India India
I am Abin Jaik Antony, working as a Software Developer.My technology background area extends to MOSS 2007,Microsoft BI,.NET Framework etc.
Visit my blog for more details

You may also be interested in...


Comments and Discussions

QuestionMessage Removed Pin
infoaftab20-Mar-16 23:59
memberinfoaftab20-Mar-16 23:59 
QuestionEnabling balloon Pin
Member 1146564520-Dec-15 20:49
memberMember 1146564520-Dec-15 20:49 
Questionlarge organisation Pin
nicetohaveyou23-Feb-15 23:11
membernicetohaveyou23-Feb-15 23:11 
GeneralVery nice work Pin
Syed Mujtaba Hassan13-Nov-14 20:17
memberSyed Mujtaba Hassan13-Nov-14 20:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 14 Mar 2014
Article Copyright 2014 by abin jaik
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid