'How to introduce additional fields with default values in AEM Touch UI dialogs?

Situation:

We have an AEM 6.4 Touch UI dialog and a number of existing component instances that were created through this dialog.

Now we want to add an additional boolean property (checkbox) to the dialog.

The default value of the new property should be true / checked.

Expected Result:

When an editor opens the updated dialog for an existing component, I would expect that the dialog shows the new checkbox checked since this is the default and the JCR contains no value for existing components.

Actual Result:

The dialog shows the checkbox unchecked for an existing component that has no value for this property in the JCR.

Surprisingly, the dialog shows the checkbox checked for a freshly created component!

Any ideas? Thanks.

Snippet of the checkbox inside the .content.xml file below.

<newProperty
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  checked="{Boolean}true"
  name="./newProperty"
  text="The recently added new property"
  uncheckedValue="{Boolean}false"
  value="{Boolean}true"
/>
adobeaemaem-touch-ui


Solution 1:[1]

It certainly will require a JS validation, since the absence of the value is falsy for the dialog.

Solution 2:[2]

Your example should always work, no need for extra js or properties. When you say there is no existing 'value' for this property, do you mean this property is not there or it is empty? Because an empty property would still have a value, in this case an empty string, resulting in it being read as false and the checkbox being empty. A new componenty does not have this property, resulting in the default being shown. If this does not work as designed, could you extend your example by adding all current properties of the component?

Solution 3:[3]

@John Goofy - you just need to add below property

'ignoreData={Boolean}true'

then, your node becomes

<newProperty
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  checked="{Boolean}true"
  name="./newProperty"
  text="The recently added new property"
  uncheckedValue="{Boolean}false"
  value="{Boolean}true"
  ignoreData="{Boolean}true"
/>

please let me know, if it doesn't work for you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ronnyfm
Solution 2 YFrickx
Solution 3 raju muddana

Related Questions