Click here to Skip to main content
14,971,296 members
Articles / Productivity Apps and Services / Sharepoint
Posted 29 May 2013


5 bookmarked

Silverlight OrgChart web part

Rate me:
Please Sign up or sign in to vote.
4.67/5 (3 votes)
29 May 2013CPOL5 min read
This article introduces simple procedure for generating an organization chart with Silverlight technology.

Sample Image - maximum width is 600 pixels


This article introduces simple procedure for generating an organization chart with Silverlight technology.


The goal of the project was to create Silverlight control, presenting company employees in organization chart. Control is dedicated to any kind of company - small and midle-size. Due to the fact that chart control is “settle” on SharePoint server , the chart control has been wrapped into parameterizable ASP.NET web part.

This article describes another approach for drawing organization structure. There are many sharewares or freewares drawing organization structure, but they usually use Canvas as the main control . For ASP.NET applications this is the only way to successfully draw the structure. My approach is easier and totally independent from any third party drawing libraries. First of all , chart control is created with StackPanel control without Canvas. Unlike Canvas control , StackPanel automatically aligns child items horizontally or vertically. Secondly auto scaling process is resolved with Silverlight native control ViewBox.

A personal note

This is my first article and I realize that some algorithms and code quality might be better, especially redrawing procedure, which is called every time, after MainStackPanel resolution is changed.

System requirements

  • SharePoint operating system: Windows 7 , Windows 2008
  • SharePoint platform: MS SharePoint Foundation 2010
  • Browser: latest IE, Firefox
  • Browser adds: Silverlight 5.0 runtime 

Tools and components

