Nested Entities

Common use-case (or requested feature) relevant to the increasingly popular NoSQL documents/entities and to their front-end UI, is the contextual editing of non-trivial sub-entities either in single instance mode or in a set of instances.
That is a scenario tailored for the PacemChildFormElement.

Here's a child-set of instances example:

[ { "prop": "name" }, { "prop": "children", "display": { "cssClass": ["childform-ordered"] }, "type": "array", "validators": [ { "type": "required", "errorMessage": "required" } ], "props": { "display": { "cssClass": ["pacem-grid", "grid-novgap", "grid-tiny-colgap", "grid-nospace"] }, "props": [ { "prop": "name", "display": { "cssClass": ["pacem-cell", "cols-lg-6"] }, "validators": [ { "type": "required", "errorMessage": "required" } ] }, { "prop": "bornWhen", "type": "byte", "display": { "cssClass": ["pacem-cell", "cols-lg-6"] , "name": "born when (age)" } }] } } ]

Here's a single child-instance example:

{ "display": { "cssClass": [ "pacem-grid", "grid-novgap", "grid-tiny-colgap", "grid-nospace" ] }, "props": [ { "prop": "name", "display": { "cssClass": [ "pacem-cell", "cols-lg-6" ] } }, { "prop": "surname", "display": { "cssClass": [ "pacem-cell", "cols-lg-6" ] } }, { "prop": "address", "display": { "cssClass": [ "pacem-cell", "cols-12" ] }, "type": "object", "props": { "display": { "cssClass": [ "pacem-grid", "grid-novgap", "grid-tiny-colgap", "grid-nospace" ] }, "props": [ { "prop": "street", "display": { "cssClass": [ "pacem-cell", "cols-lg-8" ] }, "validators": [ { "type": "required", "errorMessage": "required" } ] }, { "prop": "zip", "display": { "cssClass": [ "pacem-cell", "cols-lg-4" ] } }, { "prop": "city", "display": { "cssClass": [ "pacem-cell" ] }, "validators": [ { "type": "required", "errorMessage": "required" } ] } ] } } ] }

PropertyChange Propagation

Parent form changes can be useful to be listened at child-form-level.
In an autogenerated-form scenario, it is possible to exploit dependsOn field to serve this purpose.

{ "display": { "cssClass": [ "pacem-grid", "grid-novgap", "grid-tiny-colgap", "grid-nospace", "form-minimal" ] }, "props": [ { "prop": "master", "display": { "ui": "oneToMany", "cssClass": [ "pacem-cell" ] }, "extra": { "source": ["Emperor", "Tyrannus", "Patrician"], "dependsOn": [{"prop": "top"}] } }, { "prop": "slaves", "display": { "cssClass": [ "pacem-cell" ] }, "type": "array",

  "extra": { "dependsOn": [{ "prop": "master" }] },



  "props": {
    "display": { "cssClass": [ "pacem-grid", "grid-novgap", "grid-tiny-colgap", "grid-nospace", "childform-full", "form-minimal" ] },
    "props": [
      {
        "prop": "master",
        "display": { "cssClass": [ "pacem-cell", "cols-lg-4" ] },
        "isReadOnly": true
      },
      {
        "prop": "name",
        "display": { "cssClass": [ "pacem-cell", "cols-lg-8" ] },
        "validators": [
          {
            "type": "required",
            "errorMessage": "required"
          }
        ]
      }
    ]
  }
}

] }

Conditional ChildForms

As of the nature of PacemFormField elements, dependencies from other fields could affect them in terms of (de)activation and visibility.

PacemChildFormElements currently make exception in managing the dependency side-effects, so please use other strategies.

In the following example, see how you need to satisfy all the branched forms to have your main one validated:

{ "display": { "cssClass": [ "pacem-grid", "grid-nogap", "form-minimal" ] }, "props": [ { "prop": "switcher", "type": "string", "display": { "ui": "oneToMany", "cssClass": [ "pacem-cell" ], "name": "Provider", "watermark": "pick one..." }, "extra": { "source": [ { "text": "A must be provided", "value": "A" }, { "text": "B must be also provided", "value": "B" } ], "valueProperty": "value", "textProperty": "text" }, "validators": [ { "type": "required", "errorMessage": "Campo obbligatorio" } ] }, { "prop": "childEntity", "type": "object", "isComplexType": true, "display": { "cssClass": [ "pacem-cell" ], "name": "Child Entity A" }, "extra": { "dependsOn": [ { "prop": "switcher", "value": "A", "hide": true } ], "lockItems": true }, "props": { "display": { "cssClass": [ "pacem-grid", "grid-nospace", "grid-nogap", "form-minimal" ] }, "props": [ { "prop": "A", "display": { "cssClass": [ "pacem-cell" ], "name": "Entity 'A'" }, "validators": [ { "type": "required", "errorMessage": "A is a required field"

          }
        ]
      }
    ]
  }
},
{
  "prop": "childEntity",
  "type": "object",
  "isComplexType": true,
  "display": {
    "cssClass": [ "pacem-cell" ],
    "name": "Child Entity B"
  },
  "extra": {
    "dependsOn": [
      {
        "prop": "switcher",
        "value": "B",
        "hide": true
      }
    ],
    "lockItems": true
  },
  "props": {
    "display": { "cssClass": [ "pacem-grid", "grid-nospace", "grid-nogap", "form-minimal" ] },
    "props": [
      {
        "prop": "B",
        "display": {
          "cssClass": [ "pacem-cell" ],
          "name": "Entity 'B'"
        },
        "validators": [
          {
            "type": "required",
            "errorMessage": "B is a required field"

          }
        ]
      }
    ]
  }
}

] }