Dynamic input type in custom component

Technical Questions
1

I am using a Custom Component for my footer and I am using list of lists for my url grouping,
Builder.registerComponent(Footer, {
name: ‘Footer’,
inputs: [
{
name: “logo”,
type: ‘file’
},
{
name: ‘footerlinks’,
type: ‘list’,
subFields: [
{
name: ‘linkText’,
type: ‘text’
},
{
name: ‘linkURL’,
type: ‘text’
}
]
},

]
}),
I want to know if there is any way in which I can create n-level heirarchy using my code, like I click add heirarchy and I am able to input next level element in cms?

2

Hello @rythm,

Yes, you can create an n-level hierarchy using your code structure. To allow for dynamic nesting of elements in your custom component, you can utilize a recursive approach.

Here’s how you can modify your code to support nested levels:

Builder.registerComponent(Footer, {
  name: 'Footer',
  inputs: [
    {
      name: 'logo',
      type: 'file'
    },
    {
      name: 'footerLinks',
      type: 'list',
      subFields: [
        {
          name: 'linkText',
          type: 'text'
        },
        {
          name: 'linkURL',
          type: 'text'
        },
        // Add a subfield for nested links
        {
          name: 'nestedLinks',
          type: 'list',
          subFields: [
            {
              name: 'linkText',
              type: 'text'
            },
            {
              name: 'linkURL',
              type: 'text'
            },
            // You can continue nesting levels by adding more subFields here
          ]
        }
      ]
    }
  ]
});

For reference, you can refer to the below link