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…
- Create a new LightSwitch HTML Project
- Lets name it: EnhancedTable
- We’re going to use an external data source
- Select the OData Service option
- Use the following endpoint:
- Uncheck the ‘as read-only’
- Under authentication, select none
- When prompted to Choose your Entities
- Select Order
- Expand Order, Related Entities
- Select Employee
- Name the data source: Northwind
- 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.
- Right click on your HTML Client project
- Select Manage NuGet Packages
- Select the Online packages
- 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
- Three files get installed
Add all 3 files to your HTML Client default.htmitgLsEnhancedTable.cssLo-Dash.jsitgLsEnhancedTable.js
- 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.
- Right click on your Screens folder
- Select Add Screen
- Lets use the new “Common Screen Set”
- Screen Data, Select Northwind.Orders
- Once LightSwitch does its magic, you’ll land on BrowseOrders
- Change the default Tile List for Orders to a Table
- Drag over some additional Order properties
- Freight
- ShipName
- ShipCity
- Employee
- Expand the Employee, change to a row layout
- Drag the Employee Last Name up under Ship City
- Delete the rest of the row layout for employee
- Change the Display Name for Last Name to Employee Last NameHere is how the screen should look by now
- 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.
- Type: String, Name: ColumnName
- Type: String, Name: Operator1
- Type: String, Name: Value1
- Type: String, Name: Concat
- Type: String, Name: Operator2
- Type: String, Name: Value2
The following new Local Properties need to have a Choice List. So for each one:
- Operator1
- Concat
- Operator2
- Over in Properties
- Click on Choice List
- 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
- Add Popup
- Leave as default Rows Layout
- Change the name to: FilterPopup
- Case sensitive!
- In order, drag the following local properties into this popup
- ColumnName
- Operator1
- Value1
- Concat
- Operator2
- Value2
- Change Column Name to be a Text control
- In properties for each, change Label Position to NoneYou should have a screen that looks as so
- In your popup, add a new group, change it to Columns Layout
- Add a button into this group
- Write my own method
- Method name: SetColumnFilter
- Change its Display Name to “Set”
- 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
- Up at the Command Bar for the Order List Tab
- Add a new Button
- Write my own method
- Method name: ClearAll
- Change your icon
- Add a new Button
- Write my own method
- Method name: ExecuteBatch
- Change your icon
- 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.
- Click on the Orders Table control
- Edit PostRender Code
- 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
- Double click on your ClearAll button
- 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();
- Double click on your ExecuteBatch button
- Add the following code to its method
// Get our table var table = screen.findContentItem("Orders").enhancedTable; // Execute the sort/filter settings table.reQuery();
- Double click on your ToggleBatch button
- Add the following code to its method
// Get our table var table = screen.findContentItem("Orders").enhancedTable; // Toggle batch mode table.setBatchMode(!table.getBatchMode());
- Edit PostRender Code for popup button SetColumnFilter
- Add the following code to its method
// A check mark icon with text at the bottom itgLs.ui.convertToIconicButton(element, contentItem, "accept");
- Edit PostRender Code for popup button ClearColumnFilter
- Add the following code to its method
// A minus icon with text at the bottom itgLs.ui.convertToIconicButton(element, contentItem, "remove");
- Double click on your popup button SetColumnFilter
- 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();
- Double click on your popup button ClearColumnFilter
- 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… 🙂