This is the second part of the 11 series LightSwitch tutorial . In this part we will learn about how to work with the New Data Entry Screen for inserting records to the database in LightSwitch.
Table of Content
- Aim of the article
- Steps to create New Data Entry Screen
- Customizing the Screen
- Working with Computed Column
- Creating Custom Validation
- Adding a Image Field
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
- Part 1: Introduction to Light Switch
- Part 2: Rapport with New Data Screen
- Part 3: Rapport with Search Data Screen
- Part 4: Rapport with Editable Grid Screen
- Part 5: Rapport with List and Details Screen
- Part 6: Rapport with Details Screen
- Part 7: Rapport with External Data Source – Database
- Part 8: Rapport with External Data Source – WCF RIA Service
- Part 9:Using a custom control in LightSwitch
- Part 10: Publish LightSwitch Application as Desktop application and host in local system
- Part 11: Publish LightSwitch Application as Web application
The article assumes that, we have LightSwitch 2011 installed in our system
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
- We cannot use any reserve keyword in the Name field as shown below
- 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
- 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.
- 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.
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
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
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.
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]*$");
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
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
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.