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.

create

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

created

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

employees

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

relation

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)

screen1

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

screen2

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

screen3

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):

screen4

Completed list of employees:

screen15

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

screen6

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

screen7

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

screen12

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

screen8

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:

screen9

Added a reference to them in the default.htm:

screen10

set the org chart view screen as the home screen:

screen11

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:

screen19

Ran (F5) the app and get this!

screen16

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

screen17

On hover, the active nodes highlight:

screen18

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.

screen20

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

ENJOY!

 

 

 

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>’
employees.data.forEach(function (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)
}else{
html = html + nodedata
}
}
});
html = html + ‘</ul></li></ul></div> <div id=”main”> </div>’

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

Advertisements
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s