Articles → Light Switch 2011 → Runtime Customization Of Application UI Using Design Screen In Lightswitch 2011

Runtime Customization Of Application UI Using Design Screen In Lightswitch 2011

In this tutorial I will explain how to do run time customizations on application UI using design screen in lightswitch 2011.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.
Silverlight runtime version 4 or 5 is installed on your machine

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create project using visual studio?
How to create tables in lightswitch?
How to create screens in lightswitch?

Runtime Customization And Its Benefits

Runtime customization (in terms of UI in lightswitch application) means to change the UI elements or contents when application is running.

The benefit of runtime customization is that as a developer you can change the UI of an application at runtime and see the changes immediately without stopping the application.

Steps Of Execution

In this tutorial I will execute certain steps for the demonstration of UI customization at runtime using design screen in lightswitch application. These steps are

Creation of new project
Creation of new table
Creation of new data screen
Change UI element using design screen

Let us execute each step

Creation Of New Project

First of all create a new lightswitch project. See the screen shot below for project structure

Picture showing the project structure of the lightswitch application in the solution explorer

Click to Enlarge

Creation Of New Table

Create a new table. The purpose of adding a table is to show fields on the screen. We can skip this step and add fields on the screen using add data item as well. But for this tutorial I am adding a sample table. See the screen shot below for table schema.

Picture showing the design view of the SampleTable

Click to Enlarge

Creation Of New Data Screen

Create a new data screen. See the screen shot below

Click to Enlarge

See the project structure in the screen shot below after adding a screen in the project

Picture showing the screen and data table added in the project

Click to Enlarge

Change UI Element Using Design Screen

To change the UI element at run time, run the application.

Picture showing the design screen button in the lightswitch application

Click to Enlarge

You can see in the figure above a button on the right hand side of the screen. This is the button which opens up a screen for run time customization. This screen will only show to the user when application is running in debug mode. If the application runs in release mode then you won’t see this button.

Now click on this button a message appears as show in figure below

Picture showing the message for the unsaved data on the screen

Click to Enlarge

This message is to notify the user that there are some changes on the screen which are not yet saved (You can also see the asterisk (*) on the screen’s tab) so if you open the design screen then all the changes gets lost. We can click on Yes button as the main purpose of this tutorial is to show you the design screen. Once you click on Yes as screen appears as shown in figure below

Picture showing the design screen for the runtime customization

Click to Enlarge

This is the same sort of screen which you can see in visual studio when you click on screen. As a part of UI customization we will change the caption of textbox’s label from ‘Sample Field’ to ‘User Name’.

For doing that click on the ‘Sample Field’ on the left hand side of the window. A property window appears on the below side of the screen as shown in figure below.

Picture showing changing the caption name of the textbox

Click to Enlarge

As you can see in the figure above I have changed the caption from ‘Sample Field’ to ‘User Name’. Now click on the save button on the top right side of the window. The designer window will close and screen will appear with the changed caption. See the screen shot below

Picture showing the changes done is reflected on the screen

Click to Enlarge

Now close this application and check the designer screen of visual studio

Picture showing the asterisk(*) sign after the file name that signifies the unsaved changes

Click to Enlarge

Check the asterisk (*) on the screen designer’s tab. This is because we have changed the caption at run time and changes are not yet saved. So the developer has to explicitly save the changes.

Posted By -	Karan Gupta

Posted On -	Wednesday, July 24, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**