4.3.2 List of React json-schema components to create Forms
This page lists all the React json-schema components that can be used to create Forms and their compatibility within the FPA solution.
Component | Description/Notes | Compatible? | Rendering Information |
|---|---|---|---|
Github: 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 "textarea": {
"ui:widget": "textarea",
"ui:options": {
"rows": 5
}
} | Yes No Partially |  GitHub/Mozilla rendering
FPA solution rendering |
Github: widgets | |||
Schema | |||
"type": "string", | Answer should be in email format | Yes No Partially |
|
"type": "string", | Answer should be in url format | Yes No Partially |
|
"type": "boolean" |
| Yes No Partially |
|
| makes the answer field read-only, default answer can be selected | Yes No Partially |
|
"enum": [ | Select options (dropdown by default) | Yes No Partially |
|
"enum": [ | Select options (dropdown by default) with custom displayed title for each option but the resulting value is the “enum” | Yes No Partially |
|
"oneOf": [ | 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 "default": {
"type": "boolean",
"title": "checkbox (default)",
"description": "This is the checkbox-description"
}the description is rendered twice. | Yes No Partially | FPA solution rendering
|
"ui:widget": "select" |
| Yes No Partially |
|
"ui:widget": "textarea", |
| 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: references | |||
Schema | |||
Definition: "node": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"children": {
"type": "array",
"items": {
"$ref": "#/definitions/node"
}
}
}
}Schema: "tree": {
"title": "Recursive references",
"$ref": "#/definitions/node"
} | recursive referencing incorrect rendering of buttons, too small to notice. | Yes No Partially | GitHub/Mozilla rendering
FPA solution rendering |
uiSchema | |||
"ui:order": [ | re-arrange sequence using ui:order | Yes No Partially |
|
Github: date & time | |||
Schema | |||
"datetime": {
"type": "string",
"format": "date-time"
}
|
| Yes No Partially |
|
"datetime": {
"type": "string",
"format": "date"
} |
| Yes No Partially |
|
"time": {
"type": "string",
"format": "time"
} |
| Yes No Partially | GitHub rendering
FPA solution rendering |
uiSchema | |||
"alt-datetime": {
"ui:widget": "alt-datetime",
"ui:options": {
"yearsRange": [
1980,
2030
]
}
} | alt-datetime placeholder for each field is not rendered | Yes No Partially | GitHub/Mozilla rendering
FPA solution rendering |
"alt-date": {
"ui:widget": "alt-date",
"ui:options": {
"yearsRange": [
1980,
2030
]
}
} | alt-date placeholder for each field is not rendered | Yes No Partially | GitHub/Mozilla rendering
FPA solution rendering
|
Github: if then else | |||
Schema | |||
{
"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 |
|