Granite UI "Composite" Form Field

[Gdubz-57m2mu]

Is there such a thing out of the box? Looking at the render.jsp of granite/ui/components/foundation/form/multifield, the comments say the following:

"If the field is a composite, it is its responsibility to concatenate the fields into one, before the form gets submitted, and to separate them again on rendering."

I'm just wondering if there's some example of this anywhere in the current codebase or if anyone has written one. I've searched for and read all of the forum posts and blog posts online about "Custom composite multifields for TouchUI" but they really don't do exactly what I expected or need. I've written xtypes in the past that are perfect, but unfortunately, I can't use those in TouchUI.

I think the closest I've seen to what I need to accomplish is Cognifide's Multifield II approach, which can be seen here. The only difference would be instead of storing these values as child nodes, I'm trying to store them as a String[] property with a JSON Object stored as a string in each multi-value. Think the Quiz component that Praveen Dubey wrote, but with a Coral/GraniteUI native dialog, instead of still relying on ExtJS xtypes.

I suppose this wouldn't be nearly as difficult as I'm imagining it would be, if I understood the Granite foundation form component structure better. I'm still all brand new to this, still so used to the "old way".

[smacdonald2008 · Accepted solution]

I pointed you to this blog - he has written a lot on Touch UI use cases: 

Lots of good examples
 
http://experience-aem.blogspot.ca/2013/08/in-blog-experiencing-adobe-experience.html

 

[Gdubz-57m2mu]

Yup, thanks so much Scott!

Found (sort-of) what I was looking for here: http://experience-aem.blogspot.com/2016/08/aem-62-touch-ui-nested-composite-multifield-store-data-as...

The only thing I'm still really unsure of is how to include one composite field in another. The example above has the multi-multifield hardcoded in the dialog. In my situation, that would lead to a LOT of copy/pasting the cq:dialog structure across multiple components. It seems like it was so much simpler with ExtJS xtypes. Let's say for example, I had an xtype named "TextPath" (stupid name, but just go with it), and it was a composite of a TextField and a PathBrowser...I could define that as an xtype and then cqinclude it in other custom components. If I ever had to update that xtype, I did it in one place.

With this amazing example by Sreekanth Choudry Nalabotu, it accomplishes what I want to do, but not in a reusable way.

[Gdubz-57m2mu]

Per kunal23's comment at the bottom of this post, I could do something like:

<shared jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/include" path="/apps/my-project/components/widgets/textpath/cq:dialog/content/items/tabs/items/basic" />

...but I don't think that'll work when the TouchUI component dialog that I'm including requires a clientlib to work, unless I just need to include that clientlib in the new component's cq:dialog or something.