Monthly Archives: December 2013

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!

Enjoy!

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

  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

Notes

  • 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 { $_.name -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 LsCoreProject.zip 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.

Enjoy!