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 @metadataorder_by array.
Demo
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.
import { FrameViewer } from'@terminusdb/terminusdb-documents-ui'return <FrameViewerframe={frame} // above defined frame formData={{}} // formData will be emptymode={"Create"} // mode type={"OrderByExample"}/> // type of document
Edit & View
Note - make sure to provide document values for View mode. The form will be in read only mode for View.
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 <FrameViewerframe={frame}mode={"View"}formData={data}type={"OrderByExample"}/>