Tag Archives: LightSwitch

LightSwitch – Common Core Teacher Evaluations


Here we’ll show you, via video, an application we’ve written to support the Common Core Standards for Education.  Its an evaluation system that in its current form is about teachers.  But we’ve made it so that with just a bit of terminology change, it can morph into an evaluation system for most anything.  Living or not!

  • Based on TNTP.org simplified rubric
  • Multi-tenant
  • Drag and Drop sorting
  • Tile based menus
  • Role based
  • Analytics with pretty graphs
  • Supports desktops down to smart phones!

Check it out on our tutorial site… TES

You can also see the video and more up on our YouTube Channel.

Tagged , ,

lsWireCore Project Updated v1.0.6


Updated to lsWires.js v1.0.6

Added Database Project to pre-seed the tiles
Just need to edit the tiles in the browser to add the icons

Added lsWiresExtras folder with the security tile icons
Highly recommend Syncfusions Metro Studio for additional icons.

Updated the CopySolution.ps1 script

Fixed Visual Studio from changing IIS ports on rebuilds

This should be the project that you use our CopySolution on

We’ve moved the repo to https://bitbucket.org/interbay/lsWireCore

Don’t hesitate to holler if something breaks!

Well it broke… Arrrgggg!!  Hopefully easy work around… just do a full rebuild after you download. 
(thanks Michael Washington)


Tagged , , ,

lsWires.js Updated – 1.0.6

Good day folks,

lsWires.js has been updated, 1.0.6
lsWires.js now embeds its dependencies
lsWires.js repository has moved:  http://bitbucket.org/interbay/lswires
lsWires.js 1.0.6 will most likely break things
lsWires.js documentation will be updated shortly
lsWires.js samples will be converted and moved over to Bitbucket

We’ve also added a new database project that will pre-seed the tiles for managing security.
Have added a folder lsWiresExtras that includes a few icons for the tiles
Updated the CopySolution script, but the better solution to copy is the lsWireCore project due to a naming issue.

We’ve done some pretty significant changes under the covers and we appreciate the patience.  One of the big ones is incorporating “signals” for hooking into the jQuery Mobile Page events.  We’re also providing a much simpler, yet more powerful, tile based menu system.  I think you’ll appreciate its simplicity.  For example:


We’ll also be posting a new “real application” video that will showcase what you can do with the new 1.0.6.  Which is what the image above is from.  I think you’ll be pleased with what you see and how you can bring excitement to your LOB apps!

Stay tuned!

Tagged , , ,

LightSwitch Tutorial – Create a Multi-Select Pick List

We’ll show you how you can easily create a pick list that allows selecting multiple items, work those items, show what’s selected when you go back into the pick list.  It’ll quickly become part of all your projects!

In this tutorial we show how to take our core project, and change the pick list for adding/removing permissions from Security Roles.  Allowing the Admin to remove/add permissions in one swoop vs. having to keep popping up a pick list for each.

So check it out at our tutorial site:  LightSwitch.CodeWriting.Tips

Here are the screen shots of what you’ll get, open the picker.


Select some items, click the save button.


Now open the picker back up, notice it preselects.  Go ahead and remove a couple and add others.



Tagged , ,

LightSwitch – Single Production Database, Multiple Applications?

Yes you can!

We’ll show you how you can actually use the same production database for multiple LightSwitch applications.  We’ll also show you how you can share common tables. And we’re not talking by OData endpoints here.

Great for situations where you are limited to the number of databases, not to mention simplifying maintenance.

Check it out on our tutorial site… lightswitch.codewriting.tips  – with videos!

Tagged , ,

LightSwitch HTML Client – The lsWire Core Project

Our new lsWire Core project will be the basis for all of our tutorials going forward.

Its based on the lsWires framework and is our first tutorial being hosted on our new site, http://lightswitch.codewriting.tips

This is also our first tutorial that we’re providing a “Starter Kit” so that you can not only quickly get going, but that you can create as many new solutions from this core project as needed.

