gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

Help, new to Alpaca #694

Open dzg opened 5 years ago

dzg commented 5 years ago

I have all my data in an object (see below.) I want 3 dropdown fields, and each dropdown should populate with options based on the selection of the previous one.

For example:

data = {
  "campaign1": {
    "name": "Campaign 1",
    "projects": {
      "job A": [
        "proj 1"
      ],
      "job B": [
        "proj 2",
        "proj 3"
      ]
    }
  },
  "campaign2": {
    "name": "Campaign 2",
    "projects": {
      "job C": [
        "proj 4",
        "proj 5",
        "proj 6"
      ],
      "job D": [
        "proj 7",
        "proj 8",
        "proj 9"
      ]
    }
  }
}

The idea is that first you choose a "Campaign", then the 2nd dropdown shows the "Jobs" for that campaign, then the 3rd shows the "Projects" for that job.

What kind of fields/relationships do I need here? Do I need to write a function for the 2nd and 3rd fields? How do I 'get' the choice from another field before submission?

I looked at the optiontree field type but that doesn't seem to do what I want (in that I'm not assigning 'attributes' to a 'value') although the rendered version behaves the way I want.

I would like to use my data object as is, although I can re-structure it if necessary.

Basically I want something like the driver choose on nvidia ... https://www.nvidia.com/download/index.aspx First pick a type, then a series based on the type, etc...

Thanks!

seseso commented 5 years ago

You should have a look at dependencies / conditional dependencies on the documentation pages: http://alpacajs.org/docs/api/dependencies.html http://alpacajs.org/docs/api/conditional-dependencies.html