Query related to Multifield component

[sankarr26533925]

Hi All,

Hope you are doing well.

I am very new to touch UI component development. I want to create multifield component with textfield input.

I have gone through few video and website tutorials related to multifield dialog and tried the below dialog component for my requirement. However the text field is not showing as per attachment.

 

Clarification:

Could you please help me to figure out what is the root cause for not displaying textfield ?

In addition to that, what will happen if we mix both coral UI2 and coral UI3 component path for particular dialog?

Coral UI2 Components Path	/libs/granite/ui/components/foundation/*
Coral UI3 Components Path	/libs/granite/ui/components/coral/foundation/*

{
"jcr:primaryType": "nt:unstructured",
"jcr:title": "Multfield Dialog",
"sling:resourceType": "cq/gui/components/authoring/dialog",
"content": {
"jcr:primaryType": "nt:unstructured",
"sling:resourceType": "granite/ui/components/coral/foundation/container",
"layout": {
"jcr:primaryType": "nt:unstructured",
"type": "nav",
"sling:resourceType": "granite/ui/components/coral/foundation/tabs"
},
"items": {
"jcr:primaryType": "nt:unstructured",
"configuration": {
"jcr:primaryType": "nt:unstructured",
"jcr:title": "Link Configuration",
"sling:resourceType": "granite/ui/components/coral/foundation/container",
"layout": {
"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",
"items": {
"jcr:primaryType": "nt:unstructured",
"fieldset": {
"jcr:primaryType": "nt:unstructured",
"jcr:title": "Links",
"sling:resourceType": "granite/ui/components/coral/foundation/form/fieldset",
"layout": {
"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",
"items": {
"jcr:primaryType": "nt:unstructured",
"tabs": {
"jcr:primaryType": "nt:unstructured",
"class": "full-width",
"sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
"fieldDescription": "Click '+' to add new link details",
"field": {
"jcr:primaryType": "nt:unstructured",
"name": "./linkMultiField",
"sling:resourceType": "granite/ui/components/coral/foundation/form/fieldset",
"layout": {
"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",
"items": {
"jcr:primaryType": "nt:unstructured",
"linkText": {
"jcr:primaryType": "nt:unstructured",
"name": "./linkText",
"fieldLabel": "Link Text",
"sling:resourceType": "granite/ui/components/coral/foundation/form/textfield"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

[Siva_Sogalapalli · Accepted solution]

@sankarr26533925  the best practice to use Coral UI3, but not mix of both coral UI2 and coral UI3 .

Also, please check below which has multifield with textfield in Coral UI3.  You can also compare with your dialog.xml and see what is missing. 

https://aemhints.com/2020/10/24/coral-multifield-aem65/

More info regarding Coral UI2  & 3 : https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/... 

https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/... 

https://myaemlearnings.blogspot.com/2018/03/granitecommonattrs-implemenation.html#:~:text=In%20Coral... 

Hope this helps.