LightSwitch – ThemeRoller, Visual Studio 2013

ThemeRoller, change UI

Current project is using light-theme, we want to change their color by jQuery Mobile ThemeRoller

1. Open css file, light-theme-2.0.0.css

2. Select all content

3. Copy all content

 

Go to URL: http://themeroller.jquerymobile.com/

1. Click Import button on the top

2. Choose right version of jQuery mobile (see above Visual Studio Solution Explorer, it shows 1.3.0)

3. Paste css content copied from previous step

 

Just drag & drop the color to the place which you want to change its color

 

1. Click Download, it will show Download Theme screen

2. Input a Theme Name by yourself

3. Click Download Zip button

 

Back to Visual Studio, create a new Style Sheet file, custom-theme.css

 

1. Open the downloaded zip file

2. Select all and copy them

 

Paste into custom-theme.css file

 

Change the link of default.htm, from “light-theme-2.0.0.css” to “custom-theme.css”

 

Run it to see the result

LightSwitch – Custom Code on HTMLClient, Visual Studio 2013

Custom Code on HTMLClient

There are 4 types allow us to write custom code

 

No worry, LightSwitch has loaded following libraries for us

 

Example 1: Add default value of input field, Address1

Write code on created method of field Address1

 

Input following code in .lsml.js file, assign default value if Address1 is empty

 

The result is like below

 

Example 2: Show image/picture on screen

1. Click button, Add Data Item

2. Choose Local Property (can leave default Type = String)

3. Name it, Logo, as example

 

1. Drag & drop Logo into the place that you want to display

2. Change its Type to Custom Control

 

Write code within Logo_render method

 

Append <img> tag and given correct src attribute

 

The result is like below

LightSwitch – Custom Code, Visual Studio 2013

 

Custom Code

Custom Code on ApplicationData in Server Side

 

1. Add a new field, Disable in Customers table

2. Choose Write Code to show out event trigger of Customers table

3. Choose Customers_Validate method

 

1. We can get original value of a field before user made change, by entity.Details.Properties.fieldName.OriginalValue

2. results.AddEntityError() to add a validation error

 

1. Validation Error pop up if Disable is originally equal to True and user want to change the record.

2. It won’t show if user just change Disable from False to True and then save the record.

LightSwitch – Access Control, Visual Studio 2013

Access Control

2 access controls for LightSwitch, Authentication type and Permissions.

 

Authentication Types

There are 2 authentication types, Windows & Forms.

In this example, we use Forms authentication.

 

Permissions

Add 4 permissions for practice, CanAddCustomer, CanEditCustomer, CanViewCustomer and CanAddPhone

Granted for debug is a flag to allow developer to run/execute while programming

 

We can write code on Access Control Methods of an ApplicationData, for example, Customers.

 

Check if current user has pre-defined permission (CanAddCustomer) on customer insert action

 

It will show an Error if user does not have that permission

LightSwitch – Query, Visual Studio 2013

 

http://msdn.microsoft.com/en-us/vstudio/gg604823

http://blogs.msdn.com/b/lightswitch/archive/2013/11/07/new-navigation-features-in-lightswitch-html-client-chris-rummel-rohit-agrawal.aspx

http://msdn.microsoft.com/en-us/library/ee256728(v=vs.120).aspx

Query

http://blogs.msdn.com/b/msdntaiwan/archive/2014/04/01/vs2013-lightswitch-4.aspx

1) Add Query from Application Data

4. Change parameters to become Optional

Following are two query example for different Application Data

 

2) Browse Screen

Instead of create a new Browse Screen, we can just change the original one on its Query Source to new added query.

Drag & drop 2 parameters to layout and change their Control Type to Date Picker

The result is like below:

 

3) Add Query from Application Data, but search UPPER level table

1. We can add a group of filter like 4 which is query on upper level table (Customer, system enable for us by default) 2. We can also use only one parameter (FindString, in the example) to query on different fields of Cutomer and Phone tables

 

4) Browse Screen

Add another brwose screen base on new query added above, SearchByNameOrPhone

Results are like below:

Query by Phone:

Query by Name:

 

5) Screen Navigation

1. Right click on HTMLClient of Solution Explorer –> Click Edit Screen Navigation

2. Add two browse screens in Screen Navigation menu

The result is like

LightSwitch – Screen, Visual Studio 2013

Screens

http://blogs.msdn.com/b/msdntaiwan/archive/2014/04/01/vs2013-lightswitch-3.aspx

1) Search

BrowseCustomers – Edit Query

Edit Query – Filter, Sort, Parameters

Drag & drop parameter FindName and change to TextBox

 

 

2) Add Customer Button

Command Bar –> Add

No need to tick Email & Phone

 

3) View Detail Screen

Action – Item Tap

Also show Email & Phone on the screen

 

4) Add “Edit Customer” Button

 

5) Show Email & Phone as Title List

Move Email & Phone to under Customer Detail Tab, change to become Title List layout and check Show Header

Before	After

 

6) Add “Add Email” & “Add Phone” buttons

 

7) Delete Customer field on Add Email and Add Phone screens