Building new business productivity applications with Visual Studio LightSwitch

In this article, we'll explore some of the new features in Visual Studio LightSwitch that can help you build new mobile business productivity applications.

Visual Studio LightSwitch (hereinafter referred to as LightSwitch) is designed to simplify and shorten the development process for business applications. LightSwitch applications can use a variety of data sources, provide business and authorization logic, and create clients that can run on a variety of devices, all without the need to write piping code.

LightSwitch can aggregate multiple data sources, and it automatically exposes a set of open Data Services (Open Data Protocol, abbreviated ODATA) to support custom client and self-service business Intelligence (BI) scenarios. LightSwitch also allows you to write code to customize your application on demand, whether it be UI controls, business logic, data services, or other components.

After Visual Studio Update 2 was released in April, LightSwitch can also quickly build HTML5 clients that are fit to touch and run well on new mobile devices. The LightSwitch HTML client is built with standard HTML5 and JavaScript, available in Windows RT, Windows Phone 8, IOS version 5 and 6 IPhone and IPad, and Android 4.x devices offer a new experience with touch first.

In addition, with the new SharePoint 2013 Application model, LightSwitch can easily build custom business applications in SharePoint and Office 365. Many organizations today use SharePoint as a hub to improve collaboration between people, content, and processes. Although you can still host your application on your own or in Windows Azure, you can take advantage of the application lifecycle management, identity, and access control features in SharePoint after you enable SharePoint in your LightSwitch application, not to mention the enterprise Business data and processes running in SharePoint.

LightSwitch HTML Client

Always start with the data model in LightSwitch, whether it is modeling for new data or connecting to an existing data source. Since we're mainly introducing new features in this article, we've created a simple data model and filled the database with some initial data. This way, you can start to create a client and use it to make sure that you attend the most interesting matches during an important meeting, such as Visual Studio Live! If this is your first contact with LightSwitch, be sure to read the past articles in MSDN magazine, such as September 2012, "LightSwitch 2012 with Visual Studio" (msdn.microsoft.com/ magazine/jj618303), or view the LightSwitch Development Center (Msdn.com/lightswitch) to ensure that you do not miss the large amount of data modeling, self-service BI, concurrency processing, and multithreading capabilities that it provides.

HTML clients provide a way to build touch-first single-page applications that run on a large number of mobile devices, commonly referred to as "helper applications," to indicate that these applications play a specific role only in larger architectures. Creating such a secondary application to browse data in situ (as we did in this article) is a good practice for getting started with HTML clients, but it does not reflect the wide range of issues that these applications can solve. These helper applications can not only access data, but also modify and deposit data (for example, collect customer signatures when delivering parcels), and sometimes even use device-specific features such as geographic locations (e.g., sites where soil samples are collected) to help your company save time and money.

Screen templates and navigation: Regardless of what type of client is created, LightSwitch uses the same method to define the screen, even with a set of predefined templates that can be selected. To add a screen, simply right-click the project in Solution Explorer and select the Add Screen option. This opens a dialog box from which you can select screen templates and some other options, such as the name of the screen and the data that the screen will use. The screen is then generated based on the selected template and opened in the screen designer.

This is already familiar to some experienced LightSwitch developers, since the design-time experience is almost exactly the same as creating a screen in a Silverlight application that uses LightSwitch inside and outside the browser, simplifying the already easier learning process. LightSwitch follows the model-view-view model (MVVM) architecture at the bottom of the application as well as the screen designer displaying the view model on the left, and displaying a representation of the corresponding view on the right.

A noteworthy change is that setting up navigation from one screen to another (or binding any other action to events caused by a user clicking on an element on the screen) has really become a top priority in the screen designer. This is an obvious advance, not only because the application is so focused on touch, but also because the LightSwitch HTML client can generate a Single-page application (SPA). Silverlight clients have a multiple document interface (MDI) shell that can open many screens at the same time, so navigating between different screens is becoming more important in LightSwitch HTML applications.

For example, if you use the Browse data template for a number of event entities to create the first screen in this application, a screen with a list of matches will be generated. (This list will be selected in the Screen designer, and then in the Properties window, click Edit Item Tap Action) link. This action opens a dialog box that automatically makes recommendations based on the situation: Because the user is browsing the event and has clicked on an item, the dialog box recommends an open screen where the user can view the details of the selected matches. Because the screen has not yet been created, the dialog box also recommends that you create the screen. As shown in Figure 1.

Figure 1: Setting the Touch event is now the top priority in the screen designer

Once accepted, press F5 to build the application and start a new debug run in the default browser. The main screen is then opened, showing a simple list of matches. When you click a show, the application will navigate smoothly to the newly generated details screen, showing details of that particular event in a simple two-column layout, as shown in Figure 2.

Figure 2: Adaptive design helps you write only one application for a variety of appearance dimensions