Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 9

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.

2023-05-18 15_41_02.png

How can I do it?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

 

Sady_Rifat_0-1684396829000.png

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

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>

 

Sady_Rifat_0-1684396829000.png

Avatar

Community Advisor

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.



Esteban Bustamante

Avatar

Community Advisor
 
 
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.
 
aanchalsikka_0-1684649742348.png

 


Aanchal Sikka

Avatar

Level 2

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