Using jQuery Mobile Radio Buttons in LightSwitch

LightSwitch HTML Client, out of the box, lacks support for radio button controls.  Let’s remedy this using the jQuery Mobile radio buttons. There’s a bit more coding involved than I’d like, so I’ve wrapped much of this in a helper function to make it easier to reuse.

You can download an example project here which includes the helper function (in Scripts/lscontrols.js)

AddEditPerson

I make use of the radio buttons in two different cases.  The simplest is Gender, which is a field in the Person table that has three choices defined using the standard LightSwitch Choice List dialog. Continue reading

LightSwitch Entity Designer – Seeing “The Big Picture”

For rapid development of database-oriented applications, the Entity Designer built in to LightSwitch is very convenient.  It makes it easy to add new entities, properties, and relationships.  However, one thing lacking is a “model overview” that lets you see all of your entities and relationships in a single diagram.

If your application is very small and simple, and contains only a few tables, this may not matter much to you.  But once you’re dealing with medium-sized data applications that may have a hundred or more tables, being able see the potentially complex relationships between your many tables can be very helpful.  Indeed, as the number of tables grows, you can benefit from having multiple distinct data models, each focusing on a related group of tables (e.g. General Ledger, Scheduling, Accounts Receivable, etc.)

Visual Studio provides a nice modeling tool for use with Entity Framework – it can provide this missing feature to your LightSwitch projects.

Continue reading

jQuery Mobile Collapsible Content Control with LightSwitch

Download a sample project via GitHub

LightSwitch makes it easy to include custom controls in your HTML screen designs using the render method.  In this method, the developer has complete control, but has to manually compose the necessary html.

This isn’t a problem for simple value controls – for instance a color picker or date picker.  But it can be a bit cumbersome and tedious for group or collection controls.  As a concrete example, let’s consider the jQuery Mobile collapsible content or accordion control.

Let’s create a screen and add some properties as children of a Rows Layout control.  Now, if we were to change that Rows Layout control to a Custom Control, we’d be responsible for rendering not only the custom control, but all the child controls as well.  It would be better if we could get LightSwitch to take care of the child controls while we simply modify the Rows Layout control to do what we want.

RowsLayout

Continue reading

Making the LightSwitch Flip Switch Read-Only

The LightSwitch HTML Client provides the jQuery Mobile Flip Switch control for use with True/False, Yes/No, and other boolean values.  However, there is no corresponding read-only “Viewer” control, unlike the case with Date Pickers, Phone editors, and many other specialized controls.

Here’s a quick tip – if you would like to make the Flip Switch read-only, use the following code in the PostRender method:

setTimeout(function () {
$(element).find("select").slider("disable");
$(element).find("div").removeClass("ui-disabled");
}, 0);

We have to wrap the code in a timeout because the Flip Switch hasn’t been initialized when the postRender fires.  The removeClass call is to prevent the styling from looking disabled (dimmed out) – if you prefer the disabled look, just leave that line out.

Visual Studio 2013 Preview – What’s New With LightSwitch

At the start of the Microsoft Build 2013 Conference, a preview release of Visual Studio 2013 has been made available.

This morning I was finally able to get it installed properly… there are a number of exciting changes. In this post, I’ll just summarize some of the changes affecting LightSwitch users:

  • In the General Properties for the LightSwitch solution, there is a new “SQL Database Project” drop-down, which @janvanderhaegen says is for providing “seed data” to your database.
  • The server project now defaults to .NET Framework 4.5
  • No more separate Logical/File views… instead there are folders for “Screens” under the client subproject and “Data Sources” under the server subproject.
  • Each screen has its own lsml file. Each entity has its own lsml file. This is a huge boon for multiple developer collaboration, as it greatly reduces the headaches of merging changes.
  • In the HTML Client, the javascript code behind for a screen now includes “lsml” in the name. So if you name a screen “BrowseCustomers”, the screen file itself will be “BrowseCustomers.lsml” and the corresponding javascript code-behind file will be “BrowseCustomers.lsml.js”
  • You can have multiple Lightswitch Entity and Screen designer windows open at the same time.
  • In the HTML Client, there are now refresh() methods for the VisualCollection and the EntityDetails objects.

