Add and Edit Data in Basic LIghtSwitch Application

Here we will learn how to add and edit data in a basic LightSwitch Application using Visual Studio 2012.

Procedure for creating a basic application.

Step 1

In the LightSwitch HTML Application, open the Solution Explorer.

s explo.jpg

Step 2

Right-click on the data source and choose "Add Table".

add table.jpg

The table appears.

table.jpg

Step 3

Right-click on "Screen" and choose "Add Screen".

add src.jpg

Step 4

Select the HTML Browse Screen from the screen template and provide the screen information and click "OK".

add new src.jpg

Step 5

The screen designer appears.

src desi.jpg

Go to the properties window, in Behavior set the Screen Type to "Edit".

prop win.jpg

Step 6

In order to add the data item to the screen, click on "Add Data Item" in the menu bar.

add data item.jpg

The Add Data Item dialog box appears on the screen. Select the "Local Property" radio button and mark the "IsRequired" checkbox as unchecked and provide a name to the local property and click "OK".

add dialog.jpg

Step 7

The "Modify" Data Item appears on the screen.

modify local prop added.jpg

Drag and Drop the Modify data item below the Command Bar on your screen.

drag drop modify.jpg

Step 8

Choose the Modify data item from the screen designer and go to the property window and set the Label Position : "Hidden" and Font Style : "Large".

modify prop.jpg

Step 9

Right-click on the command bar in the screen designer and choose "Add Button" to add and edit Employees.

add button.jpg

The Add Button dialog box appears on the screen. In this select "Add and Edit New" and navigate to "New Screen" and click the "OK" button.

add button dialog.jpg

The AddEditEmp Screen appears; click the "OK" button. The AddEdit screen designer appears.

add edit src.jpg

Step 10

Double-click on the "BrowseEmps" Screen.

Once again right-click on the command button of the "BrowseEmp" screen and choose "Add Button". But this time choose "Edit Emp" from the Add button Dialog Box.

edit selected button dialog box.jpg

The Screen Designer will look as in the following:

src design.jpg

Now we can simply add and edit Employees.

Step 11

Press F5 to run the application.

running.jpg

When we click the "Add New" button we get:

add edit output.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all