LightSwitch 2013 – March 2014 Update – Bug

This is one of a few “issues” that are cropping up with the March 2014 update to LightSwitch 2013.

This is most likely for those that go outside the expected “normal” for LightSwitch, which fortunately may affect only a few. For example, creating a screen that does not have any “official” data items. Where we are just creating our own custom control and rendering our own content.

The LightSwitch runtime does NOT like this, yet will not complain until the worst possible time… to repro:

  1. Create a new Browse screen, No screen data
  2. Don’t add any properties or data items
  3. Add your custom control, render as you see fit
  4. Or for this exercise, don’t add anything, same result
  5. Save your solution
  6. Build and run
  7. All works as expected


User is on your custom screen and presses the refresh button on the browser
The LightSwitch JavaScript runtime will error out due to an array length issue
Bug was tracked down to starting at line 11909 in file msls-2.5.0.js
It does not like the fact that screenParameters has an “undefined” value

So whats the work around?

  1. Add a data item to your screen
  2. Can be any, ie: boolean
  3. Name doesn’t matter
  4. Not necessary to add to your visual screen design
  5. Save your solution, run and test
  6. Issue resolved

This was/is causing a problem with my core project, which I’m in the process of upgrading.

Also take a look at this thread where others are also having issues when it comes to the new “Deep Linking”.

Be forewarned!

LS2013 HTML Client – New Screen Template for Enhanced Table (grid)

Back in business!  Seems it was a process issue which I’ve taken care of by automating the said process.  Which was the order of the javascript files and lodash needing to be before our file.  Now our itgLsEnhancedTable NuGet package will take care of modifying the default.htm file for you.

We’ve published a LightSwitch extension into the Visual Studio Gallery to help with your usage of our Enhanced Table code.  This is a standard vsix extension and can be installed from within Visual Studio itself.

In Visual Studio, go to Tools, Extensions and Updates, on the left side of the dialog, select Online.

Search for itgLsEnhancedTable

You should get one result, install the extension

Create a new LightSwitch HTML Client

Double click on the properties for the LightSwitch project, go to the Extensions tab and enable the itgLsEnhancedTable extension.

Right click on your HTML Client project, Add our Nuget package itgLsEnhancedTable.

Add a datasource, we’ve started to use the Northwind odata feed at for our tutorials going forward.

Add a new screen to your project, select our extension Itg Ls Enhanced Table, select your datasource.

Boom!  Screen gets created, code is generated.

Delete any unnecessary data fields from the table control.

Run your app.

Let me know what you think and if we should continue with screen templates.


LS2013 HTML – Enhancing Table Control with Multi Column Sort and Filters

Mar 6, Here we go again! This is ANOTHER major update…


  • Ability to sort on multiple columns
  • Easily Toggle Ascending, Descending, or no sort
  • Columns show their individual position in the sort order
  • Filtering on individual columns
  • Filter on Strings, Numerics and Dates
  • Popup filter dialog
  • Filtering can be disabled if not needed
  • Can be configured for batch processing
  • Batch mode can also be dynamically toggled
  • Compatible with latest LightSwitch update

Lets start by having you go up to and grab the latest code for this project. Make sure you right click on the downloaded zip, go to properties, and click on the Unblock button before unzipping.

As usual though, I’ll go thru a step by step process on how we got to the project you just downloaded. We’ve made this so easy its going to be hard to resist. So lets get to it…

  1. Create a new LightSwitch HTML Project
  2. Lets name it: EnhancedTable
  3. We’re going to use an external data source
  4. Select the OData Service option
  5. Use the following endpoint:
  6. Uncheck the ‘as read-only’
  7. Under authentication, select none
  8. When prompted to Choose your Entities
    • Select Order
    • Expand Order, Related Entities
    • Select Employee
  9. Name the data source: Northwind
  10. Click on finish, save your project

That’s all we’ll have to do with the ‘Server’ part of this project. The rest of the tutorial will be with the HTML Client.

  1. Right click on your HTML Client project
  2. Select Manage NuGet Packages
  3. Select the Online packages
  4. Search and install itgLsEnhancedTable
    • Three files get installed
      • Lo-Dash which is an awesome, lightweight alternative to Underscore.js. They’ve even included a ton of extras. Highly recommend that you check it out!
      • itgLsEnhancedTable.css (some quick styles used for the new table)
      • itgLsEnhancedTable.j
  5. Add all 3 files to your HTML Client default.htm
    • itgLsEnhancedTable.css
    • Lo-Dash.js
    • itgLsEnhancedTable.js
  6. We now automagically take care of step #5 for you when you install the NuGet package.

Great! That’s all the pre-work needed. Now lets go create our screens.

  1. Right click on your Screens folder
  2. Select Add Screen
  3. Lets use the new “Common Screen Set”
  4. Screen Data, Select Northwind.Orders
  5. Once LightSwitch does its magic, you’ll land on BrowseOrders
  6. Change the default Tile List for Orders to a Table
  7. Drag over some additional Order properties
    • Freight
    • ShipName
    • ShipCity
    • Employee
  8. Expand the Employee, change to a row layout
  9. Drag the Employee Last Name up under Ship City
  10. Delete the rest of the row layout for employee
  11. Change the Display Name for Last Name to Employee Last NameHere is how the screen should look by now
  12. Good time to do a full build and test run your app. Test the out of the box functionality.
    • Notice you’ll only able to sort a single column at a time
    • Also the Search only supports strings
    • Not able to search on multiple columns
    • Unable to remove the Search input once its displayed

