Create custom search screen in Lightswitch Application


Introduction

As you know, Visual Studio LightSwitch is a Microsoft Technology. It is used for build business applications. There are many screen available in LightSwitch like a Details screen, Editable grid screen, List and details screen, New data screen, Search  data screen. If you want to create a custom screen in the LightSwitch Application, it is possible. In this article you learn how to create a custom search screen and use of a button in LightSwitch application.

Step by step solution

Step 1: Open Visual Studio LightSwitch 2011->File->Project.

image1.gif

Step 2: Select LightSwitch Application in C#->Write name of the application->Ok.

image2.gif

Step 3: Select Create new table.

image3.gif

Step 4: Make the table like as student.

table.gif

Step 5: Right click on student table->Change query name (student search)->Add filter (where gender is parameter)->Save.

image4.gif

Step 6: Add screen->Search data screen->Select screen data (student search)->Ok.

image5.gif

Step 7: Now go to student gender property->Click choice list->Fill value and display name->Ok.

image6.gif

Step 8: Run application->Design screen->Command Bar (select AddAndEditNew)->Save.

image7.gif

Step 9: Click + sign then fill data. Now you can search student using by gender property.

image8.gif

Step 10: Stop debugging->Add new property in student table is Birthdate->Save->Add screen->Editable grid screen->Select screen data (student)->Run application->Fill Birthdate in the table.

image9.gif

Step 11: Open StudentSearch->Add filter (where Birthdate  >= and <= is parameter)->Change parameter name (BirthdateStart and Birthdate End)->Check optional property->Save.

image10.gif

Step 12: Open StudentSearch screen->Move BirthdateStart and BirthdateEnd from the left side to below the Student Gender.

image11.gif

Step 13: Run application->Now you can search student using by Birthdate and Gender property.

image12.gif

Step 14: If you add button for searching in our application then you can add.

Open StudentSearch screen->Right click on Birthdate->Add Button->Write name of the Button (Search)->Ok->Again add new Button->Write name of Button(ClearFilter)->Ok.

image13.gif

Step 15: Right click on Search Button and ClearFilter Button->Edit execute code->Now write the below code.

image14.gif

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 SearchStudentSearch
    {
        partial void Search_Execute()
        {
            this.StudentSearch.Load();
        }
        partial void ClearFilter_Execute()

        {
            this.StudentGender = " ";
            this.StudentSearch.Load();
        }
    }
}

Step 16: Now you can use Search button for searching student.

image15.gif

Step 17: You can use ClearFilter button for clear the searching.

image16.gif

Summary:

As you know there are many screen in the LightSwitch Application. If you can create custom screen in LightSwitch Application then this article is very useful for that purpose.

Up Next
    Ebook Download
    View all
    Learn
    View all