This little item alone will, hopefully, dramatically change the landscape of the LightSwitch ecosystem. By allowing developers to provide their own starter kits from their own amazing solutions.  Especially since Visual Studio has not provided a means for creating templates from LightSwitch Applications.

Click here for a direct link to the tutorial.

Tagged , ,

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 http://metroui.org.ua
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)
 * http://opensource.org/licenses/mit-license.php
// 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 http://metroui.org.ua/global.html
Icons at http://metroui.org.ua/icons.html

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!


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 , ,

Add ASP.NET MVC to LightSwitch 2013

I’ve worked with Microsoft LightSwitch since its early beta days.  Its exciting to see all the new changes coming with the new Visual Studio LightSwitch 2013.  One of the interesting areas is being able to use LightSwitch for your backend and mobile development and other technologies in the Microsoft stack for the desktop.

In this first post I’ll show you how we have been successful in adding the MVC framework to a LightSwitch project.  You’ll be able use the RAD tools of LightSwitch to develop your database, business logic and mobile screens.  And then use the full power of ASP.NET MVC to do your full web based desktop application, including the new rage of SPA’s.

We’ve been successful in using this process for a large application using LightSwitch, ASP.NET MVC/API, Bootstrap and Kendo UI.  An amazing combination and one that I’ll continue to blog about in upcoming posts.

Enough of the chatter… Lets get to it…

Visual Studio 2013 Preview and about 10 minutes is required.

  1. In Visual Studio 2013 (VS), select File, New Project…
  2. Under installed templates, select LightSwitch
  3. Select one of the LightSwitch HTML Application templates (C# or VB)
  4. Name your project and solution, press Ok
  5. VS will create your project and land you on the “Start with data” page
  6. Click on “Create new table”
  7. Name the table “AppUser” (for example sake)
  8. Add a couple of properties, Property1, Name, string
  9. Property2, Email, email address
  10. At the bottom of the screen, click on HTMLClient
  11. Then at the top of the screen, click on Add: Screen
  12. Select the “Browse Data Screen”, Screen Data as AppUser, click Ok
  13. Leave the generated screen with defaults for this example
  14. Save all files, build the solution
  15. You should get a successful build

Now we move over to the solution explorer side.  The following will be done in the “server” project:

  1. Right click on the server project, Select Add… Scaffold…
  2. In the popup dialog, select “MVC 5 Dependencies”, click Add
  3. In the second popup, select “Full dependencies”, click Add
  4. VS will add and configure “most” of the required items for the MVC framework
  5. Right click on References, select Add Reference…
  6. In the popup dialog, select System.Web, click Ok
  7. Right click on the server project, select Add… New Folder… name it “Controllers”
  8. Right click on the Controllers folder,  select Add… Scaffold…
  9. Select “MVC 5 Controller – Empty”, click Add
  10. Name the controller “HomeController”, click Add
  11. Right click on the Views folder, select Add… New Folder… name it “Home”
  12. Right click on the Home folder under Views, select Add… Scaffold…
  13. Select the “MVC 5 View – Empty without model”, click Add
  14. Give the view the name of “Index”, leave the rest as defaults, click Add
  15. In the resulting Index.cshtml (vbhtml) file, edit to show the traditional “Hello World!”
  16. Save all files
  17. Build the solution, should be successful
  18. Run the app (F5)…

The HTMLClient will run first, this can be changed as needed.  You’ll get a LightSwitch HTMLClient browse screen that doesn’t show any records, since we don’t have any data.  This validates that the LightSwitch side of the app is functioning correctly.

Copy the URL, open up a new browser or tab, paste in the URL.  Replace the HTMLClient part of the URL with Home.  You should get the Hello World page being server up by the MVC framework.

So in less than 10 minutes you’ve successfully turned a LightSwitch 2013 project into a platform that has some amazing possibilities.  Hopefully the development community will start to take this tool seriously!

Stay tuned for upcoming posts of our integration with Web API, Bootstrap and Kendo UI.


Tagged , ,