Continue reading

Lightswitch Custom Controls and Script Injection

LightSwitch HTML client applications are subject to the same potential exploits as any other html/javascript application. LightSwitch works some fantastic magic and makes it so easy and quick to produce data-oriented applications for the web that you might forget that the onus is still on you to properly secure the application.

As a simple example of how even experienced developers can leave behind potentially exploitable code, let’s consider the use of custom controls in LightSwitch and how to secure them against script injection and cross-site scripting exploits.

Joe Binder, LightSwitch Program Manager at Microsoft, posted an excellent article on the LightSwitch Team Blog back in December 2012: Custom Controls and Data Binding in the LightSwitch HTML Client. In it, he includes two code snippets which are almost identical.

Continue reading

Free Query Profiling in Lightswitch

The full and developer versions of Microsoft SQL Server include SQL Profiler, a tool that captures SQL Server events from the server and saves those events in a trace file. You can use this utility to:

  • Monitor the performance of an instance of the SQL Server Database Engine, Analysis Server, or Integration Services (after they have occurred).
  • Debug Transact-SQL statements and stored procedures.
  • Analyze performance by identifying slowly executing queries.
  • Test Transact-SQL statements and stored procedures in the development phase of a project by single-stepping through statements to confirm that the code works as expected.

However, SQL Profiler isn’t included with either LocalDB or SQL Server 2012 Express.

An awesome, but pricey, option is Entity Framework Profiler from Hibernating Rhinos. If your daily work involves Entity Framework, this tool is a must have.

My focus here, though, is on a free no frills alternative: Express Profiler.

By default, Visual Studio 2012 Lightswitch projects use LocalDB while debugging, so, unless your project uses an external datasource rather than the intrinsic one… or unless you are trying to profile a deployed application, you’ll need to enter:

(localdb)v11.0

in the “Server” textbox of Express Profiler.

express profiler

I encourage other Lightswitch users to experiment with this useful resource. It can be invaluable for understanding how your application is actually using the database, since so much of that is hidden behind the scenes, taken care of automagically by Lightswitch and Entity Framework. It can help you identify cases where adding an index may dramatically improve query performance. It can help you verify that you’ve implemented your RIA service properly, and it isn’t issuing redundant queries or disregarding proper paging.

Also, if you’ve got your own favorite tool for SQL Server profiling, share in the comments!

Happy profiling!

Deep Linking Between Lightswitch HTML and Silverlight Clients

Update 7 Nov 2013: This article is now out-of-date, since the LightSwitch HTML Client now has built-in support for deep-linking. 

 

Suppose you have both a Silverlight client and an HTML client in your Lightswitch project, and you’d like to be able to navigate between them. In particular, from the Silverlight client you’d like to be able to navigate directly to a particular screen and entity in the HTML client, and vice versa.

One way to accomplish this have a home screens in both clients which look at the parameters passed in the URL and redirect to the appropriate screen and entity. So to navigate to Account Id 100 on the AccountDetail screen of your Silverlight Client, you could go directly to the URL: http://mydomain.com/DesktopClient/?screen=AccountDetail&id=100

Similarly, to navigate to the ViewAccount screen of your HTML Client, you could go to the URL: http://mydomain.com/HTMLClient/?screen=ViewAccount&id=100

You can download a sample project here.

Continue reading

Lightswitch HTML Client Theme with Rounded Corners

Discussions of aesthetics and usability in software user interface design have a tendency to lead to unwinnable wars of opinion, so I’ll try to avoid that here. I’ll just say that, there are very good reasons to consider using rounded corners in the design of your application UI.

As an alternative to the default Lightswitch HTML Client theme, I’m posting the dotnetlore-blue-theme as a starting point for those who prefer a more rounded look to their UI elements.

Continue reading