This example shows how <FrameViewier/> appears for a document UnorderedPerson with set fields in Create/ Edit or View mode. If a field is described as a Set it means the field can have more than one value to it in any unordered fashion. The field can also be considered optional, meaning it can be empty.
Demo
Take a look at the Demo Playground to view <FrameViewier/> with set properties in Create, Edit or View mode.
Frame
This frame consists of an UnorderedPerson 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" },"UnorderedPerson": {"@key": {"@type":"Random" },"@type":"Class","likes_color": {"@class": {"@id":"Colors","@type":"Enum","@values": ["Red","Blue","Yellow","Green" ] },"@type":"Set" },"lived_at": {"@class": {"@class":"Address","@subdocument": [] },"@type":"Set" },"nicknames": {"@class":"xsd:string","@type":"Set" },"worked_as": {"@class":"Jobs","@type":"Set" } } }
Create
import { FrameViewer } from'@terminusdb/terminusdb-documents-ui'return <FrameViewerframe={frame} // above defined frame formData={{}} // formData will be emptymode={"Create"} // mode type={"UnorderedPerson"}/> // 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.