Selectbox with dynamic datasource in multifield

[Reini-]

Hi,

I am facing an issue when having a selectbox with a custom datasource in a multifield.

When the dialog with this multifield is open the first time (no data for the multifield are present in the repo) then the dialog opens. The editor is able to select items in the selectboxes, add new selectboxes inside the multifield and so on. But when the dialog gets closed and the data are saved in the repo and the editor tries to open this dialog again, a javascript error occors and the dialog does not open anymore.

The interesting thing is, when I have the same dialog configuration but the selectbox has static items instead of a custom dataset then everything works fine.

Not working dialog configuration:

<myCustomMultifield
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
	composite="{Boolean}true"
	required="{Boolean}true"
	fieldLabel="My Custom Multifield">
	<field
		jcr:primaryType="nt:unstructured"
		sling:resourceType="granite/ui/components/coral/foundation/form/select"
		emptyOption="{Boolean}true"
		name="./selectBoxValues">
		<datasource
			jcr:primaryType="nt:unstructured"
			sling:resourceType="/path-to-my-custom-datasource-servlet"/>
	</field>
</lexicon-substance-references>

Working dialog configuration without custom datasource:

<myCustomMultifield
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
	composite="{Boolean}true"
	required="{Boolean}true"
	fieldLabel="My Custom Multifield">
	<field
		jcr:primaryType="nt:unstructured"
		sling:resourceType="granite/ui/components/coral/foundation/form/select"
		emptyOption="{Boolean}true"
		name="./selectBoxValues">
		<items jcr:primaryType="nt:unstructured">
			<item1
				jcr:primaryType="nt:unstructured"
				text="Item 1"
				value="item1"/>
			<item2
				jcr:primaryType="nt:unstructured"
				text="Item 2"
				value="item2"/>
			<item3
				jcr:primaryType="nt:unstructured"
				text="Item 3"
				value="item3"/>
		</items>
	</field>
</lexicon-substance-references>

Here the javascript error:

Uncaught TypeError: g is null
    <anonymous> http://localhost:4502/libs/cq/gui/components/authoring/dialog/clientlibs/all.min.js line 7 > srcScript:56
    jQuery 7
    auto http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:662
    jQuery 8
    auto http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:661
    jQuery 6
    auto http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:660
    openDialog http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:666
    openEditDialog http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:737
    _onFastDblClick http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:767
    jQuery 7
    onOverlayFastDblClick http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:779
    jQuery 7
    overlayManager http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:572
    jQuery 8
    overlayManager http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:571
    <anonymous> http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:575
    <anonymous> http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.min.js line 7 > srcScript:575
all.min.js line 7 > srcScript:56:92

Has anybody an idea how to solve this problem? Or is this a know bug?

regards

Reini

[aemninja]

@Reini - Can you try this dialog?

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Multifield Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="true">
<items jcr:primaryType="nt:unstructured">
<general
jcr:primaryType="nt:unstructured"
jcr:title="Test Multifield Component"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<myCustomMultifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
required="{Boolean}true"
fieldLabel="My Custom Multifield">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./multifield">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" emptyOption="{Boolean}true" name="./selectBoxValues">
<datasource jcr:primaryType="nt:unstructured" sling:resourceType="/path-to-my-custom-datasource-servlet"/>
</field>
</items>
</column>
</items>
</field>
</myCustomMultifield>
</items>
</column>
</items>
</general>
</items>
</tabs>
</items>
</content>
</jcr:root>

[Reini-]

Hi @aemninja ,

I can see the same issue when I use your code 1:1. But then I tried to include your solution into my existing dialog and then I was able to open the dialog also when some values in the selectbox were available in the repo. But the problem is, that the selectboxes are not filled with that values. Everytime I opened the dialog, the multifield was empty and no items where preselected.

regards

Reini

[aemninja]

@Reini - This is probably an issue with your servlet. Check your servlet's key & value you are returning. Please share your servlet if you want me to check.

[Reini-]

Hi @aemninja ,

I do not think that the servlet is the issue because everything works fine when the selectbox is used "standalone" (not in a multifield).

But here a simplified version of the servlet

List<Resource> datasourceList = new ArrayList<>();
ValueMap valueMapDecorator;

valueMapDecorator = new ValueMapDecorator(new HashMap<>());
valueMapDecorator.put("text", "text1");
valueMapDecorator.put("value", "value1);
datasourceList.add(new ValueMapResource(request.getResourceResolver(), new ResourceMetadata(), "nt:unstructured", valueMapDecorator));

valueMapDecorator = new ValueMapDecorator(new HashMap<>());
valueMapDecorator.put("text", "text2");
valueMapDecorator.put("value", "value2);
datasourceList.add(new ValueMapResource(request.getResourceResolver(), new ResourceMetadata(), "nt:unstructured", valueMapDecorator));

final DataSource dataSource = new SimpleDataSource(datasourceList.iterator());
request.setAttribute(DataSource.class.getName(), dataSource);

regards

Reini

[Vijayalakshmi_S]

Hi @Reini- ,

Could you please let know your data source. Is it a JSON file/any resource path (that you use in servlet to do listChildren() of that path)

[Reini-]

Hi @Vijayalakshmi_S,

I am not sure if I get your question the correct way. But I am using a servlet which uses the code listed in the previous comment (https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/selectbox-with-dynamic-dat...).

regards

Reini

[MohitKumarK]

Hi @Reini- ,

Can you share how the values are saved in component node (crx/de).

Thanks!

[Reini-]

Hi,

this depends on the value of "composite" property. If the property is set to "true" then the selected items are saved this way:

+ component
  + selectBoxValues
    + item0
      - selectBoxValues = "value1"
    + item1
      - selectBoxValues = "value2"

If composite=false, then the values are saved this way:

+ component
  - selectBoxValues = ["value1", "value2"]

For me it seems to be exactly the same behaviour compared when I am using "static items" instead of the datasource.

regards

Reini