Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Getting Content node Value for Multifield Collapsible

Avatar

Avatar
Validate 1
Level 1
rajaram33
Level 1

Like

1 like

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
rajaram33
Level 1

Like

1 like

Total Posts

8 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
rajaram33
Level 1

01-06-2021

 

Hi All,

I had created a multifield structure with three levels of nesting

Below is my dialog structure:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Property Details"
sling:resourceType="cq/gui/components/authoring/dialog"
width="{Long}900">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<navItems
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Nav Items Sub List">
<field
jcr:primaryType="nt:unstructured"
jcr:title="Click here to expand/Collapse Navigation inputs"
sling:resourceType="granite/ui/components/foundation/container"
margin="true"
name="./propertyList1">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<panel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Panel">
<field
jcr:primaryType="nt:unstructured"
jcr:title="Click here to edit Panel inputs"
sling:resourceType="granite/ui/components/foundation/container"
margin="{Boolean}true"
name="./propertyList2">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<panelLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Panel Coulmn Base Label"
name="./panellabel"/>
<panelId
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Panel Coulmn Base ID"
name="./panelid"/>
<panelHref
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Panel Coulmn Base Href"
fieldLabel="Panel Coulmn Base Href"
name="./panelhref"/>
<panelItems
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Panel SubMenu List"
margin="{Boolean}true">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true"
name="./propertyList3">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<panelItemsHref
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Panel Submenu Href"
name="./panelitemshref"/>
<panelItemsLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Panel Submenu Label"
name="./panelitemslabel"/>
<panelItemsId
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Panel Submenu ID"
name="./panelitemsid"/>
</items>
</column>
</items>
</field>
</panelItems>
</items>
</column>
</items>
</field>
</panel>
<navSubItemsHref
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Nav Items Sub Coulmn Base Href"
fieldLabel="Nav Items Sub Coulmn Base Href"
name="./navsubitemshref"/>
<navSubItemsId
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Nav Items Sub Coulmn Base ID"
fieldLabel="Nav Items Sub Coulmn Base ID"
name="./navsubitemsid"/>
<navSubItemsLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Nav Items Sub Coulmn Base Label"
fieldLabel="Nav Items Sub Coulmn Base Label"
name="./navsubitemslabel"/>
</items>
</column>
</items>
</field>
</navItems>
</items>
</column>
</items>
</content>
</jcr:root>

 

Now below is my dialog structure

rajaram33_1-1622588981455.png

 

rajaram33_0-1622588884528.png

 

But still collapsible is not giving a good experience for author they are unable to understand which panel is under which collapsible unless they expand and navigate. Is there a way i can read the values of panel or subpanel nodes stored underneath the /content and populate the jcr:title field of Container at run time or any alternate solution to make authoring experience good with collapsible.

 

dialog multifield collapsible authoring

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Springboard
Level 6
snbaem
Level 6

Likes

93 likes

Total Posts

218 posts

Correct Reply

29 solutions
Top badges earned
Springboard
Establish
Validate 25
Validate 10
Validate 1
View profile

Avatar
Springboard
Level 6
snbaem
Level 6

Likes

93 likes

Total Posts

218 posts

Correct Reply

29 solutions
Top badges earned
Springboard
Establish
Validate 25
Validate 10
Validate 1
View profile
snbaem
Level 6

01-06-2021

True.. With these many levels of nesting, the collapsible layout with expand the selected and collapse the others and make it difficult for authors to view even in full dialog mode.

 

This looks like something that is probably used for a menu. If it's going to be authored only at one place, can you consider implementing this using container components? Each multifield section being a container component with ability to author desired properties at that level.

 

Other option is exploring granite/ui/components/coral/foundation/well in place of/ combination of  granite/ui/components/foundation/layouts/collapsible

 

 

Answers (1)

Answers (1)

Avatar

Avatar
Boost 5
Level 6
Ritesh_M
Level 6

Likes

123 likes

Total Posts

99 posts

Correct Reply

37 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 6
Ritesh_M
Level 6

Likes

123 likes

Total Posts

99 posts

Correct Reply

37 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 6

02-06-2021

 

Hi @rajaram33 ,

 

You should consider using container and section component implementation. Basically the container component will have responsive grid inside which you will configure section (child) component. The authoring will be much easy and the container component can be reused for multiple such requirements.

 

I have explained it here