drop zone in custom component in angular-formio

[Dheeraj-Bharti]

Hi, I want to create a drop zone in my custom component that i've registered using the angular-formio. For ex - I want to make a dropzone in the primeng-panel. Can you please let me know whether that is even feasible or not in angular-formio.

Thank you, Dheeraj

[travist]

Yes, this is feasible since custom components can be created using the "Angular" way described @ https://github.com/formio/angular-formio/wiki/Custom-Components-with-Angular-Elements

[Dheeraj-Bharti]

I have successfully created and registered the custom component but I want to drag and drop the components inside my custom component. For that I'm unable to find anything. We can create the custom component by extending the nested component in formiojs but how to do it for custom component in angular formio that i'm not able to figure out.

[travist]

I am not sure how that is done with the Custom Components feature since we did not develop it, but maybe @merobal knows since he developed it?

[merobal]

The custom component itself is an Angular component (in this context), so feel free to look at any dropzone implementations for Angular, and use that there.

[Dheeraj-Bharti]

I tried cdk drag and drop but in that I'm not able to drop the components, also it won't give a nested json i mean components inside components as we gets in formio. I want to create a custom layout component as we create in formiojs by extending the Nested Component with the dropzone provided as we have in layout components.

[merobal]

Try other d&d packages and try to compose the JSON inside the ng component and emit via the value. (Or you can use an Angular service to save data and combine during API calls.)

[Dheeraj-Bharti]

I'm trying with ngx-dnd, but how to get the list of components to my custom components. Do you have any POC application for the same that you would like to share.

[merobal]

what's the use-case you want to achieve?

[Dheeraj-Bharti]

I've added primeng-tabview ( https://primefaces.org/primeng/showcase/#/tabview ) to my custom component. I want to drag and drop components inside this just like we have tabs in layout section.

[Dheeraj-Bharti]

Any updates on this?

[merobal]

I haven't yet discovered how you can combine both scopes. Imagine that you have an Angular component and you want to include a part of an external lib, in this case, formio>angular>formio.

This Custom Components solution is designed for form fields (form inputs) when you wish to embed Angular fields inside formio, e.g. if you want to deliver the same UI across your Angular apps but enjoy the WYSIWYG-style form builder too.

For tabs, I recommend using the built-in formio's one and apply custom css to match the design with primeng.

[Seonho08]

@Dheeraj-Bharti Have you find solution to this, I too need to have drop zone for my custom component

[daneformio]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!