How to register nested custom components?

[shishir-korde-tech9]

I am trying to create a below structure.

Section
Subsection
Controls

All the components within each level are custom components and not rsuite. I have specific predefined set of components of each level. The hierarchy must be respected but the structure is fairly static. Users can select any of the level and underlying hierarchy should be added with it. (eg. if user adds a section component on form, it should also add all subsections and controls within them to the section. This list is predefined and fairly static, however a user can also add control to another section/subsection independently.
I have managed to define and register my control components, however I am not sure how I can register them as children of section and subsection when defining their builders?

Basically my sections would be a container for subsections or controls, while my subsection is a container for controls.

What I have tried:

const MySubsectionControl = (props: any) => {
  return (
    <div className={props.className}>
      <Control1 />
      <Control2 />
    </div>
  );
};

export const MySubsectionBuilder = define(
  MySubsectionControl,
  "MySubsectionControl"
)
  .name("My subsection")
  .category("Sub sections")
  .props({
    children: node,
  });

However when I check the JSON of above, it creates the same as

form: {
children: [
"Key": "MySubsectionControl",
"Children": []
]

What I would be expecting is

form: {
children: [
"Key": "MySubsectionControl",
"Children": [ 
{
"Key": "Control1",
}
{
"Key": "Control2",
}
]

So that I can allow user to add further pre registered controls if they want, and also when I drag the MySubsectionControl on form, it drags the appropriate children along with it.

[optimajet]

Hi @shishir-korde-tech9!

Currently there is no way to restrict the type of component that can be used as a child node. This feature is useful and we have added it to our backlog.

But you can use any number of properties of type node in your component, example:

import styled from '@emotion/styled'
import {boolean, define, node, oneOf} from '@react-form-builder/core'
import {Message} from 'rsuite'

const SMessage = styled(Message)`
  .rs-message-header {
    overflow: initial;
  }
`

export const rsMessage = define(SMessage, 'RsMessage')
  .name('Message')
  .props({
    children: node,
    closeable: boolean,
    header: node,
    type: oneOf('info', 'success', 'warning', 'error').default('info')
  })

Form example:

{
  "version": "1",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsMessage 1",
        "type": "RsMessage",
        "props": {},
        "children": [
          {
            "key": "RsHeader 1",
            "type": "RsHeader",
            "props": {},
            "slot": "header"
          },
          {
            "key": "RsImage 1",
            "type": "RsImage",
            "props": {}
          }
        ]
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}

[shishir-korde-tech9]

Hello, thank you for your response. While I am okay to not restrict in a sense (I can pretty much achieve the restriction by registering only my custom controls), I am still unclear of how to construct a subsection component with predefined children in it programmatically.
As you can see from my code of subsection builder, I have already registered children: node props. But how can I supply those children nodes so the json looks like what you've shown? or is this what you meant by no restriction?

The way I thought is subsection is just a container of predefined children nodes. So another possible question would be, is there an exposed method that converts a component to json, so I can create a wrapper on formbuilder that handles the state of json form, and I can hack in that json with the entire subsection, which I believe should achieve the same result? This might also work for my requirements for time being I believe.

[optimajet]

As you can see from my code of subsection builder, I have already registered children: node props. But how can I supply those children nodes so the json looks like what you've shown? or is this what you meant by no restriction?

This is just a component with two node props. There are no default value for the node annotation. So you can do something like this:

const SubSection = (props: any) => {
  return <div {...props}>SubSection</div>
}

const subSection = define(SubSection, 'SubSection')
  .name('SubSection')
  .props({

  })

const Section = (props: any) => {
  const {subsection1, subsection2} = props
  // defaults
  const s1 = subsection1 ?? <SubSection style={{backgroundColor: 'green'}} />
  const s2 = subsection2 ?? <SubSection style={{backgroundColor: 'orange'}}/>
  return (
    <div>
      {s1}
      {s2}
    </div>
  )
}

const section = define(Section, 'Section')
  .name('Section')
  .props({
    subsection1: node,
    subsection2: node,
  })

The way I thought is subsection is just a container of predefined children nodes. So another possible question would be, is there an exposed method that converts a component to json, so I can create a wrapper on formbuilder that handles the state of json form, and I can hack in that json with the entire subsection, which I believe should achieve the same result? This might also work for my requirements for time being I believe.

There is no such public API for converting a component to JSON. All components are stored in a tree that is documented, but is not a public API (something can be changed).

• https://formengine.io/documentation/api-reference/classes/react_form_builder_core.ComponentData - Tree.
• https://formengine.io/documentation/api-reference/classes/react_form_builder_core.ComponentStore - Component settings for serialization in JSON.