Skip to content

Field Types

Overview

The field types are types of fields which we can define on json definition:

In three of them should be specified RelationshipFieldTypes, read more about here.

Usage

See below examples of how to use the fields and properties:

SingleDropDown

{
      "key": "test_id",
      "label": "Test",
      "placeholder": "Select value...",
      "description": "SingleDropdown required",
      "type": "SingleDropDown",
      "typeOptions": {
        "label": "name"
      },
      "validateRules": {
        "required": false
      },
      "relationshipOptions": {
        "ref": "test_location",
        "many": false
      }

Checkbox

{
  "key": "is_tested",
  "label": "Tested",
  "type": "Checkbox",
  "validateRules": {
    "required": true
  }
}

DateField

The typeOptions allows to include the time. In the typeOptions can be configure to includes the time.

{
  "key": "date_field",
  "label": "Date field",
  "placeholder": "Select Date...",
  "description": "Date field required without time",
  "type": "DateField",
  "validateRules": {
    "required": true
  },
  "typeOptions": {
    "time": false
  }
}

FileField

In the typeOptions can be configure which file format are accepted. isPublic property specify if the file is in the private or public mode.

{
  "key": "file_field",
  "label": "File field",
  "type": "FileField",
  "description": "File field with all formats required",
  "typeOptions": {
    "accept": "image/jpeg, image/png, image/gif, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "isPublic": true
  },
  "validateRules": {
    "required": true
  }
}

Grid

The allowCreate specify if it will be allow to create a record directly from the grid. The gridSettings is used to define which columns should be displayed in the grid and the relationshipField should be the key of the related entity that was specified in the relationshipOptions.

{
  "key": "assessments",
  "label": "Assessments",
  "description": "Student assessments",
  "type": "Grid",
  "typeOptions": {
    "relationshipField": "test_student_id",
    "allowCreate": true,
    "gridSettings": {
      "agGrid": {
        "columnDefs": [
          {
            "headerName": "Assessment",
            "field": "name",
            "sortable": true
          }
        ]
      }
    }
  },
  "validateRules": {
    "required": false
  },
  "relationshipOptions": {
    "ref": "test_student_assessment",
    "many": false
  }
}

MapLocation

{
  "key": "gps_location",
  "label": "GPS Location",
  "type": "MapLocation",
  "validateRules": {
    "required": false,
    "pattern": "^(-?\\d+(\\.\\d+)?),\\w*(-?\\d+(\\.\\d+)?)$"
  }
}

MultiDropDown

The value is required in the property typeOptions.

{
  "key": "multidropdown_field_id",
  "label": "Multidropdown",
  "placeholder": "Select value...",
  "description": "Multidropdwon required",
  "type": "MultiDropDown",
  "typeOptions": {
    "value": "id",
    "label": "name"
  },
  "validateRules": {
    "required": false
  },
  "relationshipOptions": {
    "ref": "test_student",
    "many": true
  }
}

NumericField

{
  "key": "numeric_field",
  "label": "Numeric Field",
  "type": "NumericField",
  "description": "Numeric TextField required",
  "validateRules": {
    "required": false,
    "min": 0,
    "max": 10
  },
  "typeOptions": {
    "precision": 2
  }
}

MonacoEditorField

The typeOptions language is required and accepts: json, handlebars, text and css.

{
  "key": "json_field",
  "label": "Json field",
  "type": "MonacoEditorField",
  "description": "Json editor field required",
  "typeOptions": {
    "language": "json"
  },
  "validateRules": {
    "required": true
  }
}

HtmlField

{
  "key": "html_field",
  "label": "Html field",
  "type": "HTMLField",
  "description": "Html field required",
  "validateRules": {
    "required": true
  }
}

OptionSet

The property values is required and must be configured with the possible values.

{
  "key": "option_set",
  "label": "Option Set",
  "type": "OptionSet",
  "typeOptions": {
    "values": ["value1", "value2", "value3", "value4", "value5"]
  },
  "validateRules": {
    "required": true
  }
}

CustomUIComponent

The component property is required and must be a valid name of the file inside the folder client/UIComponent .

{
  "key": "test",
  "label": "Counter",
  "type": "CustomUIComponent",
  "typeOptions": {
    "component": "Counter"
  },
  "validateRules": {
    "required": false
  }
}

PrivilegiesMatrix

The possible scope values are app and entity.

{
  "key": "app_privilegies",
  "label": "App Privilegies",
  "type": "PrivilegiesMatrix",
  "validateRules": {
    "required": false
  },
  "typeOptions": {
    "scope": "app"
  }
}

ColorPickerField

{
  "key": "color_picker_field",
  "label": "Color Picker Field",
  "type": "ColorPickerField",
  "validateRules": {
    "required": true
  }
}

Configuration

validateRules

  • required: indicates if the field is required
  • maxLength: set the max length allowed for the field
  • minLength: set the min length allowed for the field
  • max: set the max value allowed for the field
  • min: set the min value allowed for the field
  • pattern: can be configured a Regex expression to be validated

behaviourOptions

  • readOnly: read only behaviour option
  • hidden: hidden behavior option
  • displayAsDefaultFilter: default display filter behaviour option