Unmaintained package
These packages (@terminusdb/terminusdb-documents-ui etc.) were last published December 2023 and are no longer actively maintained. The documentation is preserved for reference. Community contributions and pull requests are welcome.
The NewDocumentComponent allows you to create new documents using the FrameViewer.
Installation
Install the dependencies from npm
Example: Bash
npm install @terminusdb/terminusdb-documents-ui
npm install @terminusdb/terminusdb-react-table
npm install @terminusdb/terminusdb-documents-ui-templatesProperties
| Properties | Description |
|---|---|
type | The document type |
documentJson | The document object, it is empty ({}) for new |
createDocument | A function that acts as a callback when the submit button is clicked |
frames | The database Class Frame, or object of all class frames |
closeButtonClick | A function that acts as a callback when the panel exit x button is clicked |
SearchComponent | A react component used as search component |
Example
Example: Python
//This is use the NewDocumentComponent template to create a new document type
import React, {useEffect} from "react";
//we import the NewDocumentComponent and the useTDBDocuments from the terminusdb-documents-ui-template
//you need to pass your terminusdb-client instance and the document type
import {NewDocumentComponent,useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
export const DocumentNew = ({type,tdbClient}) => {
const {
frames,
error,
getDocumentFrames,
createDocument,
setError
} = useTDBDocuments(tdbClient)
useEffect(() => {
getDocumentFrames()
},[])
const callCreateDocument = async (jsonDocument) =>{
const created = await createDocument(jsonDocument)
if(created){
//do something after create a new element
}
}
const closeButtonClick = () =>{
// do something after click the close panel button the interface
}
const DocumentSearchComponent = () =>{
//make you document search component
return </div>
}
if(!frames) return <div>{`Fetching frames for document type ${type} ...`}</div>
const errorMessage = typeof error === "object" ? JSON.stringify(error,null,4) : error
return <React.Fragment>
{error && <div>Server Error: {errorMessage} </div>}
<NewDocumentComponent
SearchComponent={DocumentSearchComponent}
frames={frames}
createDocument={callCreateDocument}
type={type}
closeButtonClick={closeButtonClick}
/>
</React.Fragment>
}View the NewDocumentComponent integrated inside a dashboard here