This example shows how <FrameViewer/> appears for a document OrderByExample in Create/ Edit and View mode.
The Frame below to shows @metadata with an order_by tag which tells <FrameViewer/> to order fields according to the order_by array. Note there is a @metadata tag in the SubBody class definition which also tells <FrameViewer/> to order the subdocument's internal fields in the order included in the @metadata order_by array.
Demo
Take a look at the Demo Playground to view <FrameViewer/> with properties where order_by is defined in the @metadata tag - in Create, Edit and view mode.
Frame
This frame consists of an OrderByExample document
Example: JavaScript
let frame = {
"@context": {
"@base": "terminusdb:///data/",
"@schema": "terminusdb:///schema#",
"@type": "Context",
"xsd": "http://www.w3.org/2001/XMLSchema#"
},
"OrderByExample": {
"@key": {
"@fields": [
"title"
],
"@type": "Lexical",
},
"@type": "Class",
"@metadata": {
"order_by": [ "num_lines", "paragh", "body", "title" ]
},
"paragh": "xsd:string",
"title": "xsd:string",
"num_lines": "xsd:decimal",
"body": {
"@class": "SubBody",
"@subdocument": []
}
},
"SubBody": {
"@key": {
"@type": "Random"
},
"@metadata": {
"order_by": [ "section", "url", "text" ]
},
"@subdocument": [],
"@type": "Class",
"text": "xsd:string",
"section": "xsd:string",
"url": "xsd:url"
}
}Create
Example: Python
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
return <FrameViewer
frame={frame} // above defined frame
formData={{}} // formData will be empty
mode={"Create"} // mode
type={"OrderByExample"}/> // type of documentEdit & View
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
Example: JavaScript
let data = {
"@id": "OrderByExample/431b3406a64d99714b57133019408a16a6a514755fb229aff01419b4b423cb62",
"@type": "OrderByExample",
"paragh": "An example showing field ordered",
"title": "ordering example",
"num_lines": "23",
"body": {
"@id": "SubBody/72a8a2778bafbc4290f59ca851e0307c6918f7205207d93ac1b2a1f796a94587/body/SubBody/5879ec85b65bb0caaa03f48e99073a9d4302c31ec3c3a382889a12980899e95f",
"@type": "SubBody",
"text": "sample text",
"section": "a section",
"url": "https://terminusdb.com/"
},
}
return <FrameViewer
frame={frame}
mode={"View"}
formData={data}
type={"OrderByExample"}/>