Changing UI Element by Design Screen in LightSwitch 2012

This article describes how to change a UI element using the design screen in a LightSwitch Application (Visual C#) in Visual Studio 2012.

The following is the procedure for changing a UI element in LightSwitch 2012.

Step 1

Open the Solution Explorer.



Step 2

In the Solution Explorer, right-click on the Server and choose "Add Table".



Step 3

The table appears.



Step 4

In the Solution Explorer, right-click on the Screens and choose "Add Screen".



Step 5

The Add New Screen dialog box appears. Select the "New Data Screen" from the Screen Template, under screen information, choose "Employee" under screen data and provide some name to the Screen and click the "OK" button.



Step 6

The Screen Designer appears.

Step 7

Press F5 to run the application. 



The Design Screen button appears on the data screen.



When you click on the button, a dialog box appears, click on the "Yes" button.



When you click on the Yes button, a screen open in Customization Mode.



Step 8

Since I want to change the caption of the TextBox label from "Ph No" to "Phone Number", I click on the "Ph No" on the left side of the screen.



The Properties are shown below:



Now go to the property window at the bottom of the screen and change the caption from "Ph No" to "Phone Number" and then click on the "Save" button.



Step 9

The window will look like this as shown:



The screen designer will appear as in the following.