Use the Document UI SDK
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 and import
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
The FrameViewer object
Use the FrameViewer
object of terminusdb-documents-ui
to configure and display your forms. FrameViewer
supports several parameters and functions.
FrameViewer parameters
Parameter | Description |
| The JSON frame structure of a TerminusDB schema. |
| Form modes - |
| The data entered into or provided for a form. Specify |
| document type of interest to be displayed in form. |
| language code parameters to support a wide variety of languages in UI as defined in schema |
FrameViewer functions
Function | Description |
| A customizable JavaScrpt (JS) callback function to process data submitted via a form. |
| JS callback function to retrieve the selected values from a |
| Return the ID of a document on a click event. Useful for binding an |
FrameViewer Mandatory props
props | Mandatory |
---|---|
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 {} |
FrameViewer common usage
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.
Get schema frame data from a database
A basic example below to get started with a TerminusDB JavaScript client.
FrameViewer usage step-by-step
Use three simple steps - input, configure, and output:
Step 2. Configure properties and functions
Step 1. Create frame data
For simplicity, all examples use the frames
definition below consisting of one document Person
.
Step 2. Configure properties and functions
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.
Step 3. Generate the form
Generate the form using the properties and functions defined in the previous step.
FrameViewer modes
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.
Last updated