Search code examples
aemsightly

Getting properties from AEM multifieldpanel dialog stops working when a second entry is added

I have created an AEM Dialog which prompts the user for a set of links and labels. These links and labels are stored in a jcr node and are used to generate a menu.

To avoid having to create a custom xtype, I am using the acs-commons multifieldpanel solution, which enables me to nest children under the fieldConfig node.

This works great with only 1 Label/Link pair, but when I add a second one - the property cannot be fetched anymore, since instead of a String, it returns the String hashcode.

The property generated by the multifieldpanel in the jcr node is of type String and is filled correctly when inspecting in CRXDE. The problem occurs when I try to fetch the value from within a Sightly HTML file.

Code

Dialog: AEM Dialog

Definitions.js:

"use strict";

use(function () {
  var CONST = {
    PROP_URLS: "definitions",
  };

  var json = granite.resource.properties[CONST.PROP_URLS];
  log.error(json);

  return {
    urls: json
  };
});

Log output

1 element in multifieldpanel

jcr node variable content

  • definitions: {"listText": "facebook", "listPath": "/content/en"}

log output

  • {"linkText":"facebook","linkPath":"/content/en"}

Multiple elements in multifieldpanel

jcr node variable content

  • definitions: {"listText": "facebook", "listPath": "/content/en"},{"listText": "google", "listPath": "/content/en"}

log output

  • [Ljava.lang.String;@7b086b97

Conclusion

Once the multifieldpanel has multiple components and stores it, when accessing the property the node returns the String hashcode instead of the value of the property.

A colleague has pointed out that I should use the MultiFieldPanelFunctions class to access the properties, but we are using HTML+Sightly+js and are trying to avoid .jsp files at all cost. In JavaScript, this function is not available. Does anyone have any idea how to solve this issue?

Solution

  • That is because, when there is a single item in the multifield, it returns a String, where as it returns a String[] when there is more than a single item configured.

    Use the following syntax to read the property as a String array always.

    var json = granite.resource.properties[CONST.PROP_URLS] || [];

    Additionally, you can also use TypeHints to make sure your dialog saves the value as String[] always, be it single item or multiple items that is configured.