LightSwitch 2013 HTML5: Custom query filter using Flip Switch

When to use Flip Switch?

Flip Switch is one of the coolest feature in LightSwitch 2013. When you have requirement of querying the table on particular column at that time we can use Flip Switch.

Let's for example, we have Order table and that table have orders which are Processed and Cancelled and we have requirement of showing those orders on Switch control, so in that case we need to design Query on Order table as follows;

Add new browse screen and select screen data as OrderSearchQuery as follows;

After creating new screen, in the editor mode we get following options for added parameters in the query mode for Processed and Cancelled. Drag and drop both the parameter on the screen layout and change control type from Text to Flip Switch as follows;

So you can see in above screen shot we have changed control type for 'Cancelled' from text to flip switch.
Now coming to query part - How to write query on the Flip Switch control?
- Its simple, just goto the OrderSearchQuery.lsml file in Server project and on the right hand upper corner you can see < >Write Code -> General Methods -> OrderSearchQuery_PreprocessQuery link. Just click on the 'OrderSearchQuery_PreprocessQuery' link and following method will get open in MyDBDataService.cs class file;

Add business logic for the Processed and Cancelled flip switch as follows and your application is ready to run.

Lightswitch 2013 Html5 with MVC Web API And JQuery

Why Lightswitch 2013?

1.Website/Application is  Responsive , that means it support responsive design- Support all device from desktop , tablet to mobile etc.
2.Seamless support to Html5 , JavaScript and MVC hence make it more compliant to cross browser compatible.
3.More suitable for Admin Module where View, Add, Edit, Update and Delete functionality with ease to achieve with inbuilt wizard .
4.Easy to customize as per business requirement.

Customize Html5 using Web API.

LightSwitch Screen Designer helps to create master-detail screens by which you can add/edit the screen details. But some time we have requirement not to use lightswitch traditional ‘Save’ button and we need custom button to update record with custom value that time we can use Web API which will call through custom button on the detail screen.

Let have an example, suppose we have master-detail screen for Employee and EmployeeDetails;

When user click on one of the employee ‘Add/Edit Employee Details’ screen gets open as follows;

As you can see, we have to usebutton to save the record, but some time we need to call store procedure to update/insert records in the database as per business requirement, that time we need to have new custom button and custom code to call the update for the above form;

Let’s say we need new button to ‘Resend’ and ‘Cancel’ the information, so we will add 2 buttons to above form and we will change the edit screen behavior to Browse as follows;

 
 
So in above screen we have disabled the Save button which comes with Edit behavior and added custom buttons ‘Resend’ and ‘Cancel’, so we need code to call store procedure;
Right click on the button and select ‘Edit Execute Code’ to add our custom code in the same screenName.lsml.js file;

Call store procedure using Jquery JSON as follows;

 Here I have created new folder ‘api’ in Server project and added new class file ‘EmployeeDetailsController.cs’ and added following code;

So by adding customization with Web API we can achieve to call store procedure as per business requirement.

LightSwitch 2013 HTML5: Using authorization in LightSwitch application

For authorization we allow some roles and deny some roles, let’s say we are allowing only those users who are in admin group as follows;

Once authorization tag is added in Web.config file, we need to create authorization controller which will be having method to get if authorization true/false for the users. So create following method in authController.cs;

Last step is reading the value from controller, usually we get the requirement  for enable/disable screen button as per the role/authorization. So for above example we will create simple button on the HTML screen which will redirect to OrderDetails on click and button will be enable only if the user is in AdminGroup role.

Note: Please add routing mechanism for api's in Global.asax as follows;

So in this way we can achieve authorization in LightSwitch HTML5.

LightSwitch 2013: Application Deployment using Command Prompt msdeploy - Batch File

Configure Basic Settings

To start with deployment for Light Switch application, first publish the application using Publish Wizard, but before starting to pubilsh lightswitch application we need to install ‘Microsoft Web Platform Installer’ in the hosting machine. After that we need to start the ‘Web Deployment Agent’ Services from the administrative tools.

LightSwitch Publish Wizard

Once web platform installer get install we get he option for publish website, click on the publish and following wizard get open;

In the Application Type section, select ‘Complete application’ option and click Next;

In the Application Server Configuration  section, select ‘IIS Server’ option and click Next;

In the Publish Output section, we get 2 option which deploys application directly on IIS Server or create package, we are going to select the option for ‘Create a package on disk’ as we need to change our connection string as per stage/prod environment. Click on Next button;

In the Publish Settings section, enter the details for website name and also select the path to create package for LightSwitch application and click on Next;

In the Security Settings section select ‘No’ for not to create Application Administrator, as we are not using AspNetMembershipProvider ‘Profiles’ and ‘Roles’ and click on Next button;

In this Data Connection section, do not mark on ‘Generate the SQL database script’ as we are not using/creating any new database rather we are attaching existing data source, so go to next tab ‘Attached Data Source’ ;

Add the connection string for the ‘MyData’ and click on Next button;

