Documents UI SDK Data Types
Understand the different data types to build data driven user interfaces
The TerminusDB documents User Interface generates forms representing the properties or fields of document/s in your schema. For data entry, each field is one of several data types and is mandatory by default. Schema definitions enable the linking of documents and the specification of sets.
The table below lists the basic data types supported and their specifications.
Data type | Declaration | Example |
Boolean | "xsd:boolean" | "active": "xsd:boolean" |
Decimal | "xsd:decimal" | "age": "xsd:decimal" |
Enum | "@type: "Enum" | "@values": ["red", "blue", "yellow", "green"] |
Integer | "xsd:integer" | "age": "xsd:integer" |
Decimal | "xsd:decimal" | "age": "xsd:decimal" |
String | "xsd:string" | "name": "xsd:string" |
Temporal | "xsd:dateTime" | "DOB": "xsd:dateTime" |
Form values are mandatory by default and corresponding field names are rendered with an asterisk. To define a property as optional, use the
"@type": "Optional" declaration.Enum
The
"Enum" data type in the example below specifies the colors a person likes - "@id": "Colors, "Person", "likes". This is rendered as a dropdown menu with the colors specified in the "@values" list.Optional
The
"age" of a "Person" is declared "Optional"let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"DOB": "xsd:dateTime",
"active": "xsd:boolean",
"age": {
"@class": "xsd:decimal",
"@type": "Optional"
},
"name": "xsd:string",
"likes": {
"@id": "Colors",
"@type": "Enum",
"@values": [
"red",
"blue",
"yellow",
"green"
]
}
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Link properties enable links to other document or subdocument classes and are displayed as a
Select components.The example below demonstrates:
- The property
work_aslinked to document classJob - The property
lives_inlinked to a subdocument classAddress
let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"works_as": "Job", // Link to subdocument Job
"lives_in": "Address" // Link to subdocument Address
},
"Job": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"title": "xsd:string"
},
"Address": {
"@key": {
"@type": "Random"
},
"@subdocument": [],
"@type": "Class",
"Address Line 1": "xsd:string",
"Code": "xsd:decimal",
"Country": "xsd:string"
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
A set specifies an unordered set of values of a class or data type.
In the example below, the document
Person consists of several nicknames - property "nickName" of "@type": "Set". A set consists of zero or multiple items.let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string",
"nickName": {
"@class": "xsd:string",
"@type": "Set"
}
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
Click
+Add nickName to add a set of nickName properties.
Populate multiple
nickNamefields.
In the example below, a
Person has a property works_as defined as a set that links to the document Job, representing a person with multiple jobs.let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string",
"works_as": {
"@class": "Job",
"@type": "Set"
}
},
"Job": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"title": "xsd:string"
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
Populate multiple
Jobs as shown below
In the example below, a
Person has a property lived defined as a set that links to the subdocument Address, representing a person's address history.let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string",
"lived": {
"@class": {
"@class": "Address",
"@subdocument": []
},
"@type": "Set"
}
},
"Address": {
"@key": {
"@type": "Random"
},
"@subdocument": [],
"@type": "Class",
"Address Line 1": "xsd:string",
"Code": "xsd:decimal",
"Country": "xsd:string"
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
Click the
lived card to expand the subdocument.
Fill in the fields for the subdocument.
A list specifies an ordered collection of values of a class or data type. An ordered collection means values are displayed in the order they are entered in the form.
In the example below, a
Person has two properties ordered_property (a string data type) and has_task (a subdocument of type "List".)let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"ordered_property": {
"@class": "xsd:string",
"@type": "List"
},
"has_task": {
"@class": "Tasks",
"@type": "List"
}
},
"Tasks": {
"@key": {
"@type": "Random"
},
"@subdocument": [],
"@type": "Class",
"Address Line 1": "xsd:string",
"Code": "xsd:decimal",
"Country": "xsd:string"
}
}
let type = "Person"
let mode = "Create"
// call FrameViewer
return <FrameViewer
frame = {frames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
The form contains arrows to order entered values.
In
View mode the form is displayed in the order it was created.
Last modified 5mo ago