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" } ] } ] } } ] }
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"
}
]
}
]
}
}
] }
As of the nature of PacemFormField
elements, dependencies from other fields could affect them in terms of (de)activation and visibility.
PacemChildFormElement
s 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"
}
]
}
]
}
}
] }
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.