How to filter Auto Complete Box in the Modal Window in Microsoft Ligthswitch?

Filter Auto Complete Box  using other screen property is easy in Microsoft Lightswitch provided that you are just doing at the Screen/Client level.

The steps in filtering Auto Complete Box using other screen property are as follows:

  1. Add a query to which your property will display as a list.
  2. Provide a parameter to that query and hook it up to the other screen property.
  3. Edit the Auto Complete Box by modifying the Choices property.

1. Add a query to which your property will display as a list.

In our example I added a query “EmployeeSet” in my “CustomerSetListDetail”.  Just click the “Add Data Item” to a a query in the screen.

2. Provide a parameter to that query and hook it up to the other screen property.

So I went to query design of the EmployeeSet and added a RegionId Parameter to filter of the query.  Then in the second Image I hooked up the RegiodId to the CustomerSet Property.  Now EmployeeSet query will be filtered based on the region of the customer.

3. Edit the Auto Complete Box by modifying the Choices property.

Now click on the Employee Auto Complete box and modify the Choices property to point to the query.

Thats it, but wait, there was a question from a another developer: http://lightswitchhelpwebsite.com/Forum/tabid/63/aft/813/Default.aspx#1887

Every time he adds an employee there is a default modal to which he will encode the employee.  This modal is ligthswitch generated, of course the employee in this modal is not filtered base on the screen that we just created.  The solution is the following:

  1. Create a modal window base on the CustomerEmployeeMapping property.
  2. Filter the employee Auto Complete Box in this modal property
  3. Add modal buttons, e.g., Save Modal, Close Modal, etc.
  4. Override the “+” button to open the newly created modal and add a new record.

1. Create a modal window base on the CustomerEmployeeMapping property.

To create a modal window all you need is to add a Local Property to an entity (first image) then drag the property to the screen hierarchy and convert the control to Modal Window (second image).

2. Filter the employee Auto Complete Box in this modal property

This similar to what we did in Item No. 3 above when we change the Choice property of the employee field property.

3. Add modal buttons, e.g., Save Modal, Close Modal, etc.

I added three buttons Save, Cancel and Add.  Actual you don’t need to use add unless you modify the “+” to the Add button.  In our example we just override it.

4. Override the “+” button to open the newly created modal and add a new record.

Sorry about the C# code, I have no choice, the sample application is written in C# which you can download it here.  The first method is the override method and the remaining methods are the cancel button and the save button execute methods.

        partial void CustomerEmployeeMappingCollectionAddAndEditNew_Execute()
        {
            if (CustomerSet.SelectedItem != null)
            {
                CustomerEmployeeMappingProperty = new CustomerEmployeeMapping();
                CustomerEmployeeMappingProperty.Customer = this.CustomerSet.SelectedItem;
                this.OpenModalWindow("CustomerEmployeeMappingProperty");
            }
        }

        partial void ModalCancel_Execute()
        {
            if (CustomerEmployeeMappingProperty.Id == 0)
            {
                CustomerEmployeeMappingProperty.Delete();
            }
            this.CloseModalWindow("CustomerEmployeeMappingProperty");
        }

        partial void ModalSave_Execute()
        {
            this.Save();
            this.CloseModalWindow("CustomerEmployeeMappingProperty");
        }

Whoa! so long, but we covered a lot, Auto Complete Box filter, Client vs. Server filter, and modal screen.

If you find this blog helpful, you can make the donation by clicking the Paypal button below.

Advertisements
About

Software developer living in the Philippines.

Posted in Lightswitch
3 comments on “How to filter Auto Complete Box in the Modal Window in Microsoft Ligthswitch?
  1. Tengo un problema en los autoCompleteBox, hice dos, que cada que se despliega la informacion de “Empresa” sale la “Sucursal” de dicha empresa, pero cuando lleno todos los datos me aparece como si no hubiera llenado nada y me salen errores de validacion aqui está la imagen que explica mejor http://i.imgur.com/gO3Rs2x.png, como podría solucionar este problema?, te agradecería mucho si me pudieras ayudar, muchas gracias

    Translated:

    I have a problem in the AutoCompleteBox, I made two, each which displays the information of “Company” comes the “Branch” of the company, but when I fill all the data appears as if I had not filled anything and I get validation errors here is the image that best explains http://i.imgur.com/gO3Rs2x.png, as could solve this problem?, I would greatly appreciate if you could help me, thank you very much

    • hgminerva says:

      I never had a problem with bounded auto complete box. First you make sure that the source of your auto complete box is related to the property being encoded. Then in my screen I added related query and filtered it base on the parent field, e.g., company, in the property. Then lastly, I change the Choices property of the auto complete box being filtered with the newly added query.

      • Thanks a lot Minerva 🙂 , i finally finish with that problem, this is my solution: http://puu.sh/2Zxcv.txt im just needed to add in the InitializeDataWorkspace of that Screen this:

        DetalleOrdenCompraProperty.Empresa = this.Empresas.SelectedItem;
        DetalleOrdenCompraProperty.Sucursal = this.Sucursales.SelectedItem;

        And thats it 🙂 , thank you so much

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Author

Harold Glenn P. Minerva
Software Developer / Tech Enthusiast
Living in the Philippines

View Harold Glenn Minerva's profile on LinkedIn

Instagram

Software Engineer - Seasonal and Range Trading Software. Magenta Trader is a powerful stock market visualization software that increases your probability of trading success.

Software Architect and Founder - Easyfis.com is a multi-tenant cloud-based Software-as-a-Service (SaaS) business app that caters to micro, small and medium trading businesses.

CTO and Co-Founder - We give your company the leverage by providing innovative software solutions products such as Point-of-Sales (POS), Financial Information System (FMIS), Payroll and DTR (HRIS), and many more.

%d bloggers like this: