Build mobile device-agnostic cloud apps with Visual Studio LightSwitch

Building cloud apps amid BYOD chaos? Microsoft's Visual Studio LightSwitch is a tool for quickly building public cloud-based, device-agnostic apps.

The increasing market share of users adopting a BYOD workplace means IT departments must develop line-of-business applications that run under iOS, Android and Windows RT operating systems, as well as on conventional laptop and desktop PCs. Additionally, constraints on IT spending are leading to increased adoption of pay-as-you go public cloud computing and data storage services. The loss of Wintel's historical ubiquity threatens Microsoft's...

bottom line and has the potential to bust IT app development budgets.

The solution is a single set of tools and languages that enables developers to use existing skills to create Web-based, data-driven, multi-tenant apps that run without significant modification on the most popular mobile and desktop devices. These apps also need simple user authentication and authorization, preferably by open-source identity frameworks, such as OAuth 2.

In 2012, Microsoft Vice President Scott Guthrie announced the first step on the company's road to bring your own device (BYOD) nirvana -- native Windows Azure support through Office 365's cloud-based SharePoint Online. Microsoft Office 365's auto-hosted SharePoint Online applications natively support Windows Azure Web Sites generated by the recently released Visual Studio LightSwitch's HTML Client Preview 2. The preview supports multi-tenant applications for Windows RT phones and tablets, as well as Apple iOS mobile devices and Android smartphones. Microsoft promises Android tablet compatibility in the near future.

Guthrie explains the move in his Windows Azure and Office 365 blog post:

[The] Beta release of Microsoft Office 365 and SharePoint introduced several great enhancements, including a bunch of developer improvements. Developers can now extend SharePoint by creating web apps using ASP.NET (both ASP.NET Web Forms and now ASP.NET MVC), as well as extend SharePoint by authoring custom workflows using the new Workflow Framework in .NET 4.5.

Even better, the web and workflow apps that developers create to extend SharePoint can now be hosted on Windows Azure. We are delivering end-to-end support across Office 365 and Windows Azure that makes it super easy to securely package up and deploy these solutions.

LightSwitch HTML Preview
Figure 1. The Visual Studio LightSwitch HTML Client Preview 2 tools add LightSwitch HTML application items for C# and VB projects to the LightSwitch Templates list.

