Expand my Community achievements bar.

SOLVED

Multifield Reordering Issue - Accordion Component

Avatar

Level 1

I created an accordion component which has imbedded parsys' so an author can to include any component into an accordion tab. I am using a multifield xtype to add accordion tabs and then a new parsys area is displayed under the new tab.

My issue is that when I go into edit mode and change the order of the multifield the content does not move with the header.

Does anyone know how I can get the content to move with the header? Or to be able to add any component into a multifield dialog?

1 Accepted Solution

Avatar

Correct answer by
Level 9

Hello,

If you manage the tabs using multifield then you always has problem with reordering because you are doing node management in code via taking multifield value and when it comes to reordering the only choice you left with to write more node management code to delete and recreate node structure which is very complex.

The best way to handle these type of scenarios are

1. OOTB straight forward way: Create a container component (tab container) which allows you to drop child components (in your example tab) which will be stack. Now you can arrange the UI based on mode type for example in edit mode it will be stack but when you go to preview mode it will display as actual tabs side by side OR you can have edit property in your container component where you can switch between which we you want to view. This way you will have all the flexibility to reorder your node or edit/delete any of tab items

2. Write custom multifield widget which allows you to author multiple widgets in mutlifield. I wrote one already for me. let me know i can share idea how you can do it.

 

Thanks,

Pawan

View solution in original post

2 Replies

Avatar

Correct answer by
Level 9

Hello,

If you manage the tabs using multifield then you always has problem with reordering because you are doing node management in code via taking multifield value and when it comes to reordering the only choice you left with to write more node management code to delete and recreate node structure which is very complex.

The best way to handle these type of scenarios are

1. OOTB straight forward way: Create a container component (tab container) which allows you to drop child components (in your example tab) which will be stack. Now you can arrange the UI based on mode type for example in edit mode it will be stack but when you go to preview mode it will display as actual tabs side by side OR you can have edit property in your container component where you can switch between which we you want to view. This way you will have all the flexibility to reorder your node or edit/delete any of tab items

2. Write custom multifield widget which allows you to author multiple widgets in mutlifield. I wrote one already for me. let me know i can share idea how you can do it.

 

Thanks,

Pawan

Avatar

Level 2
Hey Pawan , can you please share your idea on how you solved this by using custom multfield in Touch ui?