Part 2/11: Rapport with New Data Screen in LightSwitch

Table of Content

1. Introduction
2. Aim of the article
3. Steps to create New Data Entry Screen
4. Customizing the Screen
5. Working with Computed Column
6. Creating Custom Validation
7. Adding a Image Field
8. Conclusion

Introduction

Rapid business application development is a need of today’s business and keeping that in focus software stewards wants to build the 3 tire applications at a lightning speed where there will be less code, less time will be spent on designing the UI screens , the BAL layer and DAL layer. By keeping all these into focus, on 26th July, 2011, Microsoft has released their new product – LightSwitch.

It is the simplest way for developers of all skill levels to develop business applications for the desktop as well as for cloud. This is the second part of the series of 12 LightSwitch tutorials. In this part we will look into how to make the data entry screen.

You can read the other parts of the LightSwitch tutorial as under

1. Part 1: Introduction to Light Switch
2. Part 2: Rapport with New Data Screen
3. Part 3: Rapport with Search Data Screen
4. Part 4: Rapport with Editable Grid Screen
5. Part 5: Rapport with List and Details Screen
6. Part 6: Rapport with Details Screen
7. Part 7: Rapport with External Data Source – Database
8. Part 8: Rapport with External Data Source – WCF RIA Service
9. Part 9:Using a custom control in LightSwitch
10. Part 10: Publish LightSwitch Application as Desktop application and host in local system
11. Part 11: Publish LightSwitch Application as Web application

Assumption

The article assumes that, we have LightSwitch 2011 installed in our system

Steps to create New Data Entry Screen

Let us follow the below steps for creating a New Data Entry Screen for inserting records to the database

Step1: Choosing LightSwitch Application

Open VS2010 and from the project templates, choose LightSwitch Application (Visual C#)

Click OK button. We will be presented with an empty project with only two folders named "Data Sources" and "Screens".

We can either create a new table or connect to the external data source. In this tutorial we will go with "Create new table" option.

Step 2: Create a new Table

Click on "Create new table" option.Once clicked, we will get the below screen

So a default table by the name Table1Items has been created in the ApplicationData database.We will rename our table to tblEmployee.Next we will add some fields to it

N.B.~Rules for creating the Field names

1. We cannot use any reserve keyword in the Name field as shown below

   

2. We cannot create names with spaces. Instead we need to use underscores

   

N.B.~Some tit bits

We can even insert a new property, move the Properties up and down, add and edit relationships as shown under

So finally our Employee Table looks as under

As can be make out that, we have used some new data types such as Email Address, Phone Numbers etc.For every name field, the property dialog looks as under

N.B.~LightSwitch uses SQL Server Express for its internal database. The ApplicationDatabase.mdf file will be available in the bin\data folder of our project

Step 3: Create Data Entry Screen

Now we will add the dataentry screen. For this either we can click on the Screens Folder , right click and choose "Add Screen" Or Click on the Screen Icon or Press CTRL + SHIFT + E.

The "Add New Screen" window opens as shown under

We will choose the New Data Screen. Let us give a suitable screen name and the data source. That’s all

Click "Ok" to continue. This will create a new UI screen for our application to insert new data record by end user. Now, in the solution explorer we can see that, the “Data Sources” folder has one database named “ApplicationData” and it has a table named "tblEmployee". We can find the "EmployeeDataEntryScreen" in the "Screens" folder.We can change the design of the UI from the below screen:

Step 4: Running the application

Build the application.Press F5 to run the application. The below screen will appear

Enter valid values and click on the Save button and the record will be saved

N.B.~A few words about field validations

1. If we try to save without filling the mandatory fields, the system respond in a nice way as shown under

   

   Moving the mouse in the Emp Name field shows the correct message for validation.

   

2. Try to save the data by entering invalid email address and we will be prompted with error message as under

   

Upon entering the valid records and clicking on the save button the next record will be saved and it's ID will be incremented as under

Now let us try to close the window without saving the record.In that case the system will ask for a confirmation message as to whether save the changes or to quit the application without doing so.

Customizing the Screen

We can however, customize the screen.For that let us click on the Design Screen Customize button as show below

It will ask for "Your unsaved data on the screen will be lost? Continue". Click OK.

The customization screen appears.

Here we can set the values of the various properties for our screen customization. In this case we changed the Horizontal Alignment to Left and Vertical Alignment to Top for the sizing property. Next click on the save button.And we can figure out that our data entry screen has been changed

If we want to close any unsaved changes, that can be done by clicking on the tab close button

Working with Computed Column

Sometime we may need to work with the computed column.We can add computed column by clicking on the Computed Property or by using Ctrl + Shift + C as shown under

This will add a computed property by the name Property1.Change the name to EmpFullName. Hence, our table design looks as under

Click on the Edit Method of the Columns property as shown uder

Add the below code

namespace LightSwitchApplication
{
    public partial class tblEmployee
    {
        partial void EmpFullName_Compute(ref string result)
        {
            // Set result to the desired field value
            result = string.Concat(this.EmpFirstName, " ", this.EmpLastName);

        }
    }
}

So, our computed column will concat the First and the Last Employee Names. If we run the application we can see that.

Creating Custom Validation

Till now we say the validation provided by the LightSwitch framework. But we may need to create our own validation. Suppose we want to make the EmpFirst Name column to accept only alphabets and spaces.

For doing so, first click on the "Custom Validation"

And add the below code in the EmpFirstName_Validate method

partial void EmpFirstName_Validate(EntityValidationResultsBuilder results)
{          
	Regex r = new Regex(@"^[a-zA-Z\s]*$");
	if (!(r.IsMatch(this.EmpFirstName)))
	{
		results.AddPropertyError("First name can contain only alphabets and spaces.");
	}
}

If we now run the application and enter some wrong value in the EmpFirstName column, we will get the below error message

Adding a Image Field

We will now see as how to add an image in our application

First we have to add a Image Data Type as shown under

Now Save the table. We'll want to be able to edit the picture as well, so double click the SearchEmployee screen. First expand the DataGridRow | Employee and then click the + Add item:

So the layout will look as under

Now run the application

We can figure out that the "EmpPhoto" field is empty since we have not uploaded any photo. Click on the EmpFirstName link

Now we have the option to upload an image

After the image is uploaded, click on the Save button and the record will be saved.

Now if we perform a search, we will get the record with image uploaded

N.B.~Search Screen is described here

Conclusion

So in this part we have seen how to work with the Data Entry Screen for inserting records to the database. Also we have seen how to perform custom validation,create computed column and screen customization.In the next article we will look into the search data screen.

Thanks for reading the article.Happy lightning with LightSwitch.