This example shows how <FrameViewier/> appears for a document ArrayExamplePerson with array fields in Create/ Edit or View mode. If a field is described as an array it means the field can have more than one value to it in an ordered fashion. The field can also be considered as an optional field meaning it can be empty or filled.
Demo
Take a look at the Demo to view <FrameViewier/> with Array properties in Create, edit or view mode.
Frame
The below frame consists of an ArrayExamplePerson 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" },"ArrayExamplePerson": {"@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={"ArrayExamplePerson"}/> // 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.