Beginning LightSwitch in VS 2012 Part 6: Go beyond the box. Customizing LightSwitch Apps with Extensions

Artikel
08/15/2012

NOTE: This is the Visual Studio 2012 version of the popular Beginning LightSwitch article series. For other versions see:

Visual Studio 2013 & HTML Client: Part 6: More Control! Customizing the app with JavaScript & CSS (Coming Soon!)
Visual Studio 2010: Part 6: I Feel Pretty! Customizing the "Look and Feel" with Themes

Welcome to Part 6 of the Beginning LightSwitch in Visual Studio 2012 series! In parts 1 thru 5 we built an Address Book application and learned all about the major building blocks of a Visual Studio LightSwitch application -- entities, relationships, screens, queries and user permissions. If you missed them:

In this post I want to talk about extensions. Extensions allow you to do more with LightSwitch than what’s “in the box”. There are all kinds of extensions for doing all kinds of stuff. There are additional themes and shells you can download for changing the colors, fonts and styles of all the visual elements in the user interface. There are also fancy controls you can use for visualizing your data, additional business types to add to your entity designer, and there are even extensions that help you work with documents, design client-side reports, and even automate Microsoft Office. These extensions are provided by trusted component vendors as well as the global community, most are free, some are pay.

You can browse through the LightSwitch extensions online on the Visual Studio Gallery.

Visual Studio LightSwitch Extensibility

What makes this possible is LightSwitch provides an entire extensibility framework so that professional developers can write extensions to enhance the LightSwitch development experience. If you are a code-savvy, professional .NET developer. then you can create your own extensions. For more information on creating extensions see the Extensibility section of the LightSwitch Developer Center. Keep in mind that extensions are Visual Studio version specific so if an extension doesn’t support a certain version of Visual Studio, then it will notify you when you try to install it.

Downloading and Enabling Extensions

Luckily, you don’t need to be a hardcore programmer to use extensions. They are easy to find and install. Just open “Extensions and Updates…” from the Tools menu.

A window will come up and display all your installed extensions. Select the “Online Gallery” tab to choose from all the extensions from the Visual Studio Gallery. Enter “LightSwitch” in the filter to see just the LightSwitch extensions.

You can also download these extensions directly from the Visual Studio Gallery. Select the extension you want and click the download button to install.

For our Address Book application I’d like to add the ability to import contacts from Excel spreadsheets. LightSwitch has built-in functionality to export all data in grids to Excel but it lacks an import feature. Luckily the Office Integration Pack is a free extension that has this feature. If you sort by popularity you will see it near the top. I highly recommend this extension for working with Office.

After you download and install any extension, you need to enable them on a per-project basis in LightSwitch. Open the project properties by right-clicking on the project in the Solution Explorer and select “Properties”. Then select the “Extensions” tab to enable the extension.

For our Address Book application, enable the Office Integration Pack extension. Also notice that there is the “Microsoft LightSwitch Extensions” also in this list which is always enabled and used in new projects. This is an extension that is included with the LightSwitch install and contains the business types Email Address, Phone Number, Percent, Web Address, Money and Image that you can use when defining your data entities like we did in Part 1. You should never have to disable these. There is also the Cosmo theme and shell that we’ve been using in this series that enables that look-and-feel for new projects.

Using the Extension

Depending on what your extension does, there are different ways to use them. You’ll need to refer to the specific documentation for the extension. Some controls you can literally drop right in and use them without having to write any code. The Office Integration Pack makes it super-easy to automate Office but we need to write a line of code to get the import feature to work. (See the documentation on all the things you can do with it.)

In order to allow uploading contacts from an Excel spreadsheet, create a new screen like we did in Part 3 and select the Editable Grid Screen template. Then select the Contacts as the screen data. In the Screen Designer, expand the Screen Command Bar and add a new button.

Call it “ImportContacts” and click OK

Now right-click on the button and select “Edit Execute Code”.

Then write this one line of code (in bold) into the method stub.

VB:

 Namespace LightSwitchApplication 
    Public Class EditableContactsGrid 
        Private Sub ImportContacts_Execute() 
            ' Write your code here. 
            OfficeIntegration.Excel.Import(Me .Contacts)  
        End Sub 
    End Class 
End Namespace

C#:

 namespace LightSwitchApplication 
{ 
    public partial class EditableContactsGrid 
    { 
        partial void ImportContacts_Execute() 
        { 
           // Write your code here. 
           OfficeIntegration.Excel.Import(this .Contacts);  
        } 
    } 
}

Next make sure you have the permission to add Contacts into the system. Remember in Part 5 we set up a permission to check for this. Go into the project properties and on the Access Control tab make sure you have granted the CanAddContacts permission for debug. (You can also disable the import button if the user does not have permission to add contacts by adding a permission check to the button’s CanExecute method.)

Now run it by hitting F5. Open the screen and click the Import Contacts button. The Office Integration Pack will prompt you for a spreadsheet and ask you how you want to map the columns it finds inside to the properties on your Contact entity. Pretty slick for just one line of code.

Wrap Up

As you can see it’s easy to download and enable LightSwitch extensions in Visual Studio 2012 in order to do all sorts of things that aren’t available right out of the box. LightSwitch provides an entire extensibility model that allows the community to create all kinds of extensions that enhance the LightSwitch development experience that you can take advantage of. If you’re a code-savvy developer that wants to create your own extensions, head to the LightSwitch Extensibility section of the Visual Studio Developer Center to get set up and then read the Extensibility documentation.

You can also download the competed sample application we built in this article series.

Well that wraps up what I planned for the Beginning LightSwitch in Visual Studio 2012 Series! I hope you enjoyed it and I hope it has helped you get started building your own LightSwitch applications with Visual Studio 2012. For more LightSwitch training please see the LightSwitch section of the Visual Studio Developer Center. In particular, I recommend going through my “How Do I” videos next.

Enjoy!

Comments

Anonymous
March 13, 2013
Very explanatory Beth.I get a warning when adding the OfficeIntegration Import method to a button. It relates the runtime error is "Unable to cast object of type 'LightSwitchApplication.TableEntity' to type 'Microsoft.LightSwitch.Client.IVisualCollection'. Any ideas?Great job with the article and look forward to more.
Anonymous
May 21, 2013
Hi Beththanks for spending your valuable time to share this technology with us. its crystal clear and easy to followGreat job.
Anonymous
January 22, 2014
Hi Beth, what if i want to show a combobox for a EntityFramework6 enum Type property?I think this is a widespread question among newbies like me.
Anonymous
March 04, 2014
I needed to exit VS and restart to see the extension in the Project Properties/Extensions panel
Anonymous
May 17, 2015
Hi Beth Thanks for your great job! However,this method is only work for single table without any relations, How can I import my data via excel in multi-relation tables? Thanks a lot!!!
Anonymous
April 08, 2016
Very good tutorial.

Freigeben über