Blog of an IT Guy

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 http://github.com/dwm9100b/LsEnhancedTable 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:
   • http://services.odata.org/northwind/northwind.svc
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 so
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
   table.clearAll();
   
   // 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
   table.reQuery();
   

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
   table.setBatchMode(!table.getBatchMode());
   

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
    table.setColumnFilter();
    
    // Close the popup
    table.closeFilterPopup();
    
    

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
    table.clearColumnFilter();
    
    // Close the popup
    table.closeFilterPopup();
    

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

filterPopupName

Name of the filter popup

Defaults to FilterPopup

filterPopupColumnName

Name of the ColumnName property

Defaults to ColumnName

filterPopupOperatorName1

Name of Operator1 property

Defaults to Operator1

filterPopupOperatorName2

Name of Operator2 property

Defaults to Operator2

filterPopupConcatName

Name of the Concat property

Defaults to Concat

filterPopupValueName1

Name of the Value1 property

Defaults to Value1

filterPopupValueName2

Name of the Value2 property

Defaults to Value2

batchMode

True/False

Defaults to false

filterDisabled

True/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… 🙂

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

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!