LightSwitch for HTML Client

Visual Studio LightSwitch is a development environment designed to simplify and shorten the business applications and data services. LightSwitch makes it easy to create data-centric business applications that can consume a variety of data sources and create clients that can run on a variety of devices.

Key Features

Build HTML5-based apps that run on all modern devices
Consume and aggregate multiple data sources like databases, SharePoint and OData
Eliminate plumbing code and focus on what makes your application unique

Refer to the following links to get more information about LightSwitchHTML Client:

http://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx

http://msdn.microsoft.com/en-us/library/ff851953.aspx

Refer to the following links to know how to create a simple LightSwitchHTML Application.

http://msdn.microsoft.com/en-us/library/jj674624.aspx

http://msdn.microsoft.com/en-us/library/ff852059.aspx

Steps for installation of EJ LightSwitch HTML Extension

Prerequisites

Visual Studio 2012 (Update 2 or greater) must be installed before attempting to install TheEssential Studio for LightSwitch HTML product.
If you have older versions of EJ LightSwitch extensions installed, you should uninstall them before installing newer versions.
Before installing Essential Studio for LightSwitch HTML product, it is recommended that you do the following:

a. Download and Install 2012:

Visual Studio 2012 SDK:

https://www.microsoft.com/en-in/download/details.aspx?id=34860

LightSwitch Extensibility Toolkit:

http://visualstudiogallery.msdn.microsoft.com/2381b03b-5c71-4847-a58e-5cfa48d418dc

b. Download and Install For 2013:

Visual Studio 2013 SDK:

https://www.microsoft.com/en-in/download/details.aspx?id=30435

LightSwitch Extensibility Toolkit :

http://visualstudiogallery.msdn.microsoft.com/2d204191-90eb-4dfb-831f-cf31513cef06
Once you install the LightSwitch Extensibility Toolkit, complete the following:

LightSwitch Extensibility Toolkit unzipped folder contains the following list of files.
Double click the Microsoft.LightSwitch.Toolkit.vsix present in the unzipped folder.
Copy the Microsoft.LightSwitch.Toolkit.targets from this zip into the specific location.
The Location is mentioned in the README Document.

The Essential Studio for LightSwitch HTML product is downloaded from the following link:

http://www.syncfusion.com/downloads/lightswitch

From the given location you can download the setup file (exe file) of LightSwitch HTML product. To know the step-by-step process of the installation, check here.

Getting Started with EJ LightSwitch HTML Extension

EJ LightSwitch HTML Extension has screen templates and design-time extensions to use EssentialJavaScript components in LightSwitchHTML Application in Microsoft Visual Studio 2013 or Microsoft Visual Studio 2012 (Update 2 or greater). Once the LightSwitch Extension is installed, you can access to the screen templates and custom controls at design time.

There are two types of extensions provided in the Essential JavaScript components in LightSwitchHTML Application.

Web for HTML LightSwitch: It gives access to the web controls like DatePicker, TimePicker, Grid, etc. in the LightSwitchHTML application at design time.
DataVisualization for HTML LightSwitch: It gives access to the Data Visualization controls like Chart, BulletGraph, Maps, etc. in the LightSwitchHTML application at design time.

The following controls are included in the Essential Studio for LightSwitch HTML.

Grids
- DataGrid
Data visualization
- Chart
- BulletGraph
- Map
- TreeMap
- Radial Gauge
- Linear Gauge
- Digital Gauge
- RangeNavigator
Editors
- Textbox
- Autocomplete
- RichTextbox
- Masked Textbox
- Rating
- Slider
- DropDownList
- DatePicker
- TimePicker
- DateTimePicker
Notification
- Progress Bar

Configure the EJ LightSwitch HTML Extension

You can create the application with the controls by configuring the settings manually without the default template.

Create Your First LightSwitch HTML Application

Open Visual Studio 2013 or Visual Studio 2012.
Open File New Project.
In the New Project Dialog, expand the Installed Templates Visual C# and select LightSwitch HTML application. Then enter the desired name for the project and the location.

The LightSwitch HTML application appears as follows.

Adding the EJ LightSwitch Extension

In the LightSwitchHTML projects, select the project Properties.
In the Properties dialog box, go to the Extensions tab in project properties and ensure that the extensions shown in the graphic appear and then select the extension in the Properties

When the extension named Web for HTML LightSwitch is checked, it gives access to the web controls like DatePicker, TimePicker, Grid, etc in the LightSwitchHTML application at design time. You can also select the Use in new projects fields, if desired. To use the Data Visualization controls like Chart, BulletGraph, Maps, etc., check the extension named DataVisualization for HTML LightSwitch.

Adding the CSS and Script references

You need to include the widgets CSS style sheets and script files in the application to render the controls in client-side.

CSS References

The dependent widget CSS files are copied from the following Essential JavaScript installed location:

<Installed Location>\Syncfusion\Essential Studio\16.4.0.42\JavaScript\assets\css\web

The above mentioned folder contains the Core and ThemeCSS files for the web widgets. You need to copy the files from the above mentioned location and add it to your project location. While loading the CSS files into your application, it is maintained in the folder structure as it is in the web folder of the source location. \Content\. Include the reference of the default ej.web.all.min.css styles into the default.html head section that is located in the default-theme folder.

Script References

The dependency script files can be copied from the following installed location:

<Installed Location>\Syncfusion\Essential Studio\16.4.0.42\JavaScript\assets\external

The necessary dependency script files are as follows,

jQuery (from the version 1.7.1 to 3.1.0)
jquery.easing.1.3.js
jsrender.js

It is copied from the above mentioned location and added to the scripts folder section of your project location as follows: \Scripts. Include the script references in the default.html as follows.