HTML 5 and cascading style sheets (CSS) are currently the best approach for designing UIs that are compatible with Windows 8 PCs and laptops, Windows RT, iOS and Android-powered smartphones and tablets. And the Visual Studio LightSwitch team dropped the other shoe in November 2012 when it announced the release of Visual Studio LightSwitch HTML Client Preview 2 for Visual Studio 2012 Standard Edition or higher. HTML Client Preview 2 bits are included in the Microsoft Office Developer Tools for Visual Studio 2012 Preview 2 package (OfficeToolsForVS2012GA.exe). Installing the tools adds LightSwitch HTML Application (Visual Basic) and (Visual C#) templates to the LightSwitch group (Figure 1).

Windows Azure hosting models for LightSwitch apps

SharePoint Online site
Figure 2. Developers publish LightSwitch HTML Client front ends to a SharePoint Online site where they appear in a list on Office 365 SharePoint 2013 feature's Apps in Testing page.

Developers can use LightSwitch HTML Client Preview 2 to build SharePoint 2013 apps and install them to an Office 365 Developer Preview site. Deployment to SharePoint Online, offers "simplified deployment, central management of user identity, app installation and updates, and the ability for your app to consume SharePoint services and data in a more integrated fashion," according to the LightSwitch team in a blog post. "For users of your app, this means a central place for them to sign in once and launch modern, web-based applications on any device for their everyday tasks," the post added (Figure 2).

Developers can choose between two SharePoint Online app hosting models: auto-hosted and provider-hosted. Steve Fox of Microsoft described the two models as:

The [auto-hosted] app model natively leverages Windows Azure when you deploy the app to SharePoint, and the [provider-hosted] app enables you to use Windows Azure or other Web technologies (such as PhP). …

[T]he [auto-hosted] and [provider-hosted] models are different in a number of ways:

    1. The [auto-hosted] app model leverages Windows Azure natively, so when you create the app and deploy it to Office 365 the Web app components and database are using the Windows Azure Web role and Windows Azure SQL Database under the covers. This is good because it's automatic and managed for you—although you do need to ensure you programmatically manage the cross-domain OAuth when hooking up events or data queries/calls into SharePoint.

      So, top-level points of differentiation are: the [auto-hosted] app model uses the Web Sites and SQL Database services of Windows Azure and it is deployed to Windows Azure (and, of course, to the SharePoint site that is hosting the app). If you're building departmental apps or light data-driven apps, the [auto-hosted] option is good. And there are patterns to use if you want to replace the default ASP.NET Web project with, say, an ASP.NET MVC4 Web project to take advantage of the MVVM application programming.

    2. The [provider-hosted] app model supports programming against a much broader set of Windows Azure features -- mainly because you are managing the hosting of this type of app so you can tap into, say, Cloud Services, Web Sites, Media Services, BLOB Storage, and so on. (And if these concepts are new to you, then check out the Windows Azure home page here.)

      Also, while the [auto-hosted] app model tightly couples Windows Azure and SharePoint within a project and an APP that is built from it, the [provider-hosted] app provides for a much more loosely-coupled experience. And as I mentioned earlier, this broader experience of self-hosting means that you can also use other Web technologies within the [provider-hosted] app.
Visual Studio 2012
Figure 3. Developing an auto-hosted SharePoint Online Web app with Visual Studio 2012 and the LightSwitch HTML Client Preview follows the same pattern as creating a Windows Azure ASP.NET project with a conventional Web role.

LightSwitch HTML Client Preview 2 lets developers write simple auto-hosted front ends for data stored in SharePoint lists with minimal added .NET and JavaScript code (Figure 3).

Deploying and running the SurveyApplicationCS project

Contoso Product Surveys
Figure 4. The main form of the SurveyApplicationCS project for a logged-on sales representative. Contoso Product Surveys is a multi-tenanted application that depends on OAuth 2 authorization to display survey results for individual sales reps.

After testing on a local machine, the developer would publish the application to SharePoint Online and then deploy it as a SharePoint app by clicking the + New App to Deploy link (see Figure 4) and specifying the app package for the current version from the local machine to upload to SharePoint. Figure 4 shows the SurveyApplicationCS app's main (landing) form when opened from SharePoint. The URL specifies the endpoint of the Windows Azure Web role (o365apps.net) and the SharePointAppWeb (http://oakleafblog.blogspot.com/2012/11/lightswitch-html-client-preview-2.html).

LightSwitch detail form
Figure 5. A detail form for one of the products added to the original tutorial's generic list. Customization also includes a Survey Date field added with four lines of C# code.

The SurveyApplicationCS app is a customized version of the LightSwitch Team's Survey App Tutorial: Developing a SharePoint Application Using LightSwitch, which contains LightSwitchSurveyApplicationTutorial.docx and LightSwitchSurveyApplicationTutorial.pdf, as well as C# or VB versions of SurveyTutorialFiles.sln. You can learn more about the tutorial on the OakLeaf Systems Office 365 Developer Site and developers can download the project's source code from SkyDrive. Clicking one of the main form's list items opens a details form (Figure 5).

LightSwitch photos form
Figure 6. The Photos form lets you display a full-size image by clicking a thumbnail tile. Clicking the Upload Photos button opens a form that allows sales reps to add a photo from a file on the client device to the collection.

Only four lines of C# or VB code are required to implement the main and details forms. However, uploading photos with the Web API requires 32 lines of JavaScript for a custom control. Displaying the photos to illustrate the shelf space assigned to the food products requires dropping in 120 more lines of standard C# or VB source code from the tutorial.

Clicking the Photos button opens a form with tiled thumbnails of product photos (Figure 6).

SharePoint Online, LightSwitch
Figure 7. Users must sign in to SharePoint Online for authorization to invoke LightSwitch HTML Client apps deployed to SharePoint, which are represented by tiles on the Site Contents page.

SharePoint Online user authentication and authorization with LightSwitch oAuth 2

The LightSwitch HTML client implements OAuth for authentication and authorization with SharePoint Online by default. Contoso sales representatives sign in to Office 365 and SharePoint using a Windows Account (formerly Live ID) for authentication and authorization to use apps listed on the Site Contents page (Figure 7).

SharePoint cloud-hosted apps use Windows Azure Access Control Services (ACS) as their authorization server, which provides a security token service (STS). Launching the LightSwitch HTML Client application from SharePoint automatically requests a context token from ACS that contains information about the current authenticated user. To support multi-tenancy in SurveyApplicationCS, the user's name filters items in the main page's My Product Surveys list to show only his or her surveys.

LightSwitch HTML Client Application, Microsoft
Figure 8. The 10 steps a LightSwitch HTML Client Application auto-hosted in Windows Azure executes automatically to authenticate and authorize a SharePoint Online user for data entry. (Graphic courtesy of Microsoft.)

Figure 8 from the OAuth for authentication and authorization with SharePoint MSDN topic illustrates data flow between the app's components the LightSwitch HTML Client orchestrates.

Microsoft's concentration on componentizing its software offerings to simplify architecting and programming departmental applications has been responsible for much of the company's success in the enterprise IT market. In the same vein, the Windows Azure, SharePoint Online and Visual Studio LightSwitch teams have integrated these platforms to enable .NET developers to quickly piece together device-agnostic Web front ends with minimal programming effort.

Developers with Visual Studio 2012 skills can cobble together this app in an hour or less -- allowing them to quickly deploy it to a variety of devices running Windows, iOS and Android.

Roger Jennings is a data-oriented .NET developer and writer, a Windows Azure MVP, principal consultant at OakLeaf Systems and curator of the OakLeaf Systems blog. He's also the author of more than 30 books on the Windows Azure Platform, Microsoft operating systems (Windows NT and 2000 Server), databases (SQL Azure, SQL Server and Access), .NET data access, Web services and InfoPath 2003. His books have more than 1.25 million English copies in print and have been translated into more than 20 languages.

This was first published in January 2013

Dig deeper on Cloud development and testing

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchServerVirtualization

SearchVMware

SearchVirtualDesktop

SearchAWS

SearchDataCenter

SearchWindowsServer

SearchSOA

SearchCRM

Close