Creating a Wizard Application in LightSwitch 2012

This article describes how to create a wizard application in LightSwitch using Visual Studio 2012.

The following procedure shows how to create a Wizard Application in LightSwitch 2012.

Step 1

Open the Visual Studio 2012.
Go to "File" => "New" => "Project..."
In "New Project" => "Installed" => "Template"
In "Template" => "LightSwitch"
Select "LightSwitch Application (Visual C#)".
Enter the Name and choose the location.
Click "OK".

lightswitch app.jpg

Step 2

The Solution Explorer appears.

sol explorer.jpg

Step 3

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

Add Table.jpg

Step 4

The Table appears.

Step 5

In the Solution Explorer right-click on the "HTMLClient Screen" and choose "Add screen".

add src.jpg

Step 6

The Add New Screen dialog box appears on the screen. Add a Browse Screen to display the list of Employees.

browse src.jpg

Step 7

In the Screen Designer, right-click on the Command Bar and choose "Add Button".

Step 8

The Add button dialog box appear on the screen. In that "Choose an existing method" option, select the "Employees.addAndEditNew" method and navigate to "(New Screen)". This tells the system that this button will add a new screen. Click OK.

Step 9

It will create an Add/Edit Details Screen. We can provide the name to the Screen and click OK.

add edit detail src.jpg

Now the Solution Explorer appear in such manner.

html sol ex.jpg

Step 10

In the Add Edit Employee Screen designer right-click on the Tab option and choose "Add Tab".

add tab.jpg

By default one tab is present so we need to add two new tabs by right-clicking on the Tab option.

src des add 3 tab.jpg

Step 11

Select the First Tab and in the property change the name to "Part 1".

part1 prop win.jpg

Similarly, select the Second Tab and rename it to Part 2.

part2 prop win.jpg

And in the same manner rename the Third Tab to Part 3.

part 3 prop win.jpg

Step 12

Drag the "Name" option under the First Tab. Similarly drag the "Email" option under the Second Tab and "Address" under the Third Tab.

src des after adding.jpg

Step 13

Since we do not need Column Layout, we can remove it.

remove column src des.jpg

Step 14

Press F5 to run the application. We will see three tabs on the screen:

name employee.jpg

Step 15

In the Add Edit Employee Screen Designer, select the Screen root node. Go to the property window and mark the "Hide Tab Titles" as checked in order to hide the title of each Tab.

Also, select the Screen Type as "Browse" sincwe that will remove the Save button from the dialog box, in other words the close button is only available.

hide tab title & browse tab.jpg

Step 16

Once again press F5 to run the application.

Creating a Wizard Application in LightSwitch 2012

Reactions

Comments