Using the code

  • Install MS SharePoint 2010 Foundation Server
  • After installation process has finished , check main SharePoint site availability (e.g., http://localhost)
  • If installation process was performed out of the AD environment, copy clientaccesspolicy.xml file into the application SharePoint folder (e.g., C:\inetpub\wwwroot\wss\VirtualDirectories\80)
  • Open project MB.OrganizationChartWebPart (VS 2012 project)
  • Set Site URL (e.g., http://localhost) property in project properties.
  • Deploy web part control into main SharePoint site (run „Deploy” action on project MB.OrgChartWebPart).
  • Run main SharePoint site (e.g., http://localhost). Look at the menu on the left side and find link to the OrgChartList list then provide some data as follows:

    Image 2

    Unit type – type of unit.

    Acceptable values:

    0 – Unit,
    1 – SubUnit
    2 - Worker

    ParentEID – root element ID
    EID – element ID. Must be unique.

  • Optionally add any picture image as item attachment
  • Create empty site and add OrgChartWebPart web part

Parts of the solution

  • MB.OrganizationChartWebPart.Web – ASP.NET web app hosting MB.OrgChartWebPart application.
  • MB.OrgChartConnector – SharePoint list connector project.
  • MB.OrgChartControl – Silverlight organization chart control (main project).
  • MB.SilverlightOrgChartApp –Silverlight application hosting MB.OrgChartControl control (for test purpose).
  • MB.OrgChartWebPart – Silverlight application project hosting MB.SilverlightOrgChartApp application.

Class diagram

Classes relationships in UML notation

Image 3

Project details

This chapter does not describe any algorithms details, for example tree layout drawing algorithm.

Chart elements

As I mentioned earlier, my solution is based on standard Silverlight controls such as: StackPanels, Grids, Labels, TextBlocks, so some kind of my controls acts as their extensions.

  • ViewBox – container responsible for scaling chart. Auto scaling occurs in case of changing resolution of the MainStackPanel. Scaling option only works for some kind of stretch types, provided in Stretch parameter.
  • MainStackPanel – Main StackPanel container. It’s a parent for LevelStackPanels elements. Items are arranged in Horizontal position.
  • LevelStackPanel –This type of object is drawing on each level of the chart. It’s a container for GroupStackPanel elements. Items are arranged in Horizontal position.
  • GroupStackPanelStackPanel container. Items are arranged in Horizontal position.
  • ChartBox – Custom control holds employee details and represents exactly one position from the SharePoint list with 0 value in UnitType field. It displays data in two modes: Team or Organization.

Data tree structure building

At the beginning building process reads one by one each item from SharePoint list and creates structured tree object. Tree items are organized in parent – child relation via reference to its parent in ParentEID (except for root element) field. For more details just analyze code and see Drawing2DTreeBuilde class (MB.OrgChartControl project).

Displaying chart elements

According to the presentation mode (“Group by” parameter), tree structure items are displayed with following rules:

For Team mode

This mode is intended to display organization chart for small company or team.
Display rules:

  • For items with UnitType = 0 display ChartBox
  • Any other items with UnitType <> 0 are ignored
  • ChartBox display all fields of SharePoint list item.
  • Name and LastName values are displayed on ChartBox bar.

ChartBox control displays all list item data such us: Name, LastName, Email etc. See below for example:

Image 4

For Organization mode: This mode is intended to display organization chart for middle-size company. Employees are grouped into divisions.
Display rules:

  • For items with UnitType = 0 display ChartBox control and Division field value on ChartBox bar.
  • Any other items with UnitType <> 0 assign to appropriate ChartBox
  • Only Name and LastName of employee data are presented

ChartBox control displays grouped data by Division key. See below for example:

Image 5

While displaying ChartBoxes on the screen, process automatically tries to properly arrange ChartBoxes. If created ChartBox has been displayed out of the screen range, the main container (MainStackPanel) receives an event object containing details of range exceeding. After painting has been finished and some chart scaling type (Fill, Uniform, UniformToFill) was chosen, process changes the resolution of the main container and repaints the chart (As you must have noticed quality and performers need some improvements but this will be embraced in next version) . For more details just analyze code and see Drawing2DVTree class (MB.OrgChartControl project).

Chart layout

The following screen presents chart layout and its StackPanels arrangement.

Image 6


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


About the Author

Marek Bieńkowski
Software Developer (Senior)
Poland Poland
No Biography provided

Comments and Discussions

QuestionGreat article! Pin
aasoftech16-Sep-16 1:20
Memberaasoftech16-Sep-16 1:20 
QuestionCannot load Omu.ValueInjecter.Silverlight Pin
Member 117059381-Jul-15 9:42
MemberMember 117059381-Jul-15 9:42 
QuestionRegarding Error on Organization Webpart Pin
varunjain13-Aug-14 5:26
Membervarunjain13-Aug-14 5:26 
QuestionCould not load file or assembly 'Omu.ValueInjecter.Silverlight' Pin
Iman Abidi14-Aug-13 12:44
MemberIman Abidi14-Aug-13 12:44 
AnswerRe: Could not load file or assembly 'Omu.ValueInjecter.Silverlight' Pin
senglory1-Sep-14 4:14
Membersenglory1-Sep-14 4:14 
QuestionOrg chart alternatives Pin
Anton Khritonenkov111-Aug-13 10:22
MemberAnton Khritonenkov111-Aug-13 10:22 
QuestionSilverlight charts not printed when Firefox Browser used Pin
athiratha5-Aug-13 7:09
Memberathiratha5-Aug-13 7:09 
BugProblem with rendering Pin
abno1-Jul-13 2:12
Memberabno1-Jul-13 2:12 
QuestionOrgchart for Sharepoint 2013 Pin
Rekha from ITCube1-Jul-13 1:44
MemberRekha from ITCube1-Jul-13 1:44 
QuestionBlank Chart Pin
CuteVampire794-Jun-13 0:01
MemberCuteVampire794-Jun-13 0:01 
AnswerRe: Blank Chart Pin
Marek Bieńkowski4-Jun-13 1:41
professionalMarek Bieńkowski4-Jun-13 1:41 
GeneralRe: Blank Chart Pin
CuteVampire794-Jun-13 4:53
MemberCuteVampire794-Jun-13 4:53 
GeneralRe: Blank Chart Pin
Marek Bieńkowski4-Jun-13 23:03
professionalMarek Bieńkowski4-Jun-13 23:03 

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.