How to programmatically show exported json as the form

[shishir-korde-tech9]

I am currently exploring this library. We need to allow users to save and edit existing forms for updates. I was trying to get the edit existing form json part and I wasn't sure if I was missing something.

const App = () => {
  // use this ref to access the form builder instance
  const localBuilder = useRef<IFormBuilder>(null as any);
  const components = rSuiteComponents.map(
    c => {
      return c.build()
    }
  )

  const builderView = new BuilderView(components);
  const form = `{
    "version": "1",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "props": {},
      "children": [
        {
          "key": "RsContainer 1",
          "type": "RsContainer",
          "props": {},
          "css": {
            "any": {
              "object": {
                "flexDirection": "row"
              }
            }
          },
          "children": [
            {
              "key": "RsInput 1",
              "type": "RsInput",
              "props": {}
            },
            {
              "key": "RsInput 2",
              "type": "RsInput",
              "props": {}
            },
            {
              "key": "RsInput 3",
              "type": "RsInput",
              "props": {}
            }
          ]
        }
      ]
    },
    "localization": {},
    "languages": [
      {
        "code": "en",
        "dialect": "US",
        "name": "English",
        "description": "American English",
        "bidi": "ltr"
      }
    ],
    "defaultLanguage": "en-US"
  }`

  useEffect(() => {
    if (localBuilder.current) {
      localBuilder.current.parseForm(form)
    }
  }, [localBuilder.current])

  return <FormBuilder view={builderView} builderRef={localBuilder} />
  // return <FormViewer view={view} getForm={_ => form} />
}

export default App;

I tried above code, and it never calls the parseForm(form) since current is always null. However if i reset values to say builderView by setting new BuilderView([]) I can then get the hit on parseForm(form). I wasn't sure what is it that I am missing out here to get the form loaded by default?

[sergeythrees]

Hi, @shishir-korde-tech9
Thanks for reporting, it looks like a bug. We will fix it in the next few days and let you know right away.
As a temporary hack, you can use such a solution:

  const localBuilder = useRef<IFormBuilder>(null as any);
  const [flag, setFlag] = useState(false);
  
  useEffect(() => {
    if (!flag) setFlag(true);
    if (localBuilder.current) {
     console.log(1)
    }
  }, [localBuilder, flag])


  return <FormBuilder view={view} builderRef={localBuilder}/>

[shishir-korde-tech9]

@sergeythrees - Thanks for taking time out to look into it. I have for now managed to get it done simply by using getForm function. I had tried it out earlier but have no idea why it didn't work. I did think of doing a flag to get around re-render but thats probably due to the refs wont trigger render when used as deps in react (which is on framework side rather than library itself). I am instead now setting my form data in state and using that to show pre configured forms, and that seems to be working normally.