Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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.
Click here to find out how to get started with the Document UI SDK
Take a look at the Document UI SDK Playground to view the <FrameViewier/>
demo in Create, Edit, or View mode.
The table below lists the basic data types supported and their specifications.
If a property in the Form is displayed with a (Required) tab, that means the property is mandatory & has to be filled in order to submit the form. To define a property as optional, use the "@type": "Optional"
declaration meaning the property is optional.
A property can also be defined as an array in the following ways -
"@type": "Set"
- property can hold multiple values in an unordered fashion & can be optional
"@type": "List"
- property can hold multiple values in an ordered fashion & requires at least one entry
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"
Link properties enable links to other document or subdocument classes and are displayed as Select
components.
The example below demonstrates:
The property work_as
linked to document class Job
The property lives_in
linked to a subdocument class Address
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, one or multiple items.
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.
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.
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"
.)
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"
This example shows how <FrameViewier/>
appears for a document Guy
with choice document fields in Create/ Edit or View mode.
In this example Guy
has a mandatory property called favorite_group
with the choice of documents called Art, Dance or Music, an optional "second_favorite_group"
property also with the choice Art, Dance or Music, a set member_of
property with the same choices, and a list attends_group_in_order
property with the above same choices, in an ordered fashion.
Take a look at the Demo Playground to view <FrameViewier/>
with Choice properties in Create, edit or view mode.
The below Frames show the definition of Art, Dance or Music which are other document classes.
The below Frame consists of the Guy
document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document called Student
with choice subdocument fields in Create/ Edit or View mode.
Student
has a mandatory favorite_subject
property with the choices of Zoology, Botony or Maths, an optional "second_favorite_subject"
property with the same document choices, a set studied
property with the above choices, and a list study_time_table
property with the same choices in an ordered fashion.
The below Frames show the definition of Zoology, Botony or Maths which are subdocuments.
The frame below consists of a Student
document -
Note - make sure the document is filled in View mode. The form will be in read only mode for View.
Take a look at the to view <FrameViewier/>
with Choice subdocuments in Create, edit or view mode.
This example shows how <FrameViewier/>
appears for a document called Graduate
with a one of field in Create/ Edit and View mode. The value of the @oneOf field is a set, so can be any number of documents all of which have mutually disjointed properties, but which can coexist.
In this example Graduate
has a property scored
that points to Grades
. Grades
is defined as @oneOf that is an array of documents which can take any choice within. In this example, Grades
can take any choice from grade
, marks
or report
.
Take a look at the Demo Playground to view the <FrameViewier/>
with the OneOfs properties in Create, Edit and View mode.
This frame consists of a Graduate document -
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document OrderByExample
in Create/ Edit and View mode.
The Frame below to shows @metadata
with an order_by
tag which tells <FrameViewier/>
to order fields according to the order_by
array. Note there is a @metadata
tag in the SubBody
class definition which also tells <FrameViewier/>
to order the subdocument's internal fields in the order included in the @metadata
order_by
array.
Take a look at the Demo Playground to view <FrameViewier/>
with properties where order_by is defined in the @metadata
tag - in Create, Edit and view mode.
This frame consists of an OrderByExample
document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document Person_Optional
with optional fields in Create/ Edit and View mode.
Take a look at the Demo Playground to view <FrameViewier/>
with Optional properties in Create, Edit and View mode.
This frame consists of a Person
document
Note - make sure to provide document values for View mode. The form will be in read-only mode for View.
This example shows how <FrameViewier/>
appears for a document metaDataExample
with the fields body
& title
in Create/ Edit or View mode. The Frame below shows @metadata
with the render_as
tag included that tells <FrameViewier/>
to render field body
as Markdown.
This frame consists of an metaDataExample
document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document ComputerStudent
with sys:JSON field in Create/ Edit or View mode.
ComputerStudent
has a required mandatory field likes
and a set field stores_as
.
This frame consists of an ComputerStudent document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
Take a look at the to view <FrameViewier/>
with properties where render_as is defined in @metadata tag - in Create, Edit or View mode.
Take a look at the to view <FrameViewier/>
with sys:JSON properties in Create, Edit or View mode.
This example shows how <FrameViewier/>
appears for a document called OrderedPerson
with list fields in Create/ Edit and View mode. If a field is described as a List it means the field can have one or more values and is ordered. The field must have at least one entry.
Take a look at the Demo Playground to view the <FrameViewier/>
with list properties in Create, Edit and View mode.
The below frame consists of an OrderedPerson
document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document called Person
with mandatory fields in Create/ Edit and View mode. A required tag will appear against every mandatory field.
Take a look at the Demo Playground to view the <FrameViewier/>
with mandatory properties in Create, Edit and View mode.
The below frame consists of a Person
document with mandatory fields -
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
This example shows how <FrameViewier/>
appears for a document ArrayExamplePerson
with array fields in Create/ Edit or View mode. If a field is described as an array it means the field can have more than one value to it in an ordered fashion. The field can also be considered as an optional field meaning it can be empty or filled.
Take a look at the Demo to view <FrameViewier/>
with Array properties in Create, edit or view mode.
The below frame consists of an ArrayExamplePerson document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
Understand how <FrameViewer/> can load geoJSON to display geographic data structures in Create, Edit or View Mode
Click here Playground to view <FrameViewier/>
demo in Create, edit or view mode.
Below is the schema for loading geoJSON into a TerminusDB data product.
The equivalent geoJSON frame that can be retrieved from getSchemaFrame()
call
Take a look at the Demo Playground to view <FrameViewier/>
with geoJSON data.
This example shows how to load a FeartureCollection
into <FrameViewier/>
.
Note: In View mode we display the map view of geoJSONs using react-leaflets under the hood.
Create UIs directly from TerminusDB's schema
Use the TerminusDB documents User Interface (UI) utility terminusdb-documents-ui
to automatically generate user interfaces for the document definitions in your TerminusDB schema. The utility takes frames as input and outputs forms in HTML format. A frame is the JSON structure of a JSON document, including the document's inherited properties and IRIs.
Install the utility from npm
:
Import the FrameViewer
component into your code:
Import the FrameViewer
css into your code:
For dark mode include the below css
light mode
Use the FrameViewer
object of terminusdb-documents-ui
to configure and display your forms. FrameViewer
supports several parameters and functions.
FrameViewer parameters
FrameViewer functions
FrameViewer Mandatory props
A common use of terminusdb-documents-ui
is as follows:
Set up a Webpack.
Use the TerminusDB JavaScript client.
Use the client function getSchemaFrame
to retrieve frame data from a TerminusDB database.
Set custom values and behaviour for FrameViewer
parameters and functions as required.
Call FrameViewer
to display frame data in the specified form.
A basic example below to get started with a TerminusDB JavaScript client.
Use three simple steps - input, configure, and output:
Step 2. Configure properties and functions
For simplicity, all examples use the frames
definition below consisting of one document Person
.
The example below generates an empty frame for the attributes of the Person
document. The callback function handleSubmit
displays any user-entered form data. Add functionality to handleSubmit
to suit your requirements.
Generate the form using the properties and functions defined in the previous step.
The FrameViewer
object supports three modes:
Create
Edit
View
Create mode
The Create
mode displays an empty frame as demonstrated in the previous example.
Edit mode
The Edit
mode displays populated and empty frames. This mode requires the formData
parameter.
View Mode
The View
mode displays populated frames for view-only - the Submit button is automatically hidden. If the formData
parameter is omitted, an empty form is displayed.
This example shows how <FrameViewier/>
appears for a document UnorderedPerson
with set fields in Create/ Edit or View mode. If a field is described as a Set it means the field can have more than one value to it in any unordered fashion. The field can also be considered optional, meaning it can be empty.
This frame consists of an UnorderedPerson
document
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
props | Mandatory |
---|---|
Take a look at the to view <FrameViewier/>
with set properties in Create, Edit or View mode.
Parameter
Description
frame
The JSON frame structure of a TerminusDB schema.
mode
Form modes - Create
, Edit
, or View
.
formData
The data entered into or provided for a form. Specify formData
in Edit
and View
modes to display data.
type
document type of interest to be displayed in form.
language
language code parameters to support a wide variety of languages in UI as defined in schema
Function
Description
onSubmit
A customizable JavaScrpt (JS) callback function to process data submitted via a form.
onSelect
JS callback function to retrieve the selected values from a Select
component.
onTraverse
Return the ID of a document on a click event. Useful for binding an onClick
event with a document.
frame
true
type
true
mode
true
formData
formData has to be mandatory in Edit or View mode. If nothing to display then pass empty json {}