Top 10 Quick Tips for Building Great Mobile LightSwitch Apps

I’ve been building a lot of HTML clients using LightSwitch lately so I thought I’d share some quick tips that you can use to build great mobile apps. (You’ll need Visual Studio 2012 Update 2 to get the LightSwitch HTML client.)

#1 – Prefer Tile Lists for Browse Screens and utilize Rows & Columns layouts

Because LightSwitch will automatically scale screens to fit different form factors, picking a Tile list instead of the default List control on your Browse Data screens can be a good idea, particularly if you have multiple fields you want to display on the tile. Utilize the Columns Layout control along with the Rows Layout to place data nicely on the tile. By default the tile width will adjust automatically to fill up the screen (but no smaller than the width you specify). If you always want a fixed with, select the Rows Layout and uncheck “Adjust Tile Width dynamically” in the properties window.

#2 – Show filters as Popups to conserve space

All screens have a Popups area at the bottom of the content tree that you can use to design “popup” dialogs specific to that screen. You can use them to display/collect additional or optional information on a screen. Prefer to utilize these popups on mobile devices when you’re designing your search screens. Your optional search fields won’t take up precious space which allows the important content to flow to the top.

To quickly add an optional filter, select “Edit Query” in your View Model in the Screen Designer…

Add a filter with optional parameters….

Select the Popup node in the tree and click “Add Popup”. Name the group “Filter”. Then drag the optional parameters into the popup group. This will automatically create local screen properties for you.

Finally add a button to the command bar and set the tap action to display the popup. Change the command bar icon to “Filter” in the properties window if you like.

When the user clicks the button, the popup filter is displayed:

Note that you may prefer to create a global query instead so you can reuse the filtered query across screens – see tip #6 below.

#3 – Consider your Master-detail options

A little while back I wrote about the different ways you can display master-detail data on screens. If you missed it: Master-Detail Screens with the LightSwitch HTML Client

Here are some tips from that article to keep in mind:

• LightSwitch will automatically adjust the screen layout as necessary for different form factors. 
• Using Tab controls for master-details screens is a good idea when you will potentially have a lot of child data to display or you are targeting smaller mobile devices like phones. This limits the amount of information that a user has to view/edit at once. This is the default layout you get on screens when you select multiple sets of data to display.
• Showing all the data on a single tab works well for smaller sets of data where you’ll never have more than a handful of child data to view/edit at once (like in the following screenshot) or when your users are using larger devices like tablets.

#4 – Use Placeholder text to explain what the field is (like a short tool tip)

You don’t have tooltips on a mobile device (because you don’t have a mouse), so instead you can utilize the HTML5 placeholder text in input controls. Just set it in the property sheet and the text is displayed dimmed until the user enters some data.

#5 – Setting the fetch/page size

This tip applies to any client, not just mobile devices. LightSwitch automatically handles data loading asynchronously and in pages. For Browse Data screens the default page size is 45. On a mobile device, when users swipe to the end of a list the next page of 45 rows is dynamically loaded. You can set the page size in the screen designer. Select the Query in your view model and then set it via the properties window.

 

#6 – Sort your data sets using screen or global queries

This tip applies to any type of screen on any device. By default the data in your data sources are retrieved in the order they were entered into the data source (oldest to newest) and that’s usually not the order we want data displayed. There’s a couple ways you can use queries to provide a base sort. If you’re using a set of data only on one screen, you can click the “Edit Query” link on your view model of the screen designer, just like in tip #2, and provide a sort there.

However, if you’re using a set of data across screens then it’s better to create a global query and use that on your screens. In fact, queries can be “built up” so you can use a query as the source of another query. That way you can have a base query that sorts the data and then you can use that as the source of subsequent queries. (For more info on queries see: Filtering Data with Queries on MSDN)

To create a global query, right-click on the Entity in the Solution Explorer and select “Add Query”, then define a sort using the query designer:

Now when you create additional queries you can use this sorted query as the source.

Once you have the global query set up the way you want, you can select the query as the screen data when creating screens. However if you already created a screen, you can change the source query by selecting the query in your view model in and setting the Query Source property.

 

#7 – Sort pickers using global queries

Similar to tip #6 above, you should also sort any data pickers on screens so that the list of choices are displayed sorted to the user. Create a global query that sorts the data like I showed above. Then to use the query as the source of the picker, first add the global query to your screen by clicking “Add Data Item…” button and selecting the sorted query you defined.

Then select the picker in the content tree and change the Choices property to the sorted query.

#8 – Use your own logo and splash screen images

If you want to specify a logo that appears on the Home screen (the first screen) of your mobile app, simply replace the default one. Flip to File View in the Solution Explorer…

Then expand the HTML client project’s content\images folder and replace the user-logo.png with your own image. If you want to also change the splash screen that is displayed when the app is loading, then replace the user-splash-screen.png.

#9 – Customize the login page

If you’re using Forms Authentication then you probably want to change the login page to also show your logo. Andy showed us how to do this in: Signed-In Part 4 – Authentication and Branding

While in File View, expand the Server project and you will see the LogIn.aspx and LogOut.aspx pages. Feel free to customize these pages exactly how you want.

For more information on LightSwitch authentication see: LightSwitch Authentication and Authorization on MSDN.

#10 – Make your apps pretty with ThemeRoller for jQuery Mobile

The easiest way to style a LightSwitch HTML client is to use ThemeRoller at https://jquerymobile.com/themeroller/. First decide on whether you want to go for a darker theme or a lighter theme because depending on that, you’ll want to first pick the corresponding LightSwitch theme which defines either black or white button images (for save, home, cancel, loading, etc.) as well as default text colors. LightSwitch comes with two built-in themes, the light theme (default) and the dark theme. To change to the dark theme, first flip to File View in the Solution Explorer and expand the HTML client project.

