Dependencies

JSON Schema provides support for dependencies as a means for describing dependencies between fields. Using dependencies, you can establish that property2 should be supplied when property1 is supplied.

Alpaca supports both JSON Schema v3 and v4 syntax for declaring dependencies. We recommend using JSON Schema v4 syntax.

In JSON Schema v4, a single dependencies block within the container object stores key/values which consist of the ID of the property (key) and an array of property IDs that must be in provided in order to be shown (value).

Here is an example with two properties (a and b). Property B should only be shown when Property A has been supplied.

    ...,
    "properties": {
        "a": {
            "type": "string"
        },
        "b": {
            "type": "string"
        }
    },
    "dependencies": {
        "b": ["a"]
    }

In JSON Schema v3, each property has it's own dependencies array. This simply identifies the sibling properties that must be included for this property to be shown. Here is the same example with this legacy V3 structure.

    ...,
    "properties": {
        "a": {
            "type": "string"
        },
        "b": {
            "type": "string",
            "dependencies": ["a"]
        }
    }

All of the examples below use the V4 syntax. We recommend this for everything that you do!

If you're interested in more powerful dependency management, take a look at Conditional Dependencies which offer an Alpaca extension on top of JSON schema to give you a bit more power.

And finally, if you really need to take full control, Alpaca offers programmatic ways to manage your dependencies. Please take a look at Observables for examples of tying field state together to make you forms more dynamic.

A Really Simple Case

This example shows how to set up a single dependent field. The icecream field only renders when the user specifies that they are a lover of ice cream.

This also wraps a form. When you hit submit, the JSON is printed for you.

{% raw %} {% endraw %}

Layered Dependencies

This example introduces a second dependency. If the user specifies the flavour of ice cream they prefer, they are then additionally asked for the kind of topping they would prefer. This demonstrates chained-dependencies. By unselecting the first check box, all downstream dependent fields are hidden and removed.

{% raw %} {% endraw %}

An Example of V3 syntax

Here is an example using the V3 syntax. It's provided here for legacy purposes.

{% raw %} {% endraw %}