Expand my Community achievements bar.

SOLVED

Nested multifield with compositfield objects

Avatar

Former Community Member

Hi everyone,
I need to create a component but I am encoutering some problems with it.

These are the requirements:

- The author should be able to define a list of objects (multifield). Each one of these objects is composed of a textfield, a pathfield and a nested list. It is also necessary to be able to change the order of the items in the list. The nested list may or may not exist for a given item of the outer list.

- Each object of the nested list has its own textfield and pathfield (i.e. is another composite element), but it has no nested list. These objects should be re-sortable by the author, too.

 

In practice, we are dealing with a menu and submenu structure.

 

This is a fake example of a possible resulting tree:

 

*|FirstObjectLabel|-|FirstObjectPath| |      | |      |- |NestedObjectLabel0-0|-|NestedObjectPath0-0| |      |- |NestedObjectLabel0-1|-|NestedObjectPath0-0| | *|SecondObjectLabel|-|SecondObjectPath| |      | |      |- |NestedObjectLabel1-0|-|NestedObjectPath1-0| |      |- |NestedObjectLabel1-1|-|NestedObjectPath1-1| |      |- |NestedObjectLabel1-2|-|NestedObjectPath1-2| *|ThirdObjectLabel|-|ThirdObjectPath|

 

My idea to solve the problem was this (xml pseudo-code)

 

<multifield><!-- Outer list --> <compositefield> <textfield/> <pathfield/> <submultifield><!-- Inner list --> <subcompositefield> <subtextfield> <subpathfield> <subcompositefield> </submultifield> <compositefield> </multifield>


The very first problem is that it looks like a list (multifield) of compositefield objects cannot be re-sorted: the green arrows that let you change an object's position within the list simply don't work (they work as expected, for example, when you want to change the order of your vanity URLs in the Basic tab of the Page Properties of your page, but that's just a textfield-based structure).

Second, the data related to the inner list elements are stored in the CRX, but they are not related to their parent-objects (the first-level elements) in any way.

Third, when I re-open the tab after having saved changes, the field are not filled with any data. I guess this is somehow related to the compositefield structure...definitely not sure of that.

Last but not least, I have some major layout issues when it comes to display all the fields in the tab. You can easily understand what I'm talking about deployng the code you can find down here, but that's a problem I'd like to investigate later.

 

Here is the xml I am deploying

 

<menuElement jcr:primaryType="cq:Widget" collapsed="{Boolean}false" collapsible="{Boolean}true" title="Navigation menu" xtype="dialogfieldset"> <items jcr:primaryType="cq:WidgetCollection"> <list jcr:primaryType="cq:Widget" fieldDescription="Click the '+' to add a new item" hideLabel="true" width="{Long}700" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" xtype="compositefield"> <items jcr:primaryType="cq:WidgetCollection"> <label jcr:primaryType="cq:Widget" name="./label" width="{Long}150" xtype="textfield"/> <path jcr:primaryType="cq:Widget" name="./path" width="{Long}150" xtype="pathfield"/> <sublist jcr:primaryType="cq:Widget" fieldDescription="Click the '+' to add a new item" width="{Long}300" hideLabel="true" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" xtype="compositefield"> <items jcr:primaryType="cq:WidgetCollection"> <sublabel jcr:primaryType="cq:Widget" name="./sublabel" width="{Long}100" xtype="textfield"/> <subpath jcr:primaryType="cq:Widget" name="./subpath" width="{Long}100" xtype="pathfield"/> </items> </fieldConfig> </sublist> </items> </fieldConfig> </list> </items> </menuElement>
 

 

Could someone point me in the right direction? I have found some topics about similar problems, but I couldn't manage to get a clear idea...
I would like the solution not to be massively based on Javascript if possible (I have grown fond of Javascript lately, but I am not proficient in it), but I am ready to change my mind as well.

 

Thanks! wink 

1 Accepted Solution

Avatar

Correct answer by
Level 10

To implement this - you will need to use JavaScript and xtypes as described here:

http://dev.day.com/docs/en/cq/current/developing/widgets/xtypes.html

You have to use the CQ Widget API - which is all JavaScript based:

http://docs.adobe.com/docs/en/cq/current/widgets-api/index.html

We have some articles that will get you up and running when using xtypes. See the table in the 1st link. 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

To implement this - you will need to use JavaScript and xtypes as described here:

http://dev.day.com/docs/en/cq/current/developing/widgets/xtypes.html

You have to use the CQ Widget API - which is all JavaScript based:

http://docs.adobe.com/docs/en/cq/current/widgets-api/index.html

We have some articles that will get you up and running when using xtypes. See the table in the 1st link. 

Avatar

Former Community Member

Thanks a lot, I will take a look at those articles!