Json Schema Usage on Custom Forms

Basics

This help page defines, how Json Schema is integrated to our form system.

Current implementation handles most of the json schema definition. We also include some additional style definition for “input masks” and ordering. To go over from an example, here is how our default form is defined as a custom schema:

{
   "title": "Thanks for contacting us! Please provide us your name, phone number, and email address, and we will connect you immediately.",
   "description": "",
   "type": "object",
   "x-order": [
      "contact",
      "contactInfo",
      "reason" 
    ],
    "required": [
       "reason",
       "contact",
       "contactInfo" 
    ],
    "properties": {
       "contact": {
          "type": "string",
          "title": "Name",
          "maxLength": 20,
       },
       "contactInfo": {
          "type": "string",
          "title": "Contact Info (Phone/Email)",
          "maxLength": 60,
       },
       "reason": {
          "type": "string",
          "title": "Call Reason",
          "maxLength": 40,
       }
   }
}

The above definition creates 3 fields: Name, Phone/Email and Reason.

Basically as Json Schema dictates, we define the fields in the properties section and set some fields as mandatory in the required section. Keys are only important to define required options and order apart from that, title field is used for each property. Global title and description can be defined too and are shown on the top of the form section.

The above fields are all text inputs. You also have the ability to get a dropdown. To define one, please use it in the following form:

{
   /* Rest of the form */
   "properties": {
      "modelInfo": {
         "type": "string",
         "title": "Interested Car Brand",
         "enum": [
            "Brand 1",
            "Brand 2",
            "Brand 3",
            "Brand 4" 
         ]
      },
   }
}

enum field is the defining factor where. It limits the number of options can be entered in the field and creates a dropdown in the UI where user can select one of them.

Customizations

Additions to the default schema are following:

x-order: It defines the order of fields to show in the UI. It’s defined as a global field (as a sibling of title, description or properties)
x-mask: Defines a “mask” to the input field and enforces that format on the field. It’s defined per property (as a sibling to enum, maxLength or title)
x-placeholder: Defines a placeholder text to show on inside the field. It’s defined per property (as a sibling to enum, maxLength or title).
x-ringer-fields: Defines fields to send during ringing notification to you. Fields defined in this section will be shown on your ringing screen. However this field is only meaningful for the questionnaire form schema.

A more complex example with the additions is like this:

{
   "title": "Thanks for contacting us! Please provide us your name, phone number, and email address, and we will connect you immediately.",
   "description": "",
   "type": "object",
   /* Based on this field, we show nameAndSurname first, then phoneNumber second and finally modelInfo */
   "x-order": [
      "nameAndSurname",
      "phoneNumber",
      "modelInfo" 
   ],
   "x-notification-fields": [
      "nameAndSurname",
      "modelInfo" 
   ],
   "required": [
      "nameAndSurname",
      "phoneNumber" 
   ],
   "properties": {
      "nameAndSurname": {
         "type": "string",
         "title": "Name and Surname",
         "maxLength": 60,
      },
      "phoneNumber": {
         "type": "string",
         "title": "Phone Number",
         /* Pattern defines in what format the input field should be. It's used in validation */
         "pattern": "\\(5[0-9]{2}\\)\\ [0-9]{3}\\ [0-9]{4}",
         /* Mask defines will enforce what will be written in the input. It's helpful when a pattern is defined. This mask requires an input to be like: (501) 111 1111 */
         /* Each element in the array represents a character. If you want to use a regex then you need to define it as an array as well (array in array)*/
         "x-mask": ["(", ["\\d"], ["\\d"], ["\\d"], ")", " ", ["\\d"], ["\\d"], ["\\d"], " ", ["\\d"], ["\\d"], ["\\d"], ["\\d"]],
         /* Placeholder is shown, when nothing is entered on the input field */
         "x-placeholder": "(5XX) XXX XXXX" 
      },
      "modelInfo": {
         "type": "string",
         "title": "Interested Brand",
         /* User will pick from a dropdown, the brand s/he is interested */
         "enum": [
            "Brand 1",
            "Brand 2",
            "Brand 3",
         ]
      },
   }
 }
© Copyright 2020 · 11Sight
San Francisco Bay Area, CA | +1 (615) 422-5511