NOTE

From V13.4.0.53 onwards, jQuery.globalize.min.js file has been replaced with our script file ej.globalize.min.js to support the globalization for our widgets. For version lesser than 13.4.0.53, refer jQuery.globalize.min.js. There is no necessary to refer ej.globalize.min.js explicitly since it is available in ej.web.all.min.js script file. Besides jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49.

The Widget source files are copied from the following installed location,

<Installed Location>\Syncfusion\Essential Studio\16.4.0.42\JavaScript\assets\scripts\web

The ej.web.all.min.js script file contains all the web widgets. This is added in the following mentioned folder structure of your project \Scripts\ej. Include the Syncfusion EJ Scripts references to default.html after base dependency scripts as follows.

For CDN Users

You can also refer to the scripts directly from CDN location before speeding up the loading time. Refer to the following CDN locations and add them in the default.html file of your project.

javascript

<!-- Dependent CSS for Essential JavaScript Components -->



    <link href="http://cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />



    <!-- Dependent Scripts for Essential JavaScript Components --> 



<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>



    <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>



    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>



    <script src="http://cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js"></script>

The CDN link contains the Syncfusion CDN file lists and other information about the CDN links.

Add the Control in the Application

The following steps describe how to render the DatePicker control in the LightSwitchHTML application.

Create a new Browse Screen and do not bind any data source to the screen. Set the Browse screen as Home Screen in that application.
Click Add Data Item and Select the Local property. Then add the local property with specified data type. Now, the local property named DatePickerValue of type Date is added.
Drag the DatePickerValue property onto the screen designer.
Select the DatePickerValueLocal Property in the designer and change its control type as EJ Value control.
EJ Value control has a list of controls to render. Select the control to be rendered with this content item. Now it is changed as DatePicker Control. The Control List is present in the properties panel.

NOTE

You need to choose an appropriate control based on the data type of the content item. For example, do not assign date value to Numeric and Currency Text Box.
Click Edit Render Code link in the properties panel.

The following code example is generated automatically while clicking the Edit Render Code in the properties panel. The Source code is editable.

     myapp.Browse.DatePickerValue_render = function (element, contentItem) {

     // Input element to render DatePicker control.

     var input= $('<input />');

     input.attr('id', 'DatePickerValue');

     input.attr('data-role', 'none');

     input.appendTo($(element));

     // Renders DatePicker control with input element.

     input.ejDatePicker({

     change: function (args) { contentItem.value = args.value;} });

     contentItem.dataBind('value', function (value) {

     input.ejDatePicker({ value: value })  });

     };

You can change the type of control continuously. Do not assign the unsupported data values to the controls.
Run the Application and it creates the ejDatePicker control on the screen. The DatePicker control appears as follows.
The above generated code block renders the default DatePicker.
You can modify the generated code to suit your needs because the generated code is editable.

Sample details

This section explains the default location of the installed samples and describes the procedure to run the samples through the sample browser and online.

NOTE

If you have changed the default location of the samples, you can refer from the changed location.

Samples Installation Location

The LightSwitch HTML samples are installed in the following location:

For 64-bit:

Run the samples

To run the samples, open the corresponding Dashboard from the following location:

Start Menu-> All Programs -> Syncfusion -> Essential Studio <16.4.0.42> -> Dashboard
You can also open the Dashboard from the installed location also:

C:\Program Files (x86)\Syncfusion\Essential Studio\16.4.0.42\Infrastructure\Dashboard\4.0\Dashboard.exe

The following screenshot shows the Dashboard.

To run the locally installed samples, click on Run Local Samples button, and to run the online samples click on Run Online Samples button from the top right corner.

Configuring Syncfusion NuGet Packages in Visual Studio

Syncfusion LightSwitch HTML NuGet packages are available here.

NuGet Configuration

The steps to install the Syncfusion LightSwitch HTML NuGet Packages in Visual Studio are as follows,

In Visual Studio, navigate to Tools | NuGet Package Manager | Package Manager Settings, the options dialog will appear on the screen as shows below,
Select NuGet Package Manager | Package Sources and click Add button to add the Package Name and Package Source of Syncfusion NuGet Packages.

Name: Name of the package that listed in Available package sources
Source: Syncfusion LightSwitch HTML NuGet Package feed url
http://nuget.syncfusion.com/nuget_lightswitch/nuget/getsyncfusionpackages/lightswitch

NOTE

The Source text box in the above image denotes the location of the NuGet packages and the Name section, allows you to provide a unique name for NuGet Packages Source.

IMPORTANT

Syncfusion other platforms NuGet packages feed links are available here

NuGet Installation

Syncfusion LightSwitch HTML NuGet can install once configured the package source. The NuGet installation steps as below,

Once configured the Package source with Syncfusion NuGet Packages, right click on project and choose Manage NuGet Packages | Online | <Package Source Name>.
The NuGet Packages are listed which are available in package source location. Install the required packages to your application by clicking Install button.

NOTE

NuGet packages can be install directly through the command line (Package Manager Console). Further details click here

Updating a NuGet Package

Using the Manage NuGet Packages in Visual Studio, NuGet packages can be update.

Right click on Project and Navigate to the Manage NuGet Packages and click on the Updates tab to check for updates.
Select the Updates -> <Syncfusion Package Source>. Refer to the following screenshot for more information.
If there is a new version of NuGet you will see it in the list of available updates.
Select NuGet Package in the list and click Update. When the update is complete, close and re-open all open instances of Visual Studio.

NOTE

By clicking Update All button, all NuGet packages are getting update. When the update is complete, close and re-open all open instances of Visual Studio.