{"id":32122,"date":"2016-02-04T12:52:28","date_gmt":"2016-02-04T07:22:28","guid":{"rendered":"https:\/\/tothenewco.pro\/blog\/?p=32122"},"modified":"2016-02-08T15:33:28","modified_gmt":"2016-02-08T10:03:28","slug":"creating-derived-fields-in-json-schema-version-draft-04","status":"publish","type":"post","link":"https:\/\/tothenewco.pro\/blog\/creating-derived-fields-in-json-schema-version-draft-04\/","title":{"rendered":"Creating derived fields in json schema (version \u2013 draft -04)"},"content":{"rendered":"

Sometimes we need dynamic forms where some field’s visibility\/values are dependent on values of other fields. Json schema<\/a> provides a good option for creating dynamic forms but has very little documentation.<\/p>\n

Json schema provides fairly coarse grained mechanism for conveying what elements needs to be present. Using anyOf condition, a property can be validated by a set of criteria that may include criteria that can match multiple times.<\/p>\n

Using same you can create fields that are dependent on options you select.Let us take example to understand it.<\/p>\n

[code]
\n{
\n\t"title": "Creating conditional fields",
\n\t"readOnly": false,
\n\t"$schema": "http:\/\/json-schema.org\/draft-04\/hyper-schema",
\n\t"description": "Creating conditional fields",
\n\t"properties": {
\n\t\t"form": {
\n\t\t\t"title": "Form",
\n\t\t\t"properties": {
\n\t\t\t\t"field": {
\n\t\t\t\t\t"title": "Select for field?",
\n\t\t\t\t\t"readOnly": false,
\n\t\t\t\t\t"options": {
\n\t\t\t\t\t\t"hidden": false
\n\t\t\t\t\t},
\n\t\t\t\t\t"strictProperties": true,<\/p>\n

\t\t\t\t\t"entity": "field",
\n\t\t\t\t\t"propertyOrder": 1,
\n\t\t\t\t\t"type": "object",
\n\t\t\t\t\t"oneOf": [{
\n\t\t\t\t\t\t"title": "Please Select",
\n\t\t\t\t\t\t"properties": {<\/p>\n

\t\t\t\t\t\t},
\n\t\t\t\t\t\t"additionalProperties": false
\n\t\t\t\t\t}, {
\n\t\t\t\t\t\t"title": "Yes",
\n\t\t\t\t\t\t"properties": {
\n\t\t\t\t\t\t\t"dependent": {
\n\t\t\t\t\t\t\t\t"title": "Dependent Field",
\n\t\t\t\t\t\t\t\t"readOnly": false,
\n\t\t\t\t\t\t\t\t"strictProperties": true,
\n\t\t\t\t\t\t\t\t"description": "",
\n\t\t\t\t\t\t\t\t"propertyOrder": 1,
\n\t\t\t\t\t\t\t\t"type": "string",
\n\t\t\t\t\t\t\t\t"options": {
\n\t\t\t\t\t\t\t\t\t"hidden": false
\n\t\t\t\t\t\t\t\t}
\n\t\t\t\t\t\t\t}
\n\t\t\t\t\t\t},
\n\t\t\t\t\t\t"additionalProperties": false,
\n\t\t\t\t\t\t"required": ["dependent"]
\n\t\t\t\t\t}, {
\n\t\t\t\t\t\t"title": "No",
\n\t\t\t\t\t\t"properties": {<\/p>\n

\t\t\t\t\t\t},
\n\t\t\t\t\t\t"additionalProperties": false
\n\t\t\t\t\t}]
\n\t\t\t\t}
\n\t\t\t},
\n\t\t\t"propertyOrder": 1,
\n\t\t\t"type": "object",
\n\t\t\t"required": ["field"]
\n\t\t}
\n\t},
\n\t"type": "object"
\n}
\n[\/code]<\/p>\n

In above code we have form as main object, which contains one field object. Using anyOf we have created three sets of field. Those sets are identified as options will be displayed as titles. On the basis of what option\/set you select dependent fields will be displayed.<\/p>\n

Like if you select No :<\/p>\n

\"No\"<\/p>\n

Here no field is displayed as set is empty for No.<\/p>\n

In case of Yes :<\/p>\n

\"Yes\"<\/p>\n

Here you can see the dependent field is displayed as set for Yes contains it.<\/p>\n

The same way you can create multiple sets fields that are dependent on different options.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes we need dynamic forms where some field’s visibility\/values are dependent on values of other fields. Json schema provides a good option for creating dynamic forms but has very little documentation. Json schema provides fairly coarse grained mechanism for conveying what elements needs to be present. Using anyOf condition, a property can be validated by […]<\/p>\n","protected":false},"author":226,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":12,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32122","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t