Custom Layout Component

[xamlzealot]

I am using v3.27.1, and I am trying to create a custom layout component - specifically an accordion - and I'm using the concepts provided in the CheckMatrix component example for the most part.

I am able to make the accordion component show in the toolbox, and I'm able to drag it onto the form, configure it with a custom edit form etc. I can save it and it renders a Bootstrap themed accordion perfectly.

What it does NOT do however, is allow me to drag and drop other components into the content area similar to the behavior of other layout components (i.e. Tabs, Columns, Fieldset etc.).

I assume by skimming through the source code of the other layout controls that I need to extend NestedComponent in lieu of BaseComponent, but I've not yet been able to make that work.

Anyone have a working example or suggestions I can try to get this working? I appreciate your help in advance!

[travist]

You will need to derive from NestedComponent in order to get the nested drop zones to work. This is very similar to how Tabs components work, so what I would do is just look at the code behind the Tabs component (maybe even start out copying Tabs), and that should help provide the dropzones you are looking for.

https://github.com/formio/formio.js/blob/master/src/components/tabs/Tabs.js

Are you planning on contributing this control back to Open Source? If so, then I am sure a lot of other people would be very grateful for that contribution.

[travist]

Now that I think about it... you should be able to just derive from TabsComponent and then just change the template to use accordion instead of Tabs. You will also need to override the editForm to rename Tabs to Sections, but this should be pretty easy.

[xamlzealot]

I will gladly contribute my efforts back once I get it working correctly. Thanks for the advice, I will attempt to extend TabsComponent and see if I can get it working. Thanks!

[zardilior]

How can I add a TabsComponent?

[Dheeraj-Bharti]

I also want to create similar kind of component in my angular application but i'm unable to extend the tabComponent in my .ts file.

Anyone has created a nested component layout. Please share.

[FalconLabz]

I also want to create similar kind of component in my angular application but i'm unable to extend the tabComponent in my .ts file.

Anyone has created a nested component layout. Please share.

Hi,

i'm also trying to work on the same thing for my accordion custom component, have you had any success? i can't extend the tabsCOmponents in my .ts file too.

[Sidiro23]

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.