Search code examples
jsonreactjsreact-jsonschema-forms

I need to have some fields in ui-schema which do not exist in schema section

I used to use jsonform in my project but now I migrate to react, So I use this library (react-jsonschema-form). in jsonform I can have some fieldsets in form section that weren't in schema. like this : 

{
  "schema":
    {
      "firstName": {
      "type": "string",
      "title": "Is JSON Form useful?",
      }
    },
  "form": [
     {
      "key": "firstName",
      "type": "text",
     }, 
     {
      "title" : "this is non-schema",
      "type": "fieldset"
     }
   ]
}

you can test it at jsonschema playground. please help me to do something like above code in react-jsonschema-form. how can I have some fields that aren't in schema but I want to show them in uiSchema?

react-jsonschema-form has a playground too. You can find a field named 'date'. It adds in uiSchema but it doesn't exist in schema section. Also nothing shows for this field in the result. I don't know why they use it if it couldn't be there!!!!

thanks.

Solution

  • The date is just an example for uiSchema, and the playground just don't use it this time.And there I create an example to help understanding.

    JSONSchema

    {
  "title": "An example form",
  "description": "A simple form example",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    },
    "date": {
      "type": "string",
      "title": "Date"
    }
  }
}

    UISchema

    {
  "firstName": {
    "ui:autofocus": true,
    "ui:emptyValue": ""
  },
  "age": {
    "ui:widget": "updown",
    "ui:title": "Age of person",
    "ui:description": "(earthian year)"
  },
  "date": {
    "ui:widget": "alt-datetime"
  },
  "telephone": {
    "ui:options": {
      "inputType": "tel"
    }
  }
}

    There are four in properties in JSONSchema:firstName, age, telephone, date.And four in UISchema: firstName, age, telephone, date.They are the same.Each one in JSONSchema has one or less in UISchema.The type in JSONSchema like string, has a few sub-options in string like "updown". We set it in ui:ui:widget(UISchema).And here is my result.The bottom element is the date you mentioned. enter image description here