loading... Pacem JS

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" ] }, "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" ] },
    "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"
          }
        ]
      }
    ]
  }
}

] }