Ok, enough of that. Lets supercharge this table!

We start off by creating a few local properties via the Add Data Item. Uncheck the “Is Required” on all you create.

  1. Type: String, Name: ColumnName
  2. Type: String, Name: Operator1
  3. Type: String, Name: Value1
  4. Type: String, Name: Concat
  5. Type: String, Name: Operator2
  6. Type: String, Name: Value2

The following new Local Properties need to have a Choice List. So for each one:

  • Operator1
  • Concat
  • Operator2
    1. Over in Properties
    2. Click on Choice List
    3. Add a single value, “a”

We dynamically load choices, hence the reason for just a single value so LightSwitch will initialize the control

Great! Now lets go create our Filter popup

  1. Add Popup
  2. Leave as default Rows Layout
  3. Change the name to: FilterPopup
  4. Case sensitive!
  5. In order, drag the following local properties into this popup
    • ColumnName
    • Operator1
    • Value1
    • Concat
    • Operator2
    • Value2
  6. Change Column Name to be a Text control
  7. In properties for each, change Label Position to NoneYou should have a screen that looks as soeht_BrowseOrdersScreen_WithFilterProperties
  8. In your popup, add a new group, change it to Columns Layout
  9. Add a button into this group
    • Write my own method
    • Method name: SetColumnFilter
    • Change its Display Name to “Set”
  10. Add another button into this group
    • Write my own method
    • Method name: ClearColumnFilter
    • Change its Display Name to “Clear”

Here is how your final layout of your popup should be


Before we go wiring this all up, lets add a couple of main screen buttons to really show the flexibility

  1. Up at the Command Bar for the Order List Tab
  2. Add a new Button
    • Write my own method
    • Method name: ClearAll
    • Change your icon
  3. Add a new Button
    • Write my own method
    • Method name: ExecuteBatch
    • Change your icon
  4. Add a new Button
    • Write my own method
    • Method name: ToggleBatch
    • Change your icon

Done with the screen, here is a picture of how the final layout


Go ahead and save your solution and do a build.

