Category Archives: MetroUI

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