Open the default.htm and change the stylesheets to the dark theme:

 <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" />
<link rel="stylesheet" type="text/css" href="Content/msls-dark.css" />

Next open the dark-theme.css (or light-theme.css if you are using that) and copy the contents into your clipboard. Then click the “Import” button on ThemeRoller and paste the css into the window to import the theme. This will be your starting place for customizations.

Then simply drag colors from the palate to areas on the swatch, or modify the properties on the left to design your perfect theme.

When you’re done, click the Download button to name your theme and download your new CSS. Extract the zip, and then copy your theme to the content folder and update the default.htm to use it.

 <link rel="stylesheet" type="text/css" href="Content/green-theme.css" />

#11 BONUS TIP! – Use Edit & Refresh when designing HTML screens

There’s one last bonus tip that I should mention that makes designing HTML client screens very quick. When you make any visual change in the screen designer, CSS or even change your JavaScript screen code, you don’t have to stop debugging to see the changes. Simply hit “Save all Files” in Visual Studio and then refresh your browser to see the changes applied.

I could go on with a lot more tips and tricks but these were the most important ones that came to mind when designing HTML client screens. You should be able to use them immediately to quickly make your mobile apps that much better. Got more tips? Add a comment below!

Enjoy!

Comments

• Anonymous
  May 23, 2013
  Thank you Beth, keep the articles coming!

• Anonymous
  May 23, 2013
  These are great tips and info, Beth. Somehow I missed the introduction of the Data Picker into LS HTML. I'll have to study that one. Thanks for your continued articles.

• Anonymous
  May 24, 2013
  Hi Beth, I can't see how to get the "picker in the content tree" referred to in  #7. Could this be a new screen entity hasn't been released yet ?

• Anonymous
  May 25, 2013
  Hi Beth, thank you for your great articles about VS Lightswitch. I would be interested in Articles about typical JavaScript Screen code. Maybe you can provide us something

• Anonymous
  May 27, 2013
  @John - Just create a relationship to a parent entity and LS will automatically create a picker for you. For instance a Customer entity has many Orders. Then when creating an Order Screen, LS will create a Customer picker for you. @Alex - We released a set of JavaScript code samples here: code.msdn.microsoft.com/.../JavaScript-for-LightSwitch-f1ec057c Community member Alessandro Del Sole then created an extension that adds them into your snippet library: visualstudiogallery.msdn.microsoft.com/442b5597-7489-4f31-b551-e45743fd64bd HTH, -Beth

• Anonymous
  May 28, 2013
  Ah yes, Thanks Beth.

• Anonymous
  May 29, 2013
  You have put renewed interested into considering LightSwitch for a future app design. Thank you.

• Anonymous
  May 30, 2013
  Great article

• Anonymous
  June 07, 2013
  Hi Beth, Just wonder is it possible for the HTML to capture photo using Phone 8 Camera instead of pick from storage. Looking forward to see you in SF Build 2013.  Thanks?

• Anonymous
  June 07, 2013
  Is OK, I found the Answer in LightSwitch HTML Client Tutorial, Thanks

• Anonymous
  July 09, 2013
  Thank you Beth for a great article! A question about tip #2: if you close the filter popup, the filter is still active. How can you reset the filter after closing the popup or with an additional button?

• Anonymous
  July 12, 2013
  The comment has been removed

• Anonymous
  February 10, 2014
  Please Beth , how to use the logout.aspx page , I migrated from LS 2012 form authentication and all I need to make the user able to logout and redirect him again to the login page , I tried to call the logout.aspx by creating an empty screen and write this code on the run event : Dispatchers.Main.Invoke(Sub()                                        HtmlPage.Window.Navigate(New Uri("LogOut.aspx", UriKind.Relative))                                    End Sub) put it keep redirect me to "/Client/LogOut.aspx" , and when i tried to call the page directly it gives me error page  "Object reference not set to an instance of an object"

• Anonymous
  March 17, 2014
  Amazing post. I am sure it will help us to create a superior <a href="http://www.mobilewebsite.com">Make a Mobile Website</a> for business if we can properly incorporate the tips you have shared with us. Thanks a lot.

• Anonymous
  July 05, 2014
  Thank You Beth, for these tips, is there any example about the drag & drop for tiles on LS Html screens?

• Anonymous
  July 14, 2014
  @Narek - see blogs.msdn.com/.../drag-and-drop-with-lightswitch-html-client-rohit-agrawal.aspx

• Anonymous
  July 14, 2014
  Thank You Beth! it's the easiest way of drag&drop. Would You be kind, just help with custom control binding in _render function - I'm trying to bind the CustomControl(Kendo UI grid control) to the ApplicationData source by using Service CRUD operations with OData protocol or with "contentItem.data"-local json data, but can't do that, here the short code - myapp.BrowseContacts.Contacts_render = function (element, contentItem) {    var customControl = $('<div/>');    var contacts = contentItem.data;        customControl.kendoGrid({        dataSource: {            type: "odata"            ,transport: {                read: {                    url: "http://localhost/ApplicationData.svc/Contacts",                    dataType: "jsonp"                }            //,update: {            //    url: "",            //    dataType: ""            //}            //,destroy: {            //    url: "",            //    dataType: ""            //}            //,create: {            //    url: "",            //    dataType: '"            //}            //,parameterMap: function (options, operation) {            //    if (operation !== "read" && options.models) {            //        return { models: kendo.stringify(options.models) };            //    }            //}            }   ...                 });    customControl.appendTo($(element)); };

• Anonymous
  September 16, 2014
  Great articles Beth - thanks. I have updated my theme using the themeroller and looks good but the button colours are also used for the tab headings which don't look quite as good.   what's the best way to style this differently? Thanks