Use the search while selecting items in Detail Picker controls in Lightswitch htmlclient

Model Picker functionality use in Lightswitch htmlclient.

I am working in a Lightswitch htmclient and thinking that can we apply the search while we are trying to select a value in dropdown (Detail picker). I am searching on internet and finally I got the solution of this problem. Now I am  going to explain how you can use this. 

You have a table Order having columns Name and Customer like below.

Now create an AddEdit Order screen using this table and create a button as shown below. 

 

Do some kind of coding on the behind of executing method of this button, which will Selecting Customer screen and pass the Order entity as a parameter.

myapp.AddEditOrder.SelectCustomer_execute = function (screen) {

    myapp.showSelectOrderCustomerScreen(screen.Order);

};

  

Create a screen for selecting the customer, edit the query as per your search requirement and it must have order property which is a parametrized. Write some code on the Screen.created event for this screen.

myapp.SelectOrderCustomerScreen.created = function (screen) {

    var customersVC = screen.Customers,

        order = screen.Order;

    if (order) {

        // When the Customers Visual Collection selected item is changed,

        // update the order's Customer and commit the changes, navigating back.

        customersVC.addChangeListener("selectedItem", function () {

            order.Customer = customersVC.selectedItem;

            myapp.commitChanges();

        });

    }

};

Before applying the filter.

After applying the filters

After Selecting the customer you will see the the selected Customer will be selected as on the AddEdit Order Screen. The changed value is highlighted in the below screenshot.

You can download the sample of the code from here.

Sample donwload