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

Posted in Uncategorized | 2 Comments

Microsoft Project Server type buttons

I like the Microsoft Project Server buttons that have the slide up “help” on them and so I thought I’d write up a post on how to add them to your HTML client. ¬†I would also like to thank my friend Fernando Guerra for assisting me with the JavaScript modifications.

NOTE: This is only useful on DESKTOP applications, mobile apps don’t really have a “hover” like a mouse, but you can try hovering over it with your finger and see if it works? ¬†;)

Quick Steps:

  1. obtain an icon for your button and load it into your project
  2. create a button in your html client screen
  3. modify the postrender() method with CSS to your style liking
  4. add JavaScript file reference to default.htm
  5. add JavaScript file to project

1. Creating an icon

I “borrowed” an editing icon¬†from the internet for the button. ¬†I typically use paint.NET¬†to edit my images, so I just captured ¬†the green from the MSProject Server buttons,


then created my 50×50 icon in (changed the colors and size) and then added it to my solution.


2. Create a button on the HTML client screen (I called mine ShowBingButton and changed the display to “SHOW BING”):


3. Modify the button properties in the postrender() method:


Add the following CSS to the postrender() method to style the button:


myapp.BrowseVideos.ShowBingButton_postRender = function (element, contentItem) {
    // Write code here.
¬† ¬† $(“a”, element).css({“height”: “25px”}); // sets the hyperlink height
    $(element).children().css({  // sets properties of the button
¬† ¬† ¬† ¬† “padding-top”: “100px”, ¬†// pads the top of the button to ‘push’ the text to the bottom
¬† ¬† ¬† ¬† “background”: “#317529”, // sets the green background
¬† ¬† ¬† ¬† “color”: “white”, ¬† ¬† ¬† ¬†// sets the white text color
¬† ¬† ¬† ¬† “background-image”: “url(‘content/images/edit.png’)”, ¬†// ¬†sets the image to be used
¬† ¬† ¬† ¬† “background-repeat”: “no-repeat”, ¬†// sets the background to only show once
¬† ¬† ¬† ¬† “background-position”:”center” ¬†// positions the background image to center
¬† ¬† $(element).attr(“title”, “This is the title of the button which (when clicked) will take you to”); ¬†// sets the text that will slide up
    $(element).dropCaptions();  // calls the dropcaptions JavaScript method
¬† ¬† $(“.caption”).css({ ¬†// sets the properties of the caption that slides up
¬† ¬† ¬† ¬† “color”:”white”, ¬†// white font
¬† ¬† ¬† ¬† “background”: “#333”, ¬†// dark gray background
¬† ¬† ¬† ¬† “height”: “100px”, ¬†// height of the caption
I modified the¬†CatchMyFame’s¬†¬†jquery.dropcaptions.js¬†here¬†to the following (then saved it as jquery.mydropcaptions.js:
* jQuery Drop Captions plugin
* @version 2.0.0
* @date June 4, 2013
* @category jQuery plugin
* @copyright (c) 2009 (
* @license CC Attribution-Share Alike 3.0 –
        dropCaptions: function(options){
            var defaults = {
                showSpeed : 300,
                hideSpeed: 300,
                showOpacity : .7,
                hideOpacity : 0,
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† showEasing: ‘swing’,
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† hideEasing: ‘swing’,
                showDelay: 0,
                hideDelay: 0
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o=options;
                var obj = $(this);
                //var objwidth = $(obj).width();
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† var caption = $(obj).attr(‘title’); // Get the text of the caption from the image’s title attribute
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(obj).wrap(‘<div></div>’).before(‘<div>’+caption+'</div>’).attr(‘title’,”); // Create a wrapping div, caption div, and remove the title from the image
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(obj).parents(‘div.captainer’).width(150).css(‘float’, $(obj).css(‘float’));
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† //$(obj).parents(‘div.captainer’).width($(obj).width() + parseInt($(obj).css(‘paddingLeft’), 10) + parseInt($(obj).css(‘paddingRight’), 10) + parseInt($(obj).css(‘borderLeftWidth’), 10) + parseInt($(obj).css(‘borderRightWidth’)), 10).css(‘float’, $(obj).css(‘float’)); // Copy the image’s width (+ border) and float to the wrapper div
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† //$(obj).parents(‘div.captainer’).width(objwidth); // Copy the image’s width
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(‘.captainer’).css({ ‘position’: ‘relative’}); // Set the wrapper div’s position
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(‘.caption’).css({ ‘position’: ‘absolute’, ‘z-index’: ‘1’, ‘bottom’: ‘0’, ‘opacity’: o.hideOpacity, ‘color’: ‘white’, ‘left’: ’10px’,’font-size’:’12px’ }); // set the caption div’s position
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(obj).parents(‘div.captainer’).css({‘margin’:$(obj).css(‘margin-top’)+’ ‘+$(obj).css(‘margin-right’)+’ ‘+$(obj).css(‘margin-bottom’)+’ ‘+$(obj).css(‘margin-left’)}); ¬† // Move the margin from the image to the wrapper div
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(obj).css({‘position’:’relative’,’margin’:0});
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† var moveAmount = parseInt($(obj).prev(‘div.caption’).height()+35, 10) + parseInt($(obj).prev(‘div.caption’).css(‘paddingTop’), 10) + parseInt($(obj).prev(‘div.caption’).css(‘paddingBottom’), 10);
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† $(obj).on(‘mouseenter touchstart’, function (e) {
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† setTimeout(function(){$(obj).prev(‘div.caption’).stop(true,false).animate({marginBottom:’+’+moveAmount +’px’,opacity:o.showOpacity},o.showSpeed,o.showEasing)},o.showDelay);
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† }).on(‘mouseleave touchend’, function(){
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† setTimeout(function(){$(obj).prev(‘div.caption’).stop(true,false).animate({marginBottom:’0px’,opacity:o.hideOpacity},o.hideSpeed,o.hideEasing)},o.hideDelay);
4. Add the jquery.mydropcaptions.js file to the default.htm file
5. Add the jquery.mydropcaptions.js file to the project:
Run the project (F5)
when you hover over the “SHOW BING” text, you should see this:
You can tweak the colors, etc. to get the effect you like.
Congratulations!  :)
Posted in Uncategorized | 1 Comment

HTML5 video in a LightSwitch HTML client

I was working on a project and needed to be able to play videos. ¬†I knew ¬†that HTML5 supported video streaming natively (with certain video file types) and so I decided to add it to my LightSwitch html client. ¬†Here’s how I did it.

This is a pretty detailed instruction, but it starts from scratch.  Hope it helps you!

Note: I’m using Visual Studio 2012 for my screen shots, but this should be the same in Visual Studio 2013. ¬†I have also selected C# as my language, but VB should work just as well!

Create a new LightSwitch html project (I called it “MyVideos”).


In the Solution Explorer, under Server, create a new table:


Rename the table to “Video” (the plural of “Videos” shows in Solution Explorer).


Add “URL”, “Caption”, “Poster” and “PosterURL” entity fields (I’ve made the caption and poster optional by unchecking the Required checkbox).


URL – the url is the path that will be used by the html client to “find” the video and then render it in the client. ¬†This can be a web address (for example: “http://myserver/Videos/myvideo.mp4&#8221;) or a relative address (for example: “videos/myvideo.mp4”).

Caption – the text you want to show when playing your video (again, this is optional).

Poster Рthe image you want to display in the video player before the video is played (again, this is optional)

PosterURL – the url to the image you want to display¬†in the video player before the video is played. ¬†This is the string used by the html5 tag to display the image before playing because the html5 tag cannot use the image in the database¬†(again, this¬†is optional). ¬†¬†Note: when you are testing, you will want to add the image to the “Content/Images” folder in your project so that it renders when you run the debugger.

Add a “Browse Videos” html client screen:

In the Solution Explorer, under HTMLClient(Startup), create a new screen:


Select the browse screen template, select Videos from the dropdown ScreenData:


Formatting the “Browse Videos” screen:

In the designer, select the dropdown next to “Videos” and change it to “Tile List”


Now that we have a “browse” screen, we need to add a screen so that we can actually add records to the video table:

Add a “Add Videos” html client screen:

In the Solution Explorer, under HTMLClient(Startup), create a new screen:


Select the “Add/Edit Details” screen template, select Videos from the dropdown ScreenData:


In order to “upload” a picture for the “poster” field, you’ll need the image uploader found here¬†under “Add a custom control to upload Photos” (it also provides a user interface to select files from your computer).

Here are the screenshots in my project after the uploader code has been added:

Default.htm file:


Scripts folder:


Adding javascript code to “render” event in AddEditVideo screen

1. select “Poster” in designer, change it from Image to Custom Control.


, 2. Click “Edit Render Code” in properties):


AddEditVideo.js file:


Back on the “Browse Videos” screen, add a button (for adding entries in the video table (entity)):


In the “Add Button” dialog box, under “Choose an Existing Method”, select the “addAndEditNew” “built-in” method.


Your browse screen (now with a button) should look like this:


Now, if you start the debugger (press F5), you should see this…


Clicking on the “Add Video” button…


Add a URL, caption, Poster image and Poster URL:

(note: check here for supported video types)

To test the video playback in development, create a folder called “Videos” in your solution folder under: “MyVideos\MyVideos\Bin\Debug\HTMLClient\” and place your video file(s) there.

Note: this would have to be copied to your server for production use. (you can use another location, just make sure you have the path relative to the server URL in production).


Click the SAVE button and you should see:


So let’s clean up this view a bit and make it nicer to look at:

Stop the debugger (close IE) and then open the BrowseVideos screen.


Right-Click the URL (and PosterURL) in the tree view and delete them:


change the order of Caption and Poster and change the parent layout from Rows to Columns:


Now it should look like this:


Up to now, this has all been “standard” LightSwitch html client stuff.

Here’s where the simple addition of some javascript code allows you to play the video in the html client:

Add another screen to play the video:


select the “View Details Screen” and select “Video” for the screen data:




In the BrowseVideos screen, add a TAP method to “view” the video:


Select the “View Selected” under Video:


(this will open the “View Video” screen)

In the “ViewVideo” screen, change the following:


Delete the Rows Layout that contains the “poster”.


Delete the URL:


Add a second Caption and change the “lower” Caption to a custom control:


Edit the Render Code in the Properties box:


using the html code i found here:

<video controls>
<source src=”devstories.webm” type=’video/webm; codecs=”vp8, vorbis”‘/>
<source src=”devstories.mp4″¬†type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘/>

we add this javascript to the “ViewVideo.js” file:

myapp.ViewVideo.Caption_render = function (element, contentItem) {
    // Write code here.
    // bind to the URL of the video passed to the screen
¬† ¬† contentItem.dataBind(“screen.Video.URL”,
     function (url) {
         // bind to the Poster URL of the image passed to the screen
¬† ¬† ¬† ¬† ¬†contentItem.dataBind(“screen.Video.PosterURL”,
          function (PosterURL) {
              // append this html to the caption custom control
¬† ¬† ¬† ¬† ¬† ¬† ¬† $(element).append(‘<video width=”400″ height=”225″ controls poster=”‘ + PosterURL + ‘” ¬†> ‘ +
¬† ¬† ¬† ¬† ¬† ¬† ¬† ‘<source src=”‘ + url + ‘” type=”video/mp4″ />’ +
¬† ¬† ¬† ¬† ¬† ¬† ¬† ‘</video>’);



now, clicking on the tile opens the view video screen:



Clicking on the PLAY button plays the video!!!!





Posted in Uncategorized | 10 Comments