(#Note: Please make sure you have selected Integrated Security = SSPI.)

Once all setting done, click on the Publish button to ‘Publish’ the LightSwitch application.

Once the code is published we get the following set of files in the publish folder;

Command Line Deployment for LS Application

Create new folder “DeployBatch” and place some important files in it. Following are required files;

TemplateNewAppPool.zip and TemplateNewWebSite.zip

To deploy LS application, we need AppPool and WebSite on the IIS Server, so we can create TemplateNewAppPool, TemplateNewWebSite and batch file with msdeploy commands in it.

Please find the reference to create both templates as following;

To create new TemplateNewAppPool click here.

To create new TemplateNewWebSite click here. 

(Note: we have skips the steps which required for https)

So we get following files for creating template for AppPool;

TemplateAppPoolPackage.zip
AppPoolParameters.xml and
DeployNewAppPool.cmd

And following files for creating template for website

TemplateWebSitePackage.zip
WebSiteParameters.xml and
DeployNewWebSite.cmd

Batch file to run msdeploy command

Create new batch file which will have commands to execute packages to create template for new App pool, new Web Site and deploying our Systembolaget.Web.Admin web site.

Following commands will be included in batch file;

echo create new appPool

@echo off

CALL E:\Published\DeployBatch\DeployNewAppPool.cmd

echo create new webSite

@echo off

CALL E:\Published\DeployBatch\DeployNewWebSite.cmd

echo replace SetParameter.xml file with stage/prod SetParameter.xml file

@echo off

COPY E:\Published\DeployBatch\LSApplicationSample.SetParameters.xml E:\Published\LSApplication /Y

echo SetParameter.xml replaced!

echo Run deployment package..

@echo off

CALL E:\Published\LSApplication\LSApplicationSample.deploy.cmd /Y

echo replace authorization.xml file with stage/prod authorization.xml file

COPY E:\Published\DeployBatch\authorization.config E:\WebSites\LSApplication /Y

echo authorization.xml replaced!

echo LSApplication website created successfully!

Lets name the batch file as “DeployLSAppPackage.bat”

Authorization.config for prodtest/prod environment

Add new config file “authorization.config” as per the environment where we are going to deploy this package.

For example for stage we have following groups;

<authorization>

  <allow roles="my-roles\AdminGroupStage"/>

  <deny users="*"/>

</authorization>

And for prod we have following groups;

<authorization>

  <allow roles="my-roles\AdminGroupProd"/>

  <deny users="*"/>

  </authorization>

So keep the group name as per environment given by admin team.

LSApplicationSample.SetParameter.xml

By default, when you open ‘LSApplicationSample.SetParameters.xml’ file from Published folder you will get following options to set values;

<?xml version="1.0" encoding="utf-8"?>

<parameters>

  <setParameter name="DatabaseServer" value="" />

  <setParameter name="DatabaseName" value="LSApplicationSample" />

  <setParameter name="DatabaseUserName" value="" />

  <setParameter name="DatabaseUserPassword" value="" />

  <setParameter name="LSApplicationSample_IisWebApplication" value="Default Web Site/LSApplication" />

  <setParameter name="MyData" value="" />

</parameters>

So copy above “LSApplicationSample.SetParameters.xml” file in “DeployBatch” folder and keep only required parameters as follows;

Delete unwanted params

As you can see, we have different name/value pair options to set the parameter value, but here we have attached existing database and also we are following windows authentication, in that case we don’t required values for Database related settings.

So here we can delete top 4 params related to database.

Set Custom Application Pool

By default for "LSApplicationSample_IisWebApplication" we have value as "Default Web Site/LSApplication", so we can change Default Web Site to ‘myAppPool’ or any app pool name which we are going to create.

So for an example here we can change it to

  <setParameter name="LSApplicationSample_IisWebApplication" value="myAppPool/LSApplication" />

Set Connection String

So finally we can set different connection string for different environment, add the value for MyData param as follows;

<setParameter name="MyData" value="new connection string for stage/prod environment" />

Run DeployWebAdminPackage.bat file

We have created all the required files which we need for deployment for light switch application, the folder structure for DeployBatch is as follows;

Next step is to open with command prompt in administrative rights and run the DeployLSAppPackage.bat file. You will get the desire output as follows;

Once you run the batch file we can check the output in the output directory, if error files doesn’t contain any error then our application is deployed succefully on the IIS Server.

Note: Remember to enable directory browsing in IIS server.

LightSwitch 2013 HTML5 - settings for (enable/disable controls, datepicker text, allowing space in text box)

Enable / disable controls:
To enable / disable controls from Light Switch HTML5 screens,  set .isEnabled property to true/false in the screen created method.

Edit text in date picker control:
Some time we need text for different language in date picker, I tried changing my computers culture setting to another language still I was not able to achieve the year text from other language.
So I  came up with the solution of editing the text using jquery as follows;

Adding space in text control:
I am not sure what is wrong with adding space while doing any search using text box control in LightSwitch, I found simple solution on the same to overcome the problem we need to set stopPropagation() property  for keydown event of the controls postRender event.