May 26

Written by: Michael Washington
5/26/2013 8:32 AM 

Microsoft MVP and Visual Studio LightSwitch Insider, Alessandro Del Sole recently released an extension that “provides an easy way to install a number of JavaScript code snippets for the LightSwitch HTML Client created by the LightSwitch Team at Microsoft”.

When you install the extension, you can right-click in your code files in Visual Studio and select a code snippet. After you select the code snippet, you alter it to fit your particular program.

This saves you a lot of time.

Making Your Own Code Snippets

Alessandro has created a Snippet Package Builder to allow you to package your own code snippets.

I decided to use it to help you create the code to implement the JQuery Mobile Reflow Table in Visual Studio LightSwitch that was covered in the article: LightSwitch HTML Client For The Desktop Web Browser.

The first step was to install a plug-in that would allow me to make code snippets. I used Snippet Designer.

In Visual Studio LightSwitch, I highlight the code I want to use as a snippet, I right-click on it and select Export as Snippet.

This causes the code to show in the snippet designer.

I use the designer to make the snippet customizable.

The Save button saves the snippet.

I test the snippet by right-clicking on a code file and selecting Insert Snippet.

I will be able to navigate to any saved snippet and implement it.

To package it, I select View > Other Windows > Snippet Package Builder.

 

I enter the information for the package.

I add the snippets.

I then click Build VSIX to build the package.

Now I can redistribute the VSIX.

To use it, just run it and it will install.

Using The Reflow Table Snippet

Create a LightSwitch project and update it to JQuery Mobile 1.3.0 (or higher).

Use a Custom Control for a collection and select Edit Render Code.

Right-click on the code file and select the reflow table snippet (under LightSwitch – JavaScript).

The replaceable sections will be highlighted. Replace the sections to match the elements of your page.

When complete, remove the original method declaration.

When you run the project, the table will display.

This snippet only gets you started, you will still need to see the article:

LightSwitch HTML Client For The Desktop Web Browser

to enhance the table and implement paging.

Special Thanks

A very special thanks to Alessandro Del Sole.

Download Code

The VSIX extension is available at:

http://silverlight.adefwebserver.com/Files/LightSwitch/lsReflowTable.zip

(you must have Visual Studio 2012 Update 2 installed to run the code)