Now on to the code, this will be the painless side of it.

  1. Click on the Orders Table control
  2. Edit PostRender Code
  3. Add the following code into its method
    // Store our enhanced table as part of our contentItem
    contentItem.enhancedTable = new itgLs.EnhancedTable({
        element: element,
        contentItem: contentItem

This is the bare minimum you need to do. Go do a build and run your app. Couple of things

  • Multi column sort works
  • Click on the Column name to toggle direction
  • Notice the position number as you add more columns
  • Notice as you remove a column sort, positions adjust
  • Filter popup will display, but we’ve not wired it up yet

Ok cool eh?

Lets go wire some things up

  1. Double click on your ClearAll button
  2. Add the following code to its execute method
    // Get our table
    var table = screen.findContentItem("Orders").enhancedTable;
    // Clear all the sorts and filters
    // If we are not in batch mode, reQuery
    if (!table.getBatchMode()) table.reQuery();
  3. Double click on your ExecuteBatch button
  4. Add the following code to its method
    // Get our table
    var table = screen.findContentItem("Orders").enhancedTable;
    // Execute the sort/filter settings
  5. Double click on your ToggleBatch button
  6. Add the following code to its method
    // Get our table
    var table = screen.findContentItem("Orders").enhancedTable;
    // Toggle batch mode
  7. Edit PostRender Code for popup button SetColumnFilter
  8. Add the following code to its method
     // A check mark icon with text at the bottom
     itgLs.ui.convertToIconicButton(element, contentItem, "accept");
  9. Edit PostRender Code for popup button ClearColumnFilter
  10. Add the following code to its method
    // A minus icon with text at the bottom
    itgLs.ui.convertToIconicButton(element, contentItem, "remove");
  11. Double click on your popup button SetColumnFilter
  12. Add the following code to its execute method
    // Get our table
    var table = screen.findContentItem("Orders").enhancedTable;
    // Call our set filter function for this column only
    // Close the popup
  13. Double click on your popup button ClearColumnFilter
  14. Add the following code to its execute method
    // Get our table
    var table = screen.findContentItem("Orders").enhancedTable;
    // Call our clear filter function for this column only
    // Close the popup

Not too many lines of code now is it? Would be great if someone out there creates a screen template!

So there you have it… Go ahead and run the app and test away

  • Test multi column filtering
  • Add sorting into the mix
  • Toggle Batch
  • Set up your filter and sorts
  • Then Execute the batch
  • Try the one click clear all, less server trips!

You can pass the following properties when you create the EnhancedTable

Name of the filter popup
Defaults to FilterPopup
Name of the ColumnName property
Defaults to ColumnName
Name of Operator1 property
Defaults to Operator1
Name of Operator2 property
Defaults to Operator2
Name of the Concat property
Defaults to Concat
Name of the Value1 property
Defaults to Value1
Name of the Value2 property
Defaults to Value2
Defaults to false
Defaults to false

So whats missing and left to do?

Validations on the filter input boxes
Ability to dynamically change the input boxes to a native control
Anything else I forgot… 🙂

LS2013 Core Project Updated

Note that the March 2014 Update to Visual Studio caused, what seems like, breaking changes to the user management side of this tutorial.

As time in the next few weeks allows, I’ll be working on updating the content.

We have pushed an update to GitHub. This is a major refactoring which will cause issues with the previous code.

In this update we have moved most of the logic into the external itgLsHelper.js file. There were some minor updates to tables and a few screens that I’ve documented and put in a page here. I’ve also added a BreakingChanges file to the project on GitHub.

Here are some of the items in this update:

  • Password field with validation
  • Confirm Password field with validation, both of these will give you some pretty good information on how to easily implement your own custom validators.
  • A screen picker field used in the tile menu system
  • Client side user roles and permission checking
  • Ability to export the tile menu for inclusion in other or same project(s)
  • Ability to import/use a JSON representation of a tile menu, makes for fast loading
  • Much cleaner by using the itgLsHelper space

Note that these are not specific to the tile menus, but can be used in any other screen/code that you desire. Hopefully you’ll find the value has increased big time with this update. Let me know your thoughts.

Here are a few of the functions included in the itgLsHelper.js file:

init – initializes the system: gets user name & permissions, imports menus

passwordValidator – setup a visual field for password entry and validation

confirmPasswordValidator – setup a visual field for password entry and validate against the password field

screens – returns an array of your screens, name, display name and methods to show them

changeButtonIcon – changes the icon class of a button

colorPicker – setup a visual field as a color picker

iconPicker – setup a visual field as an icon picker

screenPicker – setup a visual field as a screen picker

userHasPermission – does the current user have the permission assignment

userHasRole – does the current user have the role assignment

tileMenu – setup a screen/container for a predefined MetroUI type tile menu

exportTileMenusToJson – export/return a JSON object representing all the tile menus

importJsonTileMenus – import a JSON object representing a set of menus and their tiles

importIconClassList – import a csv list of icon class list

urlParameterByName – get a URL parameter by its name

fixMetadataHandlerForEtag – a fix for a known ETag issue

fixJsonHandlerForEtag – a fix for a known ETag issue

internalHelpers – bunch of functions for internal use, but good information!


LightSwitch 2013 – Multi-HTMLClient Project!

In this post we will show you how to create a LightSwitch 2013 project that contains multiple HTMLClients. It’s a pretty exciting development, as we can now create apps for specific areas, Admin vs. Worker, and all share the same data source within a single solution. We have tested deployment to Windows Server with IIS and Azure with no issues or workarounds.

A side benefit is app payload. We can break up large enterprise grade apps into multiple clients thus keeping the individual downloads to a reasonable size.

Phil over at Xpert360 gave me a heads up that they had also done some work on multiple HTML Clients. I encourage you to check out their version.

So… here we go!

  1. Open Visual Studio 2013
  2. Create a new LightSwitch Desktop Project
  3. Name: LsMultiClient
  4. Solution name: LsMultiClient
  5. Create two test tables

  6. Set Forms Authentication
  7. Grant debug to SecurityAdministration
  8. Right click on the main LsMultiClient project
  9. Add a new Client, HTMLClient
  10. Name: App2
  11. Add screens to browse App2Items with add/edit
  12. Open the default.htm file
  13. In the document.ready section, update the msls._run() to show the screen you’d like to have as the start screen for this app, msls._run(“App2ItemsBrowse”)
  14. Save all
  15. Right click on the LsMultiClient.App2 project
  16. Select Remove
  17. Right click again on the main LsMultiClient project
  18. Add a new Client, HTMLClient
  19. Name: App1
  20. Add screens to browse App1Items with add/edit
  21. Open the default.htm file
  22. In the document.ready section, update the msls._run() to show the screen you’d like to have as the start screen for this app, msls._run(“App1ItemsBrowse”)
  23. Save all
  24. Right click on the main LsMultiClient solution this time.
  25. Select Add, existing project
  26. Navigate to the LsMultiClient folder, find the LsMultiClient.App2 folder and select the project
  27. Save all
  28. Close your solution
  29. In a Windows explorer, navigate to your LsMultiClient solution folder.
  30. Locate and edit the LsMultiProject.lsxproj in a text editor
  31. Towards the bottom of the file, locate the section.
  32. Copy the LsMultiClient.App1 section
  33. Paste it under the LsMultiClient.App1 section
  34. Change the
    ProjectReference Include=”LsMultiClient.App1\LsMultiClient.App1.jsproj” to
    ProjectReference Include=”LsMultiClient.App2\LsMultiClient.App2.jsproj”

  35. Replace the text in the tag to be LsMultiClient.App2
  36. Get the Project GUID from LsMultiProject.sln for your LsMultiClient.App2 project.
  37. Back in the LsMultiClient.lsxproj file Under the new copied section for LsMultiClient.App2.jsproj
  38. Replace the GUID in the tag with the App2 GUID from your LsMultiClient.sln file
  39. Save your files
  40. Back to Visual Studio 2013
  41. Open your LsMultiClient solution
  42. Select Build, Clean solution
  43. Select Build
  44. Run your app
  45. http://localhost:{port}/App1
  46. http://localhost:{port}/App2
  47. http://localhost:{port}/DesktopClient


  • Create your HTMLClients starting with your last one
  • You can remove the DesktopClient once you are sure you are done adding HTMLClients
  • Keep screen names globally unique
  • Make sure you set your startup project

You can download an example project from our github.

We will be posting an LsCoreProject with multiple HTMLClients soon.

LS2013 Core Project – PowerShell script to create new app

Here is a PowerShell script, as requested, that will copy your LsCoreProject to a location on your drive and change the name to your choosing. Since LightSwitch doesn’t have an easy way to create a template, this is a pretty good alternative.

Edit the script for your project locations, run the script, wait for the Done dialog, open the new project in Visual Studio 2013, Set the startup project, Set the SecurityAdministration as enabled during debug and you are good to go!!

# =================================================================
# Script to copy and rename a LsCoreProject file
# Should also work for any other LS Project with a few minor edits
# =================================================================

# Source solution location
$sourceLocation = "c:\temp\LsCoreProject-master\LsCoreProject"

# Target solution location
$targetLocation = 'c:\Users\Dale\Documents\Visual Studio 2013\Projects\LsCore'

# What is the original solution name
$origSolutionName = "LsCoreProject"

# What is the new solution name
$newSolutionName = Read-Host -Prompt "New Solution Name?"
$newSolutionFolder = $targetLocation + "\" + $newSolutionName

# Copy the Source to the Target folder
Copy-Item $sourceLocation $newSolutionFolder -Recurse

# Make sure we don't move forward until the folder has been created
while (!(Test-Path $newSolutionFolder))
     Start-Sleep -s 1

# Change to the target location
cd $newSolutionFolder

# Get all the files that match our orig solution name
$files = Get-ChildItem $(get-location) -filter *$origSolutionName* -Recurse

# Change the folder and filenames to the new solution name
$files |
    Sort-Object -Descending -Property { $_.FullName } |
    Rename-Item -newname { $ -replace $origSolutionName, $newSolutionName } -force

# Get all the files that has our original name in its body
$files = Get-ChildItem -recurse | Select-String -pattern $origSolutionName | group path | select name

# Loop over all the matching files, replace original with new
foreach($file in $files) 
	# Replace all the name occurances, save back to original file
	((Get-Content $file.Name) -creplace $origSolutionName, $newSolutionName) | set-content $file.Name 

# Acknowledge to the user that we're done
read-host -prompt "Done! Press any key to close."

Couple of things, make sure your file is unblocked before unzipping, edit the script for your source and target locations.

I’ll also post the script file on github.

Updates are also coming to the LsCoreProject.


LightSwitch 2013 – Screen shots of multi-client project

So we are in the early stages of documenting how you can have multiple HTMLClients in a LightSwitch 2013 project. But thought I’d throw out some teasers showing the viability. A lot more testing is in order but the process is looking good.

What you’ll be seeing is 1 LightSwitch solution with a Silverlight Desktop client, 2 HTML Clients. All sharing the same Server and data sources. I’ll get the process down and perhaps the community can then optimize it…

See what happens when you are challenged!!



LightSwitch 2013 Core Project with User Management, Tile Screens, Self Registration

Note that the March 2014 Update to Visual Studio caused, what seems like, breaking changes to the user management side of this tutorial.

As time in the next few weeks allows, I’ll be working on updating the content.


As noted in the title, this tutorial will show you how to setup a core LightSwitch 2013 project. Not just any LightSwitch project, but one that will allow User Management natively vs. having to use Web API. We’ll also show you how to implement a highly configurable system that supports creating MetroUI style tile menus. Finally, it doesn’t do any good if you can’t deploy the application, so we will show you how with Microsoft Azure.

I know that this is a huge tutorial, again. I did try to make it a bit more manageable by breaking it up into pages vs. one humongous post. I encourage you to go through the tutorial (at least read it) rather than just downloading and running the code, there are some items that you should understand in order to have a successful deployment. Or Not 🙂

Here are the topics and their logical order:

  1. Create the project
  2. Add external CSS
  3. Add external scripts
  4. Update the default.htm
  5. Add LogIn/LogOut/Register/ChangePassword
  6. Create the security data source
  7. Screens for permissions
  8. Screens for role management
  9. Screens for user management
  10. Tables for tile menus
  11. Screens for icon management
  12. Screens for menu management
  13. Create a tile menu screen
  14. Create a database project
  15. How to deploy successfully
  16. Wrap up
  17. How to update B1 projects

Tutorial code can be downloaded from github at LsCoreProject.

LS2013 Core Project – Screen shots

Here are images of the output from my post of LS2013 Core Project.

  • Tile Based Screen Navigation
  • Icon, Color and Permission Pickers
  • Management of Security Roles
  • Management of Users
  • Login/Register/ChangePassword
  • No Web API, Native HTML Client

      1 - Start

      2 - Admin

      3 -IconsBrowse

      4 -IconsImport

      5 - MenusBrowse

      6 - MenuView

      7 - MenuTileAddEdit

      8 - MenuTilePermissionPicker

      9 - MenuTileIconPicker

      10 - MenuTileColorPicker

      11 - MenuTileConfirmDialog

      12 - PermissionsBrowse

      13 - RolesBrowse

      14 - RolePermissions

      15 - RolePermissionsAdd

      16 - RoleAssignments

      17 - UserRegistrationsBrowse

      18 - UserRegistrationView

      19 - UserRoleAssignements

      20 - UserRoleAssignmentAddEdit

      21 - UserRegistrationAddEdit

      22 - UserRegistrationAddEditNew

LightSwitch 2013 – Modern UI Menus!

Tired of the old list menu that comes with LightSwitch?  Follow this tutorial and stand out from the crowd!  My apologies in advance for what seems like a long post… but trust me…it WILL be worth it!

Oh, I’ve also changed up a bit and included some images, let me know if it works or step by step is better…


Step 1 – Project Setup

Go to
Find the download button, and download the latest package of Metro UI CSS.
Extract the zip somewhere, remember the location!

Go to our repository on GitHub to download this project
Extract the zip

Open up Visual Studio 2013
Create a new project, name it: LightSwitchWithTiles
Once the project is created and Visual Studio settles down select the HTMLClient project
Create the following new folders under your Content folder


Right click on the Fonts folder, select add, add existing item
Navigate to your Metro-UI-CSS-master folder
Select all the files under the docs/fonts folder and click the add button

Back in Visual Studio
Right click on the MetroUICss folder you created, select add, add existing item
Navigate to your Metro-UI-CSS-master folder
We are only interested in Tiles, so we’ll include a subset of the full CSS
Select the following files under the Less folder and press the add button


Add a new file under your MetroUICss folder


Add the following into your LightSwitchWithTiles.less

 * Metro Bootstrap v 1.0.0
 * Copyright 2012-2013 Sergey Pimenov
 * Licensed under the MIT License (MIT)
// Core variables
 @import "variables.less";
// Our Tiles
 .metro {
 @import "colors.less";
 @import "mixins.less";
 @import "transform.less";
 @import "typography.less";
 @import "layout.less";
 @import "tiles.less";
 @import "icons.less";
 @import "icons-content.less";

Save the file, CSS will get generated

In your Content folder, add the following to the user-customization.css file

/* Allows MetroUICss to play nice with LightSwitch */
.metro-container *
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
/* End of ITG Add */

Under your scripts folder create a new folder


Add the itgMetroHelper.js from the LightSwitchWithTiles zip

Open the default.htm file
Add the LightSwitchWithTiles.css file to your css section before the user-customization.css file
Add the itgMetroHelper.js to your scripts section
Add update the document ready that LightSwitch generates with the following

var start = getUrlParameterByName("start")

Ok cool… core project has been setup. Now let’s work with the database side.

Step 2 – Core Database

For this demo we’ll be using a couple of tables to house our menu definitions.
We won’t get too elaborate to keep this demo manageable.
For a production application you will want to expand on this structure, adding choice lists, validation, etc.

Create a table just to hold a definition for a menu as shown below


Now let’s create the table for our tiles as shown below


Click on the Type property
In the properties window, click on Choice List, add the following


Click on the Size property and do the same


Click on the add relationship and define as shown below


Great! Last database work is to create a query for MenuTiles.
Still on the MenuTiles table, click on query, change the name to TilesForMenu
Configure the query as shown below


We’ll have LightSwitch do most of our work getting tiles with this query.

Ok… Database done… Yay!!

Step 3 – Menu Management

Since our application menus are database driven, we’ll need a way to manage/create them.
Note that our naming convention is a bit opposite than what LightSwitch recommends for screens. We prefix all screens with our database table name first, then the screen type. This allows us to keep all the screens together for a particular area and gets so important on large projects.

Create a new screen
Screen Name: MenusBrowse
Screen Data: Menus
Clean up the Display Name in properties to show Menus
Adjust your properties per your preferences, we set the list to be 400 max width
Add a new button to the Command Bar
Select Existing Method
In the showTab dropdown select addAndEditNew
Screen Name: MenuAddEdit
Screen Data: Menu Details only
Click Ok
Adjust your screen to your liking, here is ours


Go back to the MenusBrowse screen
For this new Add Menu button, change its Icon to Add

Click on the List for the Menus
In the properties window click on the Item Tap
Choose an existing method, viewSelected
Screen Namez: MenuView
Screen Data: Menu Details and Menu MenuTiles
This screen is really busy, yet a critical one so be patient.
Here is how we have designed it for this demo project


Here is the easiest way to create the above.
Delete both the tabs LightSwitch creates, should end up with a screen shown below.


Now add a tab back in, Make the tab a Column Layout
Then add two more groups under the tab, both Row Layouts


Change the Max width of Group1 to 300
Drag the MenuTiles query and drop it under the first row layout
Adjust your list to your liking, we went with Order and Name to be shown in a column layout


Now Click on and drag the Selected Item part of the MenuTiles query and drop it under the second row
Remove the Created/Modified and Menu fields
Adjust the screen to your liking, as you see we used additional Column Layouts


Now for some buttons
Under the main Group (Tab), Command Bar, Add

Choose existing method, Under MenuTiles, addAndEditNew
Screen Name: MenuTileAddEdit
Screen Data: MenuTile Details
Remove the Menu field from the screen
Adjust the layout to your liking or follow ours


Back to the MenuView screen

Change the Display Name of your Add button to just Add Tile
Change the Icon to Add

Add another button, existing method, Under MenuTiles, editSelected
Change the Display Name to Edit Tile
Change the Icon to Edit, uncheck Is Visible

Add another button, Write my own, name it DeleteMenuTile
Change the Display Name to Delete Tile
Change the Icon to Remove, uncheck Is Visible

Add another button, existing method, Under Menu, edit
Change the Icon to Edit

Add another button, Write my own, name it DeleteMenu
Change the Name to Delete Menu
Change the Icon to Remove

Now we need to add some code for the following


I won’t go into details but review the following and add into your appropriate methods

// Optional
 // Put our Menu Name as the screen header
 myapp.MenuView.MenuTiles_postRender = function (element, contentItem) {
// Bind so that changes will be reflected
 contentItem.dataBind("screen.Menu.Name", function (newValue) {
 contentItem.screen.details.displayName = newValue + " Menu";
// When a tile in the list is tapped, hide/show appropriate buttons
 myapp.MenuView.MenuTiles_ItemTap_execute = function (screen) {
// Tile selected, show edit/delete tile buttons
 screen.findContentItem("DeleteMenuTile").isVisible = true;
 screen.findContentItem("EditMenuTile").isVisible = true;
// Yet hide the buttons to edit/delete the menu itself
 screen.findContentItem("EditMenu").isVisible = false;
 screen.findContentItem("DeleteMenu").isVisible = false;
// Delete the selected tile
 myapp.MenuView.DeleteMenuTile_execute = function (screen) {
// Grab the selected, delete and apply
// Since we won't have a tile selected anymore, hide the tile buttons
 screen.findContentItem("DeleteMenuTile").isVisible = false;
 screen.findContentItem("EditMenuTile").isVisible = false;
// Now show again the menu specific buttons
 screen.findContentItem("EditMenu").isVisible = true;
 screen.findContentItem("DeleteMenu").isVisible = true;
// Delete the entire menu and associated tiles
 myapp.MenuView.DeleteMenu_execute = function (screen) {
// Delete and commit, returning us to the browse screen

Of course you would add appropriate confirmations and validations to all the screens. Especially your delete actions. But for this demo we’ve tried to make it robust enough to show the power yet try to remain somewhat brief.

Go ahead and build your app to make sure we’re good from this point.

Step 4 – Build Menu Screens

Let’s create some screens to test our new menu infrastructure.

Create a new Browse Screen
Screen Name: Start
Screen Data: none

Add Data Item, select our query TilesForMenu


Click on the Query Parameter MenuName
In the properties window click in the Parameter Binding field
Click on Add Property

In the screen definition window, add a custom control under the group tab
Data for the new control, leave as default: Screen
Change the name of the control to ModernUIContent
Set the Label Position to be None
The rest of the properties can stay default
Click on the Edit Render Code link for this control
For intellisense, add the itgMetroHelper.js to the top of this file
Add one line of code as follows:

createModernTileMenu(element, contentItem, "Start");

Create two more screens just for testing. Neither will use data.

Screen 1 Name: Profile
Screen 1 Data: None

Screen 2 Name: AdminMenu
Screen 2 Data: None

Open up Screen 2 and follow the procedure above to make it a tile menu screen. Use “Admin” as the name passed to our createModernTileMenu.

Right click on your Start screen and set it to be your Home Screen.

Build the app and run.

Hmmm… nothing?

Good… as you see we have a little chicken before the egg scenario here. So how do we get to our menu administration without a menu. Well thanks to a post by Jewel Lambert we’re already setup to do this. That little modification we did to the default.htm file at the beginning will be our friend.

To get to our menu administration you’ll add a parameter to your url as so


Now normally before pushing to production you would put a bunch of permission checking on the screens before going live so that only security administrators can access. But for this demo we won’t go into that detail.

Btw, if this trick did not work, check to make sure you have all the CSS and JavaScript references in your default.htm file. Also make sure you do a build after you add those references in.

You should now be able to get to your Menus screen

Go ahead and create (add) your first menu
Name: Start
Screen: Start
Click on the new menu list item to get to the view

Add a tile
Order: 1
Type: Simple
Name: Profile
Size: Default
Color: bg-lighterBlue
OnClick: myapp.showScreen(‘Profile’)
Status: Profile
Icon: icon-user

Add a tile
Order: 2
Type: Simple
Name: Admin
Size: Double
Color: bg-teal
OnClick: myapp.showScreen(‘AdminMenu’)
Status: Admin
Icon: icon-power

Back to the Menus screen

Add a new menu
Name: Admin
Screen: AdminMenu

Click on it so we can add a tile

Add a tile
Order: 1
Type: Simple
Name: Menus
Size: Default
Color: bg-yellow
OnClick: myapp.showScreen(‘Menus’)
Status: Menus
Icon: icon-list

Now… we should be good to go to our normal main screen. If you click on the app icon this will refresh and get you there or type the address in.


If your icons do not show. Go check the CSS file. I’ve seen where the LESS compiler in Visual Studio uses full drive path vs URI in its location of the icons. Do a search for ../fonts and see what path its trying to use.

You can also just use the precompiled CSS in our project.

Check out more colors at
Icons at

So… explain the data fields?

Menus – This is just a bucket so we can get our tiles
MenuTiles – This is the meat of the system so let’s go over the fields

Order – this is the display order for tile layout
Type – this will be the type of tile, currently for this demo only simple is implemented
Name – internal identifier for the tile
Size – half, default, double, triple, quadro
Color – background color of the tile, class based
OnClick – javascript function to execute, ie: myapp.showScreen(‘SomeScreen’)
Status – text to display on the bottom line of the tile
StatusFgColor – class based
StatusBgColor – class based
Icon – class based
IconFgColor – class based
IconBgColor – class based
Badge – number to display on the lower right of the tile
BadgeFgColor – class based
BadgeBgColor – class based

Red means required
If no Order is set, tiles will be ordered by its Name

I’d like to thank Jewel Lambert for the wealth of knowledge she brings to the LightSwitch community.
I’d also like to thank Sergey Pimenov for his great work on MetroUICSS… nicely done!


LightSwitch 2013 How To Use – GetExpandedUser

We’ve been asked how to use some of our AccountController features. One very handy, which everyone should start to use, is the GetExpandedUser call. With this call you can easily get user data that includes Roles and Permissions and have it saved into the global application space. This allows you to easily do some client side branching without going back to the server.

Obviously this is only valid for the current user session but if, when logging in, the user opts in to “Remember Me”, it will easily pull the data when the new session starts.

Typically you’ll add this to your startup screen created method.

myapp.UserMenu.created = function (screen) {

     // If we don't have a global user, go get the logged in user data
     if (myapp.user == undefined) {
          $.getJSON("/rpc/Account/LoggedInUser").then(function (data) {
               $.getJSON("/rpc/Account/GetExpandedUser/" + data.Name, function (userData) {
                    if (userData != undefined) {
                        myapp.user = $.parseJSON(userData);

LightSwitch 2013 User Management – HTML – Part 2

Adding the User Interface

There are a few prerequisites in order for this to work and/or make any sense.  So please go thru the following posts to get up to speed:

Start here…  How To Create An Expanded LightSwitch 2013 Project

Then… LightSwitch 2013 User Management – HTML – Part 1

Note that we are using JQuery 1.9.1, if something breaks check the file requirements in the _AdminLayout.cshtml.

So now that we have LightSwitch, MVC, Web API and our AccountController all working correctly, lets go add a UI to manage our users.  To do this we’ll be using Kendo UI for our grids and Bootstrap for the responsive layout.

  1. Right click on your server project, Select Manage NuGet Packages…
  2. Search for and install KendoUIWeb
  3. Add a new folder under your server scripts folder, name it: App
  4. Copy the files roles.js and users.js, from the GitHub zip, into this folder and include them in your project
  5. Under your server project Views folder create a new folder named: Admin
  6. Copy the files Index.cshtmlRoles.cshtml and Users.cshtml into this folder and include them in your project
  7. Copy the file _AdminLayout.cshtml into your server project Views/Shared folder and include it in your project
  8. Copy the file AdminController.cs into your server project Controllers/Mvc folder and include it in your project
  9. We now need to update jquery.validate, so right click on your server project, Select Manage NuGet Packages…
  10. On the left side of the NuGet dialog, Select Updates
  11. Select JQuery Validation, click Install
  12. Close NuGet
  13. Open the AccountController.cs and remove your comment from the [Authorize] attribute
  14. Final item… Critical for testing!!
  15. Open your server project root web.config file, Update the following appSettings:
  16. Select Build, Clean Solution
  17. Select Build, Build Solution
  18. Run your solution.
  19. Test at http://localhost:{port}/Admin and select Users or Roles.

Few things that need mentioning

  • Complex data is sent in the body of the request
  • When editing a user in the Admin App we don’t mask the password input on purpose
  • You can unlock a locked account by editing a user and unchecking the Locked checkbox
  • When editing a user, password will  only be changed if you add something into the password box, standard password rules apply
  • We’ve stripped out a lot of the validation to simplify this demo
  • We are not using bundling, again to simplify the tutorial
  • The client app is responsible for catching and notifying the user of exceptions.
  • This version of the AccountController is designed for Ajax calls.  We also have a version designed for server side MVC/API code.  Converting is a good exercise that I highly recommend
  • Remember… this is a demo!

I hope this will be as valuable to you as it is to us.. finally no reason for the Silverlight Client!

Happy Coding!

LightSwitch 2013 User Management – HTML – Part 1

Building The Base

This project builds upon a previous project. If you have not already done so, follow the instructions in the following blog post first:

How To Create An Expanded LightSwitch 2013 Project

You will also need the code from GitHub at:
Updated on GitHub: AccountController.cs


Make sure you right click on your downloaded file and unblock the file.

All done? Great… lets start!

  1. Under your App_Start folder in your server project, Open WebApiConfig.cs
    Add the following new route

    name: "DefaultRpc",
    routeTemplate: "rpc/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
  2. Save and close the WebApiConfig.cs
  3. Add a new folder in the root of your server project name it: DTOs
  4. Add another new folder, this time in your Controllers folder: RpcOdd… but with LightSwitch I have found the easiest way to add external files is to load up an instance of Windows Explore and copy from there. Then back in Visual Studio, show all the files for your project, press the refresh button, then right click on the new files and include in your project.So… lets add some files.
  5. Add the AccountDTOs.cs file from the DTOs folder, in the zip you downloaded from GitHub, to your server project DTOs folder.  Include the file in the project.
  6. Add the AccountController.cs from the RPC folder, in the zip you downloaded from GitHub, to your server project Controller/Rpc folder. Include the file in the project.
  7. Right click on the your server project, select Add, Reference, find and select:  System.Web.ApplicationServices
  8. Open the properties of your LightSwitch main project. Click on the access control tab and add a few permissions so you can see how this works.
  9. Save all
  10. Select Build, Clean solution
  11. Select Build, Build solution
  12. Run your solution…

Hopefully you will get a clean build.

So… now lets talk about good ways to test API/RPC type of calls. You might want to Install Fiddler… it’s a pretty robust product…

But, if you have Google Chrome, Go to the app section in Chrome and install the REST Console. This app does a nice job of including authentication into the calls it makes. Definitely should have this in your tool belt since putting authentication into Fiddler is not so easy.

Now that you have the REST Console installed… you can call some of the functions in the account controller. Notice the /rpc/ in the URL:


Hmmm… didn’t work? Most likely due to the [Authorize] attribute is still turned on in the controller.

For this exercise, go back into the AccountController.cs and comment out the attribute beginning at line 46 of the controller. Then test again.

Pretty cool eh?  Next up will be a full HTML based User Management app.

How To Create An Expanded LightSwitch 2013 Project!

This process requires the March 2014 Update

I’m happy to report that the March 2014 Update brought back SCAFFOLDING!! Yay!

How to add Web API and MVC to a LightSwitch 2013 project

Visual Studio LightSwitch is a great product. But it’s not the end all and most professional development projects require a mix of technologies to be considered successful. By following these steps, you’ll end up with a LightSwitch project that has the HTML Client, Silverlight Client, MVC, Web API and Web Forms with the naming conventions of your choosing. Giving you a solution without restrictions!

First time thru the tutorial it may still take you 15 minutes. So give it a try and see what you think… Oh… btw you can clone/download the updated sample project from github… you’ll need this, but really only for the WebApiConfig.cs.

  1. Start Visual Studio 2013
  2. Create a new project: File, New Project…
  3. Select LightSwitch HTML Application
  4. Name the project: myTest
  5. Name the solution: myTest
  6. Create new table
  7. Name it TestItem, 1 property, Name
  8. Add your browse/add/edit screens for the TestItems table
  9. Double click on the properties file for the myTest project
  10. Enable forms authentication, and allow Security Admin for debug
  11. Save the solution, do a full build, run the app
  12. Add some test data into the table
  13. Back into Visual Studio
  14. Right click on your server project
  15. From the Add Scaffold window, click on MVC 5 Dependencies
  16. Press the Add button
  17. On the Add MVC Dependencies popup
  18. Select the Full Dependencies option, press the Add button
  19. Close the web.config that gets automatically loaded
  20. In the App_Start folder, open RouteConfig.cs
  21. Add the following line under the other IgnoreRoutes
    routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });
  22. Right click on the App_Start folder, add a new Class file
  23. Name it WebApiConfig.cs
  24. Replace the contents with the contents from the WebApiConfig.cs file from our zip file
  25. Add two folders under the Controllers folder
    1. api
    2. mvc
  26. Right click on the api folder, select add, select New Scaffold Item
  27. Select Web Api 2 Controller with Read/Write actions
  28. Name it TestController
  29. Follow the instructions of the readme.txt file that automatically opens in the editor
  30. Make sure the GlobalConfiguration.Configure gets added to the beginning of Application_Start
  31. In the Controllers folder again, right click on the mvc folder, select add, select New Scaffold Item
  32. Select MVC 5 Controller with read/write actions
  33. Name it HomeController
  34. In the HomeController.cs file that gets automatically loaded
  35. Right click on the ActionResult Index()
  36. Select add view
  37. In the Add View dialog, leave all defaults, just click on add
  38. Go edit your default.aspx page in the root of the solution
  39. Comment out the first line… add some test text to the body
  40. Do a full save, then rebuild, run your app

Your LightSwitch html app will run first with your custom URL path

Moving on, let’s test access to the ApplicationData.svc file

So far so good eh? How about our MVC?

Yay! Looking good… now our default.aspx file in the root…

Yep that works too… final test… the Web.Api side…

You can now go in and clean up the project, delete the test screen, test table, etc.
Save the solution again.

This would be the point when you would add your project into source control.

One of the great features out of this is we can use Visual Studio LightSwitch to do all of our data management without having to go down into the Entity Framework.

Happy coding!

Tagged , , ,

Rename LightSwitch 2013 HTMLClient

When creating a new Visual Studio LightSwitch HTML Client, the “powers” have hard coded the naming of what the project names shall be.  For the publicly visible HTML Client project the name will be {mySolution}.HTMLClient and your deployed URL will also have the name of {url}/HTMLClient.  Obviously not the best scenario for most applications.

If you follow these steps you’ll be successful at not only changing the name of your project in Visual Studio, but also changing the public URL.  Replace {mySolution} with the name of your own solution name.

Obligatory Disclaimer… please backup your project/solution before attempting this procedure!

  1. Open your solution in Visual Studio 2013
  2. Rename {mySolution}.HTMLClient to your new name {mySolution}.App
  3. Close the solution
  4. Important… Close Visual Studio
  5. Open a Windows Explorer, navigate to your solution folder
  6. In your favorite text editor, open the {mySolution}.sln file
  7. Replace all instances of the name HTMLClient with your new name, App
  8. Save
  9. Next level down, open the {mySolution}.lsxproj file
  10. Replace all instances of the name HTMLClient with your new name, App
  11. Save
  12. Rename the HTMLClient folder to your new name, App
  13. Save
  14. Next level down, in your App folder (old HTMLClient folder)
  15. Open the App.jsproj file, this should already reflect the new name
  16. Replace all instances of the name HTMLClient with your new name, App
  17. Save
  18. Open the ModelManifest.xml file
  19. Replace all \{mySolution}.HTMLClient\ with your new name, App
  20. Save
  21. Start Visual Studio 2013 again, open your solution
  22. Once fully loaded, select Build, Clean Solution
  23. Then select Build, Build Solution
  24. Double click on a screen to validate the editor is still working
  25. Double click on a table also to validate the editor is still working
  26. Run your app (F5)

Your solution and browser should now be using the new name.  Yay!!

Does this now open up the possibility of more than 1 HTMLClient?  Absolutely!!  Especially if you already had the original HTMLClient in source control.  Perhaps for another post 🙂

Tagged , ,