Html client org chart

This assumes you know a bit about Microsoft LightSwitch.  If you don’t, go here first. 🙂

I needed an org chart for my LightSwitch client so I looked around and found the free Caprica jquery orgchart on github.

I created a LightSwitch application.


Then created an employee entity (this entity will be used for the entire org chart data):


Then added entity properties (Name <required>, Title, Department):


Then added a circular reference back to this entity for the Manager (Many to zero/one):


There are other ways to do this, but it seemed the most efficient way, but complexifies (is that a word?) the javascript.

Then created a “common screen set” for Employees (including Employee Employees aka Manager)


Changed the default Employees control from a “tile list” to a “table”


Ran (F5) the app to add employees. (note: the first employee (top of the org chart) does not have a manager).


Then I added more employees with all of them having Managers (i.e. the top node aka “top dog” doesn’t have a manager, everybody else does):


Completed list of employees:


I created another browse screen for the org chart view (OrgChartView):


Change the Employees contentItem control from the default “Tile List” to “Custom Control”:


In the Employees Query “Manage Included Data”, include the Manager:


Then click the “Edit Render Code” link from the properties box to create a stub in the orgchartview.js file :


At this point, all of this has been OOTB LightSwitch,  now I needed to get the orgchart.

I downloaded the Caprica jquery orgchart on github.  Copied the CSS and JS files into my solution:


Added a reference to them in the default.htm:


set the org chart view screen as the home screen:


Under the Render method of the orgchartview.js, added the following JavaScript code (this is what took the most time to figure out) .

NOTE: This code is for the structure of the entity that I created.  If you have a different structure, you’ll have to modify the code for your environment but this will give you a starting point:


Ran (F5) the app and get this!


I didn’t like the default coloring so I tweaked the jquery.orgchart.css file:


On hover, the active nodes highlight:


The nice thing about the the Caprica jquery orgchart on github is that it “collapses” when you hide child elements and re-aligns the level.


Notice that the spacing between “Spock” and “Checkov” has decreased.





Here’s the text of the RENDER code (sorry, it doesn’t look pretty until you copy it into VS):

myapp.OrgChartView.Employees_render = function (element, contentItem) {
// Write code here.
contentItem.screen.getEmployees().then(function (employees) {
var html = ‘ <div> <ul id=”chartdata”><li><em>U.S.S. Enterprise Crew</em><ul>’ (employee) {
if (employee.Manager == null) {
var nodedata = ‘<li id=”‘ + employee.Id + ‘”>’ +
employee.Name + ‘<br/>’ +
employee.Department + ‘<br/>’ +
employee.Title + ‘<ul></ul></li>’
html = html + nodedata
} else {
var nodedata = ‘<li id=”‘ + employee.Id + ‘”>’ +
employee.Name + ‘<br/>’ +
employee.Department + ‘<br/>’ +
employee.Title + ‘<ul></ul></li>’
var existingmgrnode = html.indexOf(‘id=”‘ + employee.Manager.Id + ‘”‘)
var ulindex = html.substring(existingmgrnode).indexOf(“<ul>”);
ulindex = ulindex + 4
if (existingmgrnode) { // if the manager’s node has already been created
html = html.substring(0, existingmgrnode + ulindex) +
nodedata +
html.substring(existingmgrnode + ulindex)
html = html + nodedata
html = html + ‘</ul></li></ul></div> <div id=”main”> </div>’

$(‘#chartdata’).orgChart({ container: $(element), interactive: true, fade: true, speed: ‘slow’ }); // use container: $(‘#main’) when testing to verify org chart structure

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Html client org chart

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s