component dialog - how do I wrap/group fields inside a box?

[jayv25585659]

just to quickly explain the situation

I have a component dialog with lots of textfields.

granite/ui/components/coral/foundation/form/textfield

Because of usability issues, I want to group the related ones by enclosing them in sort sort of box like in the screenshot below.

I've already tried 

granite/ui/components/coral/foundation/form/fieldset

but the behavior is different.

Any ideas on how can I do it? Thank you.

-------------

This is a screenshot for a sample form from w3schools.

How can I do it?

[Sady_Rifat · Accepted solution]

Hello @jayv25585659 ,

For groups you can use accordion. https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

<section
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/accordion"
	maximized="{Boolean}true">
	<items jcr:primaryType="nt:unstructured">
		<itemContainer
						jcr:primaryType="nt:unstructured"
						jcr:title="Personalia"
						sling:resourceType="granite/ui/components/coral/foundation/container"
						maximized="{Boolean}true">
				<items jcr:primaryType="nt:unstructured">
					<!-- YOUR ITEMS -->
				</items>
		</itemContainer>
	</items>
</section>

[EstebanBustamante]

I agree with @Sady_Rifat , another option could be to use collapsable type from granite https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

Beyond those, i think you dont have other options ootb, you could create your own view if really needed.

[aanchal-sikka]

You might want to explore /libs/core/wcm/components/download/v2/download/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/titleGroup

It uses "granite/ui/components/coral/foundation/well" as sling:resourceType. 

The wells can be used to group multiple fields on dialog. Example: "Title" and "Get title from DAM Asset" in below screenshot.

[Sandeep_k_Singh]

Hi @aanchal-sikka ,

Can you share the content.xml for the above shown example and also please can you share how to add a fieldLabel to a well?

Thanks