How to Show, Add or Edit Screen With Default Values in LightSwitch HTML Client

Whenever we develop an application, we intend to make the application user friendly. Yes, in LightSwitch HTML Client applications, when showing a new screen for data entry, we can fill it with default values.

We will explain this with a new project.

Setup the Project

Fire up Visual Studio 2012 and create a new HTML Client project. We will start with the new Table called Student.



Creating Table

Create three fields Name, School and Place.



Make all the fields mandatory (required) as shown above.

Add BrowseStudent Screen



Add a screen to display all the students.



Name the Screen BrowseStudent as shown above.

Add Command Button



Now we need to add a button in the Command Bar, to pop-up a screen to add the new Student.



Since we are going to populate the screen fields with default values, we will create our own action. We will create our own method as shown in the preceding figure.

Create a new Add/Edit Screen to be displayed with default values when the user hits the Add Student Command button on the command bar.



Now, a dialog box will pop-up. Select the Add/Edit Details Screen template from the left panel and name the screen as shown above. Ensure that you have unchecked the Student Details [1] checkbox as shown.



So we are ready with the screens, select the AddStudent method and edit the execute function. As shown above, we will show the AddEditStudent screen using myapp.showAddEditStudent().

The showAddEditStudent function

The showAddEditStudent function is generated automatically by the LightSwitch core framework on the fly in the viewmodel.js file.



In the options parameter of the showScreen function, we have the beforeShown property as a function, that will be executed before the screen is shown.

myapp.BrowseStudent.AddStudent_execute = function (screen) {
    myapp.showAddEditStudent(null, {
        beforeShown: function (addNewScreen) {
            var newStudent = new myapp.Student();
            newStudent.Name = 'Default Name';
            newStudent.School = 'Default School';
            newStudent.Place = 'Default Place';
             // Set Student
            addNewScreen.Student = newStudent;
        }
    });
};

 

In the beforeShown function, we are setting the default values of the new screen’s Student object.

This is how we can set the default values for the new screen.

Output



Happy Coding