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
//This is use the NewDocumentComponent template to create a new document typeimport 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"exportconstDocumentNew= ({type,tdbClient}) => { const {frames,error,getDocumentFrames,createDocument,setError } =useTDBDocuments(tdbClient)useEffect(() => {getDocumentFrames() },[])constcallCreateDocument=async (jsonDocument) =>{constcreated=awaitcreateDocument(jsonDocument)if(created){//do something after create a new element } }constcloseButtonClick= () =>{// do something after click the close panel button the interface }constDocumentSearchComponent= () =>{//make you document search componentreturn</div> }if(!frames) return <div>{`Fetching frames for document type ${type} ...`}</div>consterrorMessage=typeof error ==="object"?JSON.stringify(error,null,4) : errorreturn <React.Fragment> {error && <div>Server Error: {errorMessage} </div>} <NewDocumentComponentSearchComponent={DocumentSearchComponent}frames={frames}createDocument={callCreateDocument}type={type}closeButtonClick={closeButtonClick} /> </React.Fragment>}
View the NewDocumentComponent integrated inside a dashboard here