Skip to content

Commit 8306953

Browse files
KittyJoseOJ423
KittyJose
and
OJ423
authored
doc ui update (#211)
* doc ui update * Create README.md * Update summary with UI SDK pages.md * Delete README.md Didn't need the read me - already had landing page text. * Update array.md Fixed typo and added Javascript syntax to code snippets * Update choiceDocument.md Fixed types and added JS syntax to code snippets * Update choiceSubDocument.md Fixed typos and added javascript syntax to code snippets * Update documents-user-interface-data-types.md Fixed typos * Update list.md Fixed typos and added js syntax for code snippets * Update mandatory.md Fixed typos and added js syntax in code snippets * Update oneOf.md Fixed typos and added js syntax to code snippets * Update optional.md Fixed typos and added js syntax to code snippets * Update order_by.md Fixed typo and included js syntax to code snippets * Update render_as.md Fixed typos and added js syntax to code snippets * Update set.md Fixed typos and added js code snippets * Update sysJSON.md Fixed typos and included js syntax for code snippets * Update documents-user-interface-geoJSON.md Updated typos and added code syntax * Update array.md * Update choiceDocument.md * Update list.md * Update mandatory.md * Update oneOf.md * Update optional.md * Update order_by.md * Update render_as.md * Create README.md * Create DocumentClassesSummary.md * Create DocumentsGraphqlTable.md * Create EditDocumentComponent.md * Rename guides/reference-guides/document-ui-templates/DocumentClassesSummary.md to guides/reference-guides/document-ui-templates/components/DocumentClassesSummary.md * Rename guides/reference-guides/document-ui-templates/DocumentsGraphqlTable.md to guides/reference-guides/document-ui-templates/components/DocumentsGraphqlTable.md * Rename guides/reference-guides/document-ui-templates/EditDocumentComponent.md to guides/reference-guides/document-ui-templates/components/EditDocumentComponent.md * Create ListDocumentsComponent.md * Create NewDocumentComponent.md * Create ViewDocumentComponent.md * Create useTDBDocuments.md * Create useTDBGraphqlQuery.md * Create tdb-react-table.md * Create README.md * Update summary with doc ui templates.md * Update summary - Moved Doc UI templates.md * Update documents-user-interface-geoJSON.md * adding those playgroiund links --------- Co-authored-by: Oliver <88653154+OJ423@users.noreply.github.com>
1 parent b848a37 commit 8306953

26 files changed

+3158
-104
lines changed

document-ui-sdk/use-the-document-ui-sdk/README.md renamed to document-ui-sdk/README.md

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Create UIs directly from TerminusDB's schema
44

55
# Use the Document UI SDK
66

7-
Use the TerminusDB documents User Interface (UI) utility `terminusdb-documents-ui` to automatically generate customizable 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.
7+
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.
88

99
### Install and import
1010

@@ -20,30 +20,48 @@ Import the `FrameViewer` component into your code:
2020
import {FrameViewer} from '@terminusdb/terminusdb-documents-ui'
2121
```
2222

23+
Import the `FrameViewer` css into your code:
24+
25+
For dark mode include the below css
26+
```
27+
import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
28+
```
29+
light mode
30+
```
31+
import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'
32+
```
33+
2334
### The FrameViewer object
2435

25-
Use the `FrameViewer` object of `terminusdb-documents-ui` to configure, customize, and display your forms. `FrameViewer` supports several parameters and functions.
36+
Use the `FrameViewer` object of `terminusdb-documents-ui` to configure and display your forms. `FrameViewer` supports several parameters and functions.
2637

2738
#### FrameViewer parameters
2839

2940
| **Parameter** | **Description** |
3041
| ------------- | ------------------------------------------------------------------------------------------------------------ |
3142
| `frame` | The JSON frame structure of a TerminusDB schema. |
32-
| `uiFrame` | JSON UI properties to customize the appearance of a form. |
33-
| `type` | The document type definition in your schema to display the form for. |
3443
| `mode` | Form modes - `Create`, `Edit`, or `View`. |
3544
| `formData` | The data entered into or provided for a form. Specify `formData` in `Edit` and `View` modes to display data. |
36-
| `hideSubmit` | Hide the `Submit` button to show view-only data. |
45+
| `type` | document type of interest to be displayed in form. |
46+
|`language` | language code parameters to support a wide variety of languages in UI as defined in schema |
47+
3748

3849
#### FrameViewer functions
3950

4051
| **Function** | **Description** |
4152
| --------------- | ---------------------------------------------------------------------------------------------------- |
42-
| `onSubmit` | A customizable JavaScrpt (JS) callback function to process data submitted via a form. |
43-
| `onChange` | A customizable JS callback function to process data when form data is changed. |
53+
| `onSubmit` | A customizable JavaScrpt (JS) callback function to process data submitted via a form. | |
4454
| `onSelect` | JS callback function to retrieve the selected values from a `Select` component. |
4555
| `onTraverse` | Return the ID of a document on a click event. Useful for binding an `onClick` event with a document. |
46-
| `FieldTemplate` | Customize the appearance of a form. |
56+
57+
58+
#### FrameViewer Mandatory props
59+
| props |Mandatory |
60+
|-- |--|
61+
|frame |true |
62+
|type |true |
63+
|mode |true |
64+
|formData |formData has to be mandatory in Edit or View mode. If nothing to display then pass empty json {}|
4765

4866
### FrameViewer common usage
4967

@@ -61,7 +79,7 @@ A basic example below to get started with a TerminusDB JavaScript client.
6179

6280
```javascript
6381
const TerminusDBClient = require("@terminusdb/terminusdb-client");
64-
82+
import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
6583
import {FrameViewer} from '@terminusdb/terminusdb-documents-ui'
6684

6785
try {
@@ -113,17 +131,9 @@ let type = "Person"
113131

114132
#### Step 2. Configure properties and functions
115133

116-
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. The `uiFrames` parameter in the example adds customizations for your forms. See Customize the looks and feel of frames for details.
134+
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.
117135

118136
```javascript
119-
// Create a place holder for the "Person" "name" property.
120-
121-
let uiFrames = {
122-
"name" : {
123-
"placeholder": "Please enter a name ..."
124-
}
125-
}
126-
127137
// Mode "Create" displays an empty frame.
128138

129139
let mode = "Create"
@@ -144,17 +154,11 @@ Generate the form using the properties and functions defined in the previous ste
144154

145155
return <FrameViewer
146156
frame = {frames}
147-
uiFrame = {uiFrames}
148157
type = {type}
149-
onSelect = {handleSelect}
150158
mode = {mode}
151159
onSubmit = {handleSubmit}/>
152160
```
153161

154-
**Screen-print/s of the output:**
155-
156-
![](../../.gitbook/assets/documents-ui-get-started-01.PNG)
157-
158162
### FrameViewer modes
159163

160164
The `FrameViewer` object supports three modes:
@@ -199,16 +203,11 @@ function handleSubmit(data) {
199203
return <FrameViewer
200204
frame = {frames}
201205
type = {type}
202-
onSelect = {handleSelect}
203206
mode = {mode}
204207
formData = {formData}
205208
onSubmit = {handleSubmit}/>
206209
```
207210

208-
**Screen-print/s of the output:**
209-
210-
![](<../../.gitbook/assets/documents-ui-get-started-02 (2).PNG>)
211-
212211
#### View Mode
213212

214213
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.
@@ -241,24 +240,17 @@ function handleSubmit(data) {
241240
return <FrameViewer
242241
frame = {frames}
243242
type = {type}
244-
onSelect = {handleSelect}
245243
mode = {mode}
246244
formData = {formData}
247245
onSubmit = {handleSubmit}/>
248246
```
249247

250-
**Screen-print/s of the output:**
251-
252-
![](<../../.gitbook/assets/documents-ui-get-started-03 (1).PNG>)
253-
254248
### Further Reading
255249

256250
The Document UI SDK reference guide:
257251

258252
[**Documents UI SDK data types**](documents-user-interface-data-types.md).
259253

260-
[**Documents UI SDK customization**](documents-user-interface-customization.md)**.**
261-
262-
[**Documents UI SDK Geographic Maps**](documents-user-interface-geographic-maps.md)**.**
254+
****[**Documents UI SDK Geographic Maps**](documents-user-interface-geoJSON.md)**.**
263255

264-
[**TerminusDB JavaScript client reference guide**](../../guides/reference-guides/javascript-client-reference/woqlclient.md)**.**
256+
****[**TerminusDB JavaScript client reference guide**](../../guides/reference-guides/javascript-client-reference/woqlclient.md)**.**

‎document-ui-sdk/ui-data-types/array.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
# Array
2+
This example shows how ``<FrameViewier/>`` apepars for a document ``ArrayExamplePerson`` with array fields
3+
in Create/ Edit or View mode. If a field is described as array it means the field can have more than one
4+
value to it in an ordered fashion. The field can also be considered as an optional field meaning it can be empty or filled.
5+
6+
## Demo
7+
Take a look at the **[**Demo**](https://documents-ui-playground.terminusdb.com/Array)** to view ``<FrameViewier/>`` with Array properties in Create, edit or view mode.
8+
9+
10+
## Frame
11+
The below frame consists of an ArrayExamplePerson document
12+
```javascript
13+
let frame = {
14+
"@context": {
15+
"@base": "terminusdb:///data/",
16+
"@schema": "terminusdb:///schema#",
17+
"@type": "Context",
18+
"xsd": "http://www.w3.org/2001/XMLSchema#"
19+
},
20+
"Address": {
21+
"@documentation": [
22+
{
23+
"@comment": "An Address",
24+
"@label": "Address",
25+
"@language": "en",
26+
"@properties": {
27+
"AddressLine1": {
28+
"@comment": "Address Line one",
29+
"@label": "Address Line 1"
30+
},
31+
"Country": {
32+
"@comment": "A Country ",
33+
"@label": "Country"
34+
},
35+
"postalCode": {
36+
"@comment": "A valid Postal Code",
37+
"@label": "Zip Code"
38+
}
39+
}
40+
},
41+
{
42+
"@comment": "მისამართი",
43+
"@label": "მისამართი",
44+
"@language": "ka",
45+
"@properties": {
46+
"AddressLine1": {
47+
"@comment": "მისამართის ხაზი პირველი",
48+
"@label": "მისამართის ხაზი 1"
49+
},
50+
"Country": {
51+
"@comment": "Ქვეყანა",
52+
"@label": "ქვეყანა"
53+
},
54+
"postalCode": {
55+
"@comment": "მოქმედი საფოსტო კოდი",
56+
"@label": "Ზიპ კოდი"
57+
}
58+
}
59+
}
60+
],
61+
"@key": {
62+
"@type": "Random"
63+
},
64+
"@subdocument": [],
65+
"@type": "Class",
66+
"AddressLine1": "xsd:string",
67+
"City": {
68+
"@class": "xsd:string",
69+
"@type": "Optional"
70+
},
71+
"Country": "xsd:string",
72+
"postalCode": "xsd:string"
73+
},
74+
"ArrayExamplePerson": {
75+
"@key": {
76+
"@type": "Random"
77+
},
78+
"@type": "Class",
79+
"hangs_out_at": {
80+
"@class": {
81+
"@class": "Address",
82+
"@subdocument": []
83+
},
84+
"@type": "List"
85+
},
86+
"likes_color": {
87+
"@class": {
88+
"@id": "Colors",
89+
"@type": "Enum",
90+
"@values": [
91+
"Red",
92+
"Blue",
93+
"Yellow",
94+
"Green"
95+
]
96+
},
97+
"@type": "List"
98+
},
99+
"to_do": {
100+
"@class": "xsd:string",
101+
"@type": "List"
102+
}
103+
}
104+
}
105+
```
106+
107+
108+
### Create
109+
110+
```javascript
111+
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
112+
113+
return <FrameViewer
114+
frame={frame} // above defined frame
115+
formData={{}} // formData will be empty
116+
mode={"Create"} // mode
117+
type={"ArrayExamplePerson"}/> // type of document
118+
```
119+
120+
### Edit & View
121+
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
122+
123+
```javascript
124+
let data = {
125+
"@id": "ArrayExamplePerson/c92d269b0dce719299bf86fc19f2065937ec4ef82d8a2a53702867a326d6144b",
126+
"@type": "OrderedPerson",
127+
"hangs_out_at" : [
128+
{
129+
"@id": "ArrayExamplePerson/3ca7d7a9c64ca2bc8319d83bca14b71697528ebb8536024e3e1795cbd049acdf/lived_at/Address/4f4fdae34ab4fa3b6297750917503a7137f75dc11589792de707e7a6d3502db3",
130+
"@type": "Address",
131+
"AddressLine1": "anywhere",
132+
"City": "Nice",
133+
"Country": "France",
134+
"postalCode": "FR27836"
135+
},
136+
{
137+
"@id": "ArrayExamplePerson/3ca7d7a9c64ca2bc8319d83bca14b71697528ebb8536024e3e1795cbd049acdf/lived_at/Address/7aaeeb6b983710a0adbc75de8f7d8104278df427124beadc6644b35b9d6c30af",
138+
"@type": "Address",
139+
"AddressLine1": "somewhere",
140+
"City": "Berlin",
141+
"Country": "Germany",
142+
"postalCode": "GER02398"
143+
}
144+
],
145+
"likes_color": [
146+
"Blue",
147+
"Green",
148+
"Red"
149+
],
150+
"to_do": [
151+
"First Thing",
152+
"Second Thing",
153+
"Third Thing"
154+
]
155+
}
156+
157+
return <FrameViewer
158+
frame={frame}
159+
mode={"View"}
160+
formData={data}
161+
type={"ArrayExamplePerson"}/>
162+
```
163+

0 commit comments

Comments
 (0)