A LightSwitch HTML client header for a desktop browser LOB application look and feel
The power of Visual Studio LightSwitch never ceases to amaze me. Just when you think you've hit a roadblock, a solution seems to pop up after closer investigation. As I say to everyone, "LightSwitch is always the right technology" © :)
In this blog post we'll examine how you can use the techniques discovered in my previous blog post to replace the default HTML client header with a totally different header, that I believe is more suited to large form factors or traditional desktop browser LOB applications. We will create a sample application based on the well known Northwind database to display a series of tabs showing Customers, Suppliers, Shippers, Territories, Employees and Orders. In addition, we will show our own title and add a series of toolbar buttons for good measure. The entire project will be available for download at the end of the article.
Basically, we will end up with this:
From this default header:
In the process of doing this we will uncover the following:
- Creating a replacement header as an external *.htm template and loading that at run-time
- Replacing the default header
- Using the HTML KickStart tab control from http://www.99lime.com/elements/
- Using Font Awesome icons (included in the HTML KickStart bundle) from http://fortawesome.github.io/Font-Awesome/
- Using the jQuery Mobile horizontal button groupcontrol from http://view.jquerymobile.com/1.3.2/dist/demos/widgets/buttons/
Initial basic setup (we will just glance over these):
- Start up VS2013 Preview and create a new LightSwitch HTML Client project named LightSwitchHeaderChange
- Make sure you have the Northwind database installed locally and if not, download it from the approproate Microsoft download center and install it
- Create a new Database Data Source in the Server project and name it "NorthWindData"
- Import all the database tables from that database into the data source
- Create a new "Browse Data Screen" screen in the HTML client project, select NorthWindData.Customers as the Screen Data and name the screen "Home"
- Rename the default singe tab on the screen to "CustomerTab"
- At this point it is good to run the application to make sure everything is working and you can browse the default list of Customers on the new Home screen
Create all the Home screen tabs and required screen data:
- Add the following additional screen queries: Suppliers, Shippers, Territories, Employees and Orders
- Add the following additional screen tabs: SupplierTab, ShipperTab, TerritiryTab, EmployeeTab (you can optionally change the Display Name of each of the screen tabs to read Customers, Suppliers, Shippers, Territories, Employees and Orders if you like)
- Drag each query on the left to its appropriate tab on the right (e.g. Suppliers query to SuppliersTab, Shippers query to ShippersTab, etc) to automatically create a list view of each query under its respective tab
- Your screen designer should now look like the following:
- At this point it is worth while to run the application again to make sure that each tab works and when you click on it you can see the list displayed under the appropriate tab and your application should look something like the default header image above.
- Lets change the default layout of the list on the Customer tab to look like the first image above, with three columns per row, by changing the List layout structure to the following:
- Once again run the application to make sure everything is working as expected. At this point it might also be a good idea to make a backup copy of the application by zipping up the entire folder or even just copying it.
Add HTML KICKSTART into the mix:
We use the great HTML Kickstart CSS library to render the UI Tabs. It is a bit like Twitter Bootstrap, but I prefer the Kickstart UI Tabs as I think they fit better with the LightSwitch built-in Light theme. There is however no reason why you cannot utilize Twitter Bootstrap instead if you prefer their UI Tabs or other controls.
- Download the HTML KickStart libary from here: http://www.99lime.com/elements/ and extract the archive on your local drive somewhere
- Drag and drop the contained HTML-KickStart-master/css folder into your HTML Client Content folder and rename that dropped "css" folder to "kickstart".
- You can use all of the kickstart.css library (this is the one suggested by 99lime as the main file to include), but I prefer to use only what is required and therefore I split out the UI Tabs section from the main kickstart.css file into a separate kickstart-tabs.css file. I will not go into the details here of how to do that, you can find the split out files included in the downloadable sample project below. Note that I also made a couple of small tweaks to the kickstart-tabs.css file to make the selected tab font blue, etc. Feel free to use my tweaked included CSS files in your own project.
- You should now have a folder structure like the following:
- Drag and drop the HTML-KickStart-master/js/kickstart.js file from the archive into your HTML Client Scripts folder. You should now have both the kickstart.js and the ls-utils.js file added in there:
Update the default.htm file to include the additionally required assets:
Add new header template that will be loaded and injected at run-time:
- Right-click on the HTML Client project and add a new folder named "PartialViews". This folder will contain our new header template file and any other templates we choose to add in future.
- Add a new HTML file to the PartialViews folder named "header.htm" and open it in the Visual Studio editor and insert the following HTML and note the following points about this code:
- this is just plain HTML that must be wrapped in a single DIV tag (which needs to be shifted 8 pixels to the left to vertically align with the List below and given a 4 pixel margin at the bottom to vertically space all the elements nicely)
- use a standard jQuery Mobile horizontal button group as the main toolbar of buttons with Font Awesome icons in the buttons
- declare the UI tabs as per the example on the http://www.99lime.com/elements/ website
- declare a ready() jQuery function that kicks in once the template is loaded
- we do not want jQuery Mobile to override the Kickstart UI tabs so we need to decorate that DIV with the the data-enhance="false" attribute
- we need to issue the jQuery .trigger('create') method to ensure that jQuery Mobile renders this template correctly after loading it (well excluding the UI tabs of course)
- jQuery Mobile will for performance reasons ignore the data-enhance attribute by default so we nee do enable that just before calling .trigger('create') and then disable it again right after
Tweaking the Home screen to load the above template and inject it at run-time:
Well, after all of the above (which is not a lot to be honest and could be reused across projects) we are ready to make the magic happen.
- Select the home screen and select the "<> Write Code" dropdown and choose the "created" event to open the auto generated Home.lsml.js file and add the following code into that event and note the following points:
- we use the setTimeout() function to call the template loading function to provide a little bit of time for the LightSwitch screen to finish its work before loading the template
- We now need to hide the default LightSwitch tabs by checking the "Hide Tab Titles" checkbox on the home screen properties:
- Next we optionally need to select each tab on the Home screen and select the "Use Compact Margins" checkbox (this is cosmetic only for the individual tab contents):
If you did everything correctly and run the application now, you should see the new look header as shown here with the Suppliers tab selected and if you then click the Reports button you will see the appropriate alert pop up like the following:
I have also added an edit screen for Customers (as a dialog) and Suppliers (as a screen) activated from the respective Tap events to show that those all still work and when you return from the edit screen the main header is still rendered correctly with the correct tab selected. You can find those in the downloadable example below.
- The above new header with UI tabs is still responsive, so will work on small and large form factors. This new responsive way of doing things is really growing on me and I can see the benefit of create moderm HTML5 applications that are device agnostic and just works on any device with a decent browser. Wow, this is powerful stuff and will soon be a minimum standard, if not already and LightSwitch is going to help us get there and stay there!
- The above UI Tabs still support the lazy loading nature of the default HTML client UI tabs (nice!)
- We know that there is new functionality in the LightSwitch HTML client on the cards that may address some or all of what I've shown you in this blog...
- There is much more to discover, this is only the start of a journey. One of my next tasks is to replace the above toolbar button with a traditional dropdown menu... I'm also experimenting with using multiple HTML clients as modules of the same overall application... and there is more to discover with navigation between screens and application modules when building larger complex LOB applications.
- If you download the example application below, you will have to configure the database connection string in the Server web.config file so that the LighSwitch project points at your instance of the Northwind database
Download the VS2013 solution here (5.8MB zip): LightSwitchHeaderChangeVS2013Solution.zip