Documents UI SDK Customization
Details for customizing your user interfaces using the Document UI SDK
Customize the look and feel of your forms with styles, widgets, and additional information.
Use the
uiFrames parameter of the FrameViewer component to customize the look and feel of your forms. uiFrames supports two types of customizable properties:- Property
classNamesapplicable to forms and fields. - Properties prefixed
ui:applicable to fields only.
Use the
classNames property to apply CSS or react bootstrap styles to your entire form or fields of a document.The example below specifies the background color of the form using the
className styles bg-dark p-5, and applies the style text-green to the name field of the Person document. Where a document property is not specified, the style is applied to the entire form. Note the style bg-dark is a React bootstrap class name.let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string"
}
}
// uiFrames configuration here
let uiFrames = {
classNames: "bg-dark p-5",
name: {
classNames: "text-green"
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame= {frames}
uiFrame= {uiFrames} // uiFrames parameter here
type= {type}
mode= {mode}/>
Screen-print/s of the output:
The
uiFrames parameter supports several customizable properties and widgets prefixed ui: and ui:widget respectively.Summary of
ui: prefixed properties.Property | Description | Example |
description | Add a field description. | name: { "ui:description": "A person's first name" } |
placeholder | Add instructions in a field. | name: { "ui:placeholder": "Please enter your name" } |
order | Specify the order in which fields are rendered. | "ui:order": ["name", "DOB", "email"] or "ui:order": ["name", "*"] to ensure "name" is rendered first. |
Summary of
ui:widget prefixed properties.Property | Description | Example |
hidden | Hide a field. | name: { "ui:widget": 'hidden' } |
radio | Create a Yes (true) or No (false) radio button for a boolean field. | subscribe: { "ui:widget": 'radio' } |
select | Create a Yes (true) or No (false) select/dropdown list for a boolean field. | subscribe: { "ui:widget": 'select' } |
textarea | Create a text area for multiline input. | bio: { "ui:widget": 'textarea' } |
password | Create obfuscated password entry. | password: { "ui:widget": 'password' } |
color | Create a color picker. | color: { "ui:widget": 'color' } |
By default, a field of data type
boolean is rendered as a checkbox.let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string",
"email": "xsd:string",
"password": "xsd:string",
"color": "xsd:string",
"notes": "xsd:string",
"subscribe": "xsd:boolean",
"created": "xsd:dateTime",
"modified": "xsd:dateTime",
}
}
let uiFrames = {
created: {
"ui:widget": 'hidden'
},
modified: {
"ui:widget": 'hidden'
},
name: {
classNames: "text-green",
"ui:placeholder": "Enter your name..."
},
email: {
classNames: "text-green",
"ui:description": "Your email is securely stored and will not be not be shared",
"ui:placeholder": "Enter your email address..."
},
password: {
"ui:widget": 'password',
"ui:description": "Your password must be at least eight characters",
"ui:placeholder": "Enter your password..."
},
color: {
"ui:widget": 'color',
"ui:description": "Choose a color for your account"
},
notes: {
classNames: "text-green",
"ui:widget": 'textarea',
"ui:placeholder": "Enter a brief description of your role..."
},
subscribe: {
"ui:widget": 'radio',
"ui:description": "Would you like to subscribe to our newsletter?"
},
"ui:order": ["name", "email", "password", "*"]
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame = {frames}
uiFrame = {uiFrames}
type = {type}
mode = {mode}/>
Screen-print/s of the output:
Apply widgets to sets and lists. The example below hides the set
nickName.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 uiFrames = {
nickName: {
"ui:widget": 'hidden'
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame= {frames}
uiFrame= {uiFrames}
type= {type}
mode= {mode}/>
Develop react functions to create custom widgets.
let frames = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "@context"
},
"Person": {
"@key": {
"@type": "Random"
},
"@type": "Class",
"name": "xsd:string"
}
}
// React function to create a custom widget
function renderNameField(props) {
return <Card bg = "success">
<Alert>{"`${props.id}` is a custom field ..."}</Alert>
</Card>
}
let uiFrames = {
name: {
"ui:widget": renderNameField
}
}
let type = "Person"
let mode = "Create"
return <FrameViewer
frame= {frames}
uiFrame= {uiFrames}
type= {type}
mode= {mode}/>
Screen-print/s of the output:
Last modified 5mo ago