Monthly Archives: November 2013

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!