Page Comparison

This page lists all the React json-schema components that can be used to create Forms and their compatibility within the PEP Health solution.

...

Component

Description/Notes

Compatible?

Rendering Information

Github:

Status

colour	Purple
title	SIMPLE

Schema

“default“:”value”

Set a default value to a question

Yes
No
Partially

“required“:[]

Force user to give an answer to a question

Yes
No
Partially

“type“:”integer”

Should accept integer value only

Yes
No
Partially

"minLength": 3

Set a minimum length of character to an answer to a question

Yes
No
Partially

uiSchema

"ui:autofocus": true

Upon opening of the form the cursor should be on the answer field automatically

Yes
No
Partially

"ui:placeholder":”hint text on the field”

a background text on the field

Yes
No
Partially

"ui:emptyValue": ""

should accept empty answer even if the question is required

Yes
No
Partially

"ui:autocomplete":”variable-name”

Would provide a list of answer if you have entered a similar answer before to other forms

Yes
No
Partially

"ui:widget":"updown"

Provide an up-down button if the required answer is a number or integer

Yes
No
Partially

"ui:title": "Age of person"

Override the “title“ provided in the Schema

Yes
No
Partially

"ui:description": "(earth year)"

override or set a description under the “question”

Yes
No
Partially

"ui:widget": "password"

the answer is hidden by converting each character as a bullet or asterisk

Yes
No
Partially

"ui:widget": "textarea"

provide a bigger text field
Will work if the ui:option rows is declared:

Code Block
"textarea": { "ui:widget": "textarea", "ui:options": { "rows": 5 } }

Yes
No
Partially

Github:

Status

colour	Purple
title	widgets

Schema

"type": "string",
"format": "email"

Answer should be in email format

Yes
No
Partially

"type": "string",
"format": "uri"

Answer should be in url format

Yes
No
Partially

"type": "boolean"

Yes
No
Partially

"readOnly": true

makes the answer field read-only, default answer can be selected

Yes
No
Partially

"enum": [
"foo",
"bar"
]

Select options (dropdown by default)

Yes
No
Partially

"enum": [
"foo",
"bar"
],
"enumNames": [
"Select this for foo",
"Select this for bar"
]

Select options (dropdown by default) with custom displayed title for each option but the resulting value is the “enum”

Yes
No
Partially

"oneOf": [
{
"const": "foo",
"title": "Select this for FOO"
},
{
"const": "bar",
"title": "Select this for BAR"
}

Select options (dropdown by default) with custom displayed title for each option but the resulting value is the “const”

Similar to “enum“ + “enumNames“

Yes
No
Partially

uiSchema

"ui:widget": "radio"

Schema

Code Block
"default": { "type": "boolean", "title": "checkbox (default)", "description": "This is the checkbox-description" }

the description is rendered twice.

Yes
No
Partially

"ui:widget": "select"

Yes
No
Partially

"ui:widget": "textarea",
"ui:options": {"rows": 5}

Yes
No
Partially

"ui:placeholder": "This is a placeholder"

Yes
No
Partially

"ui:widget": "color"

Yes
No
Partially

"ui:widget": "hidden"

the question should not be shown in the form

Yes
No
Partially

"ui:disabled": true

makes the answer field disabled and default answer cannot be selected or highlighted

Yes
No
Partially

"ui:readonly": true

the answer field can be selected and highlighted for copying, but it cannot be edited.

Yes
No
Partially

"ui:options": {"backgroundColor": "yellow"}

the answer field should have a background color, in this case, yellow

Yes
No
Partially

Github:

Status

colour	Purple
title	references

Schema

Definition:

Code Block
"node": { "type": "object", "properties": { "name": { "type": "string" }, "children": { "type": "array", "items": { "$ref": "#/definitions/node" } } } }

Schema:

Code Block
"tree": { "title": "Recursive references", "$ref": "#/definitions/node" }

recursive referencing

incorrect rendering of buttons, too small to notice.

Yes
No
Partially

uiSchema

"ui:order": [
"shipping_address",
"billing_address",
"tree"
]

re-arrange sequence using ui:order

Yes
No
Partially

Github:

Status

colour	Purple
title	date & time

Schema

Code Block
"datetime": { "type": "string", "format": "date-time" }

Yes
No
Partially

Code Block
"datetime": { "type": "string", "format": "date" }

Yes
No
Partially

Code Block
"time": { "type": "string", "format": "time" }

Yes
No
Partially

uiSchema

Code Block
"alt-datetime": { "ui:widget": "alt-datetime", "ui:options": { "yearsRange": [ 1980, 2030 ] } }

alt-datetime

placeholder for each field is not rendered

Yes
No
Partially

Code Block
"alt-date": { "ui:widget": "alt-date", "ui:options": { "yearsRange": [ 1980, 2030 ] } }

alt-date

placeholder for each field is not rendered

Yes
No
Partially

Github:

Status

colour	Purple
title	if then else

Schema

Code Block

{
  "type": "object",
  "properties": {
    "animal": {
      "enum": [
        "Cat",
        "Fish"
      ]
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Cat"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "meat",
              "grass",
              "fish"
            ]
          }
        },
        "required": [
          "food"
        ]
      }
    },
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Fish"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "insect",
              "worms"
            ]
          },
          "water": {
            "type": "string",
            "enum": [
              "lake",
              "sea"
            ]
          }
        },
        "required": [
          "food",
          "water"
        ]
      }
    },
    {
      "required": [
        "animal"
      ]
    }
  ]
}

additional follow-up questions not rendered, or questions that will appear depending on the answer on the previous question

Yes
No
Partially

...

Versions Compared

Old Version 6

New Version Current

Key