Triggering getForm and hiding toolbar items about formengine HOT 4 CLOSED

Awesome thanks!

from formengine.

Hi, @rainman400

I was wondering if there is functionality for triggering getForm in the FormBuilder component. For example, I want to update the component with form data based on external (to the component) searches. I want to ideally use my ui and api for this. But, once I have the data, I want to feed it to the component and have it render properly. The data is something that I get from the builderRef so it should ideally just plug and play, but I do not see a way to trigger this right now.

We didn't quite understand what you want. Can you please explain in more detail or show me with an example of the code how it should look?

Also, I was wondering if there is a way to hide the toolbar items

We will add this feature in the next release. Thereafter уou can hide specific parts of the interface using CSS selectors. As example:

.FormBuilder .Property > .CodeButton {
   display: none;
}

from formengine.

Let me see if i can pseudo-code something out really quickly:

const [schema,setSchema] = useState<string>('') const getFromApi = (async () => { const apiSchema = await OnlineController.getSchema() setSchema(apiSchema); }) const getSchemaForBuilder = (() => { return schema || '' }) <FormBuilder getForm={getSchemaForBuilder} ...other props />

In this scenario, I want the formBuilder getForm to get triggered everytime 'getFromApi' is called, since it updates the schema variable. I am unsure of how to trigger that though.

For the moment, I have a workaround where I set a 'key' for the FormBuilder and remount it everytime I want to update the schema variable. It's not the worst solution, but maybe there is a better way?

from formengine.

@rainman400
There are several ways you can do this. In the code that you have shown, it is enough to add a useCallback:

  const [schema,setSchema] = useState<string>('')
  const getSchemaForBuilder = useCallback((formName?: string) => schema, [schema])
  const getFromApi = (async () => {  
    const apiSchema = await OnlineController.getSchema() 
    setSchema(apiSchema)
  }) 
  return <FormBuilder getForm={getSchemaForBuilder}  ...other props />  

You can also update the schema directly through builderRef:

builderRef.current.parseForm(schema)

or through viewerRef.

viewerRef.current.loadForm(getSchemaForBuilder, name)

This is not a documented API yet, we will add documentation soon.

from formengine.