This example shows how <FrameViewier/> appears for a document called OrderedPerson with list fields in Create/ Edit and View mode. If a field is described as a List it means the field can have one or more values and is ordered. The field must have at least one entry.
Demo
Take a look at the Demo Playground to view the <FrameViewier/> with list properties in Create, Edit and View mode.
Frame
The below frame consists of an OrderedPerson document
let frame = {"@context": {"@base":"terminusdb:///data/","@schema":"terminusdb:///schema#","@type":"Context","xsd":"http://www.w3.org/2001/XMLSchema#" },"Address": {"@documentation": [ {"@comment":"An Address","@label":"Address","@language":"en","@properties": {"AddressLine1": {"@comment":"Address Line one","@label":"Address Line 1" },"Country": {"@comment":"A Country ","@label":"Country" },"postalCode": {"@comment":"A valid Postal Code","@label":"Zip Code" } } }, {"@comment":"მისამართი","@label":"მისამართი","@language":"ka","@properties": {"AddressLine1": {"@comment":"მისამართის ხაზი პირველი","@label":"მისამართის ხაზი 1" },"Country": {"@comment":"Ქვეყანა","@label":"ქვეყანა" },"postalCode": {"@comment":"მოქმედი საფოსტო კოდი","@label":"Ზიპ კოდი" } } } ],"@key": {"@type":"Random" },"@subdocument": [],"@type":"Class","AddressLine1":"xsd:string","City": {"@class":"xsd:string","@type":"Optional" },"Country":"xsd:string","postalCode":"xsd:string" },"OrderedPerson": {"@key": {"@type":"Random" },"@type":"Class","hangs_out_at": {"@class": {"@class":"Address","@subdocument": [] },"@type":"List" },"likes_color": {"@class": {"@id":"Colors","@type":"Enum","@values": ["Red","Blue","Yellow","Green" ] },"@type":"List" },"to_do": {"@class":"xsd:string","@type":"List" } } }
Create
import { FrameViewer } from'@terminusdb/terminusdb-documents-ui'return <FrameViewerframe={frame} // above defined frame formData={{}} // formData will be emptymode={"Create"} // mode type={"OrderedPerson"}/> // 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.