Search code examples
google-app-maker

google appmaker filter dropdown


I just started with Google AppMaker and I'm having some trouble understanding how the query builder works.

Here is my scenario:

I have three data sources:

  1. Customer:
    • Name
  2. Project
    • Name
    • Customer
  3. Milestone
    • Name
    • Customer
    • Project

Now, I have set up relationships between these models, so that: One Project has one Customer (but one Customer can have many Projects) One Milestone has one Project and one Customer

Now, when creating a Milestone I want the user to first select a Customer and then, when they select a Project, I want the dropdown for the Project to only show Projects belonging to the Customer.

My current approach is as follows: I have created a page called "MilestonePage" that has the Milestone data model set. That page contains a table (non-editable) and a (create) form. The form has two drop downs (Customer, Project) and one text field (Name). My thinking is that the dropdown for Project needs to have its options modified so that the list of available Projects is filtered by the selected Customer. I have looked at the documentation but honestly I can't find a proper explanation of how to use the editor. I have also looked at the Projects Tracker and Project List examples but neither has the configuration I need. My best guess was setting the options to something like:

@datasources.Project.query.filters.Customer._equals

or somehow make use of the relationship by using something like:

@datasources.Project.relations.Customer.item.Project

Needless to say, none of these worked. The last one always gives me the Projects assigned to the first Customer in the table and I have no idea why...

I am willing to use other controls and / or scripts to achieve this but it feels like the solution should be simpler.

Any help would be greatly appreciated.


Solution

  • Based on your problem description, this is what I've done:

    First, I have set up the models as follows:

    1. Customer:

      • Name
    2. Project:

      • Name
    3. Milestone:

      • Name


    Second, I establish the relations as follows:

    1. Customer

      • (customer) ONE to MANY (milestone)

      • (customer) ONE to MANY (project)

    2. Milestone

      • (milestone) MANY to ONE (customer)

      • (milestone) MANY to ONE (project)

    3. Project

      • (project) MANY to ONE (customer)

      • (project) ONE to MANY (milestone)


    Third, I created a page, "milestonePage", that has the Milestone data model set. Inside that page, I inserted a table, and an insert form. The page looks like this:

    enter image description here

    From here, the only thing left to do is to make sure that the bindings of the Customer dropdown and the Project dropdown are correct. By default, the Customer dropdown should have the following bindings:

    • Options: @datasources.customer.items

    • Value: @datasource.item.customer

    Finally, the tricky one is the Project dropdown. Since you want to display the projects that belong to the selected customer, then you have to do this:

    1. Delete the bindings for the Options and Value
    2. Make sure the new bindings are as follows:

      • Options: @widget.parent.descendants.Field2.value.project (where Field2 is the Customer dropdwon)

      • Value: @datasource.item.project

    BONUS: To avoid any confusion, add this to the onValueChange handler of the customer dropdown widget.parent.descendants.Field3.value = null; (where Field3 is the Project dropdown.)

    P.S. Pay attention to what Markus Malessa mentioned, about setting up the prefetches since it will be necessary.