How to Create and Use the Details Screen in LightSwitch Beta 2



Prologue:

In my previous article, we saw how to create and use the Search Data Screen. In this article we shall discuss how to create and use a Details Screen in a LightSwitch application.

Preparing the Solution:

Create a LightSwitch Desktop application with the name "DesigningScreensInLSBeta2" as shown in the following figure.

SSwitch1.gif

Follow the [No: #] to create the solution.

The Entity Designer:

Let us create a table.

SSwitch2.gif

This is a new screen in Beta 2 which is not available in Beta 1. Select the rounded option to create a new table.

After clicking the "Create new table" option the following Entity Designer will be displayed.

SSwitch3.gif

To change the Table name simply click on the Header of the Entity Designer and give the name. In our sample application we have given the name as Student.

When you are creating a table [Entity], the field Id is the default one. At run time sometimes we don't need the Id to be displayed.

To make the visibility of the Id false, select the Id and select the properties for the Id field.

SSwitch4.gif

Just uncheck the option "Display by Default". It will hide the Id from the running screen.

Creating the Search Data Screen:

There are two ways to create a screen. One is by selecting the Screen... button on the Entity Designer screen top.

SSwitch5.gif

Another way is to right-click on the Screens section in the Solution Explorer.

SSwitch6.gif

Adding Details Screen:

In this article we will mainly focus on the Details Data Screen.

SSwitch7.gif

To create the Details Screen, Details Screen from the screen template in the left side panel [No: 1].

Give the suitable name for the screen which we are going to create. In this application we have given the name StudentDetails [No: 2].

Quick Note:

  • The name should start with alphabets and contain only numbers and under_score.

Select the Entity which will be displayed in the Details Screen. For our application we have selected the Students as have only one Entity.
If you have selected the Use as Default Details Screen options then this screen will be the default details screen for all operation. [No: 3].

The details screen allows you to edit as well as displaying the details by selecting the Student Details [No: 4].

We can include more details such as student. If you have a staff entity then we can display the staff details and student details in the same class. In future articles we shall see in detail about the entity relationship.

Where & When to use Search Data Screen:

Whenever we have to display the particular data or like while clicking on a particular row, the details screen will be displayed.

If you need to edit a particular record then the details screen will be useful for editing the record.

Changing the Appearance of Search Data Screen

SSwitch8.gif

We can change the appearance of the Details Screen using the Properties available. We can change the Control which is holding the Details. By default the Rows Layout will be the control for the data collection to display.

Application in Action:

As we could not have the Details screen in the Task panel, we have to launch the details screen from the search data screen.

Open the Search Data Screen.

SSwitch9.gif

From this screen navigator, select the Name and open the property. To get the property of search data screen, just right-click the Name field and select Properties.

SSwitch10.gif

In the Properties of Name, go to the Appearance section.

Select Show as Link [No: 1]

On clicking the link that should be displayed, select Target Screen as StudentDetails which we have created [No: 2].

Now press the Play [F5] button.

SSwitch11.gif

Here the Name field of the record has the Link which is rounded to show you.

Just click on that link; you will have the Details Screen we have created.

SSwitch12.gif

When you clicked on the Name link in the Search Data Screen it will display the above screen with the edit mode. We can edit the record using the details screen.

Summary:

In this article, we have seen how to create and use the Details Screen in LightSwitch application.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.

Please rate this Article.

Thanks.


 


Similar Articles