Order By Using @metadata

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 @metadata order_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.

Frame

This frame consists of an OrderByExample document

  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

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 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 <FrameViewer
  frame={frame}
  mode={"View"}
  formData={data}
  type={"OrderByExample"}/>