Design a Screen in LightSwitch 2012 to Create or Edit an Entity

This article describes the design of a screen in LightSwitch to add or edit an entity using Visual Studio 2012.

The following is the procedure for designing a screen to create or edit an entity (table).

Step 1

Open the Solution Explorer.

sol explo.jpg

Step 2

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

add table1.jpg

Step 3

The table appears.

Step 4

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

Add src.jpg

Step 5

Select the Details Screen from the Screen Template. Under Screen Information we provide the Screen Name and Screen Data and then click "OK".

detail src choosen.jpg

Step 6

The Screen Designer appears.

employee app designer detail.jpg

Step 7

Select the Employee Id option and go to the property window and uncheck the "Is Required" property from the property window.

employee detail.jpg

employeeid prop win.jpg

Step 8

Go to the Menu Bar and select "Add Data Item".

add data item.jpg

Step 9

The Add Data Item Dialog box appears. In that, first select the Local property radio button. From the Type option choose the Employee (entity) and we provide the "Employees" Name to it and click "OK".

add data item dailog.jpg

Step 10

Now the Application Designer will look in the manner shown.

now app des.jpg

Step 11

From the Screen designer delete the Employee content. We have deleted it siince we want to replace the content from the Employees property.

delete employee.jpg

Step 12

After deleting now the Application Designer will appear in the manner shown.

after deleting app des.jpg

Step 13

Now we want to bind the Employees property to the screen, therefore we click on the add option and choose the "Employees" option form the drop-down list.

add employees.jpg

Step 14

Now the application designer will look like this as shown.

3 app designer.jpg

Step 15

Now in order to change the control type we click on the Employees option and from the drop-down list we have choosen the Rows Layout option.

add rows layout.jpg

Step 16

After selecting the Rows Layout option the screen designer will appear in the following manner:

after adding rows layout.jpg

Step 17

In the Menu Bar click on "Write Code" and choose the "EmployeeDetail_Saved" method.

write code.jpg

Step 18

In the code editor enter the following code.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

public partial class EmployeeDetail

{

partial void Employee_Loaded(bool succeeded)

{

// Write your code here.

this.SetDisplayNameFromEntity(this.Employee);

if (this.EmployeeId.HasValue)

{

this.Employees = new Employee();

}

else

{

this.Employees=this.Employee;

}

partial void Employee_Changed()

{

// Write your code here.

this.SetDisplayNameFromEntity(this.Employee);

}

partial void EmployeeDetail_Saved()

{

// Write your code here.

this.SetDisplayNameFromEntity(this.Employee);

}

The code above represents that the screen has a parameter named EmployeeId that represents the Id of the Employee. Here we are setting the Employees property as all of the screen content bound with this property.

Step 19

Using the list we can also Navigate to this screen. Hence, we create a List and Detail Screen for Employees.

list and detail src.jpg

Step 20

In the Application Designer of List and Detail Screen, expand the command bar option of the Employees list and right-click on the add option and choose override code option.

add over ride code.jpg

Step 21

In the Code Editor do the following coding as shown.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

public partial class EmployeesListDetail

{

partial void EmployeeListAddAndEditNew_CanExecute(ref bool result)

{

// Write your code here.

}

partial void EmployeeListAddAndEditNew_Execute()

{

// Write your code here.

this.Application.ShowEmployeeDetail(null);

}

Step 22

Again go back to the Screen Designer and under the command bar right-click on the edit option and choose "override code".

edit override code.jpg

Step 23

In the Code Editor enter the following code:.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

public partial class EmployeesListDetail

{

partial void EmployeeListAddAndEditNew_CanExecute(ref bool result)

{

// Write your code here.

}

partial void EmployeeListAddAndEditNew_Execute()

{

// Write your code here.

this.Application.ShowEmployeeDetail(null);

}

partial void EmployeeListEditSelected_CanExecute(ref bool result)

{

// Write your code here.

}

partial void EmployeeListEditSelected_Execute()

{

// Write your code here.

this.Application.ShowEmployeeDetail(this.Employees.SelectedItem.Id);

}

Step 24

Press F5 to run the application.

The Employee Detail Screen appears as in the following manner.

output 1.jpg

The Employees List Detail screen appears as in the following manner.