You are here:   Blog
Register   |  Login

 

Nov 20

Written by: Michael Washington
11/20/2013 4:44 AM  RssIcon

Extending LightSwitch HTML Client

image

The LightSwitch Extensibility Toolkit for Visual Studio 2013 allows you to create reusable HTML client screen templates. This is a very powerful feature in that you have full control of the generated HTML and JavaScript. In your screen template code you have the ability to interrogate the (optional) entity or collection specified by the end user, and create a screen design based on what they select.

 

Creating the Extensibility Project

image 

The following is required in order to create LightSwitch extensions:

Visual Studio 2013 Professional (or higher)
Visual Studio 2013 SDK
LightSwitch Extensibility Toolkit for Visual Studio 2013

image

Create a new project in Visual Studio.

image

Use the Extensibility template (if you don’t see it you must have Visual Studio 2013 SDK, and LightSwitch Extensibility Toolkit for Visual Studio 2013 installed).

image

Right-click on the .Lspkg project and select Add then New Item.

image

Create a screen template.

Note, see the article, Creating a LightSwitch Screen Template, for information on what is being created in the project and how to customize it.

Add the following using statement to the file at HelloWorldExtension.Design\ScreenTemplates\HelloWorldScreenTemplate.cs:

using Microsoft.LightSwitch.DesignTime;

 

image

Update the class decorators to:

 

[Export(typeof(IScreenTemplateFactory))]
[Template(HelloWorldScreenTemplate.TemplateId, ScreenEditMode.Browse)]
[TargetPlatform(TargetPlatformNames.MobileWeb)]

 

Update the #region IScreenTemplate Members section to:

 

        public void Generate(IScreenTemplateHost host)
        {
            ContentItem tabContentItem;
            tabContentItem = host.AddContentItem(host.ScreenTabPagesContentItem, "Group",
                ContentItemKind.Group);
            // Set screen to use view controls by default
            host.SetControlPropertyValue(
                host.ScreenTabPagesContentItem, "Microsoft.LightSwitch.MobileWeb:RootControl", "BrowseOnly", "True");
            // Add CustomControl to screen
            string MyCustomControlName = "MyCustomControl";
            host.AddContentItem(tabContentItem, MyCustomControlName, ContentItemKind.ScreenContent);
            // Create JavaScript code for Utility function
            string UtilityTemplate = "";
            UtilityTemplate = UtilityTemplate + "{0}myapp.{2}" + ".{3}_render = function (element, contentItem) {{";
            UtilityTemplate = UtilityTemplate + "{0}element.innerHTML = '<h1>Hello World!</h1>';";
            UtilityTemplate = UtilityTemplate + "{0}}};";
            // Call AddScreenCodeBehind for UtilityTemplate
            host.AddScreenCodeBehind(String.Format(UtilityTemplate,
                                                       Environment.NewLine,
                                                       host.ScreenNamespace,
                                                       host.ScreenName,
                                                       MyCustomControlName));
        }

 

image

Click on the .Vsix project and then run the project.

image

A testing instance of Visual Studio will open.

Create or open a LightSwitch HTML Client project.

image

If you have not already enabled the extension for the project, go into Properties

image

Select Extensions and check the box next to the extension to enable it.

image

Right-click on the Screens folder and select Add Screen.

image

Select the Hello World Screen Template.

image

The screen will be created.

Run the project…

image

The content will show.

      image

In the Extensibility project, select Stop Debugging to close the testing version of Visual Studio and to stop debugging.

Handling Data

To allow the user to select one of their collections to display using the screen template, we replace the following line:

 

tabContentItem = host.AddContentItem(host.ScreenTabPagesContentItem, "Group", ContentItemKind.Group);

 

With:

 

            if (null != host.PrimaryDataSourceProperty)
            {
                // Get the data type of our property
                ScreenCollectionProperty collectionProperty = 
                    (ScreenCollectionProperty)(host.PrimaryDataSourceProperty);
                IDataType primaryDataType = 
                    host.FindGlobalModelItem<ISequenceType>(collectionProperty.PropertyType).ElementType as IDataType;
                string tabName = primaryDataType.Name + "TileList";
                // Add a screen tab content item
                tabContentItem = 
                    host.AddContentItem(host.ScreenTabPagesContentItem, tabName, ContentItemKind.Group);
                // Add the query parameters to the tab content item
                if (null != host.PrimaryDataSourceParameterProperties)
                {
                    foreach (ScreenPropertyBase parameter in host.PrimaryDataSourceParameterProperties)
                    {
                        ContentItem contentItem = 
                            host.AddContentItem(tabContentItem, parameter.Name, parameter);
                    }
                }
                // Add a ValueCustomControl control to the tab content item
                ContentItem listContentItem = 
                    host.AddContentItem(tabContentItem, primaryDataType.Name, host.PrimaryDataSourceProperty);
                listContentItem.View = "Microsoft.LightSwitch.MobileWeb:TileList";
                // Populate the child content items
                host.ExpandContentItem(listContentItem, disableNavigationPropertyGeneration: false, 
                    disableGeneratedPropertyGeneration: false);
            }
            else
            {
                // No data source was specified; just add a screen tab content item
                tabContentItem = host.AddContentItem(host.ScreenTabPagesContentItem, "Group", 
                    ContentItemKind.Group);
            }

 

 image

We run the project and specify a data source…

image

The screen will be created and it will display the selected collection in a Tile List control.

image

When we run the project the data will display.

 

Next Step

Fundamentals of Visual Studio LightSwitch HTML Screen Template Creation

 

Links

Creating a LightSwitch Screen Template

LightSwitch Extensibility Toolkit for Visual Studio 2013

LightSwitch Screen Template Extension Sample for Visual Studio 2013

Microsoft Visual Studio 2013 SDK (Download)

LightSwitch Extensibility Toolkit for Visual Studio 2013 (Download)

 

Download

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 Professional (or higher), Visual Studio 2013 SDK, and LightSwitch Extensibility Toolkit for Visual Studio 2013 installed to run the code)

1 comment(s) so far...


Gravatar

Re: Creating A LightSwitch HTML Screen Extension

A lot of code, but neat. Thanks!

By Gustav on   12/4/2013 2:25 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation