Category Archive for "AEM"

AEM TouchUI dropdown mandatory validation

Christoph Thommen

In AEM 6.2, there is no mandatory validation for dropdowns in dialogs, when having a “Please select” option in place. This is due to a validation check in the out of the box AEM validator which does a check for “value != null”, which is not the case when having a “Please select” option (value would just be a blank String).

There is currently no other option then implementing a custom validation. This requires the following steps:

  1. Create a new clientlib with the following configuration
  2. Add the following JavaScript to this clientlib. This JS validates all select fields with a specific property set (see step 3)
  3. To mark select fields as required (and enable this validation), put the property validation=”select.required” on it:

TouchUI Page Properties encoding issue with AEM 6.2 CFP3

Christoph Thommen

While implementing a new website based on AEM 6.2 CFP3 for a customer, we faced the following problem:

When editing page properties right from “Sites” > “View Properties”, the encoding of special characters got lost/wrong. When editing the same page from via “Edit” > “Page Properties”, everything worked well.

This resulted in corrupt data:

The reason for this problem: In the “View Properties” dialog, the _charset_ property is missing which is required by AEM to determine the proper encoding of the submitted form data.

There is an easy fix for this:

By adding a hidden field named “_charset_” to the page properties dialog with the value “utf-8”, the problem is solved:


AEM 6.2 Image Upload Dialogs

Ben Zahler

When migrating to AEM 6.2 (we’re using SP1), the dialog for uploading images (or any other file) may not work with your existing configuration.

Affected are dialog items with sling:resourceType=”granite/ui/components/foundation/form/fileupload”.

The fix is very easy: Simply add this property to the configuration node:

In the documentation Adobe describes field uploadUrl as “The URL where to upload the file, you can use ${suffix.path} to use the current suffix”. It seems that value ${suffix.path} is what you need to put to get the default behavior.

However, there is another catch: in our tests, setting the image/file upload to mandatory breaks the functionality.
To make it work, remove the following property if present:

Hopefully, Adobe will fix this soon…

here is a full configuration of the upload item that works for us:

Why components are not shown the in CoralUI Component Browser

Christoph Thommen

When developing new components in AEM 6.0/6.1 for the new CoralUI frontend you might end up in components not beeing shown in the Component Browser, even if they would be allowed to place on the current page based on the Design configuration.

When are components shown in the Component Browser / Sidekick?

  1. Component is allowed to be placed on the current page (Design configuration)
  2. Component is not hidden
  3. Component has a Dialog OR
  4. Component has a cq:editConfig

Why are components that are matching the criteria not shown in AEM 6.1 Coral UI

Components which are allowed to be placed on the page, are not hidden and do have a valid cq:dialog configuration (CoralUI dialog configuration), will not be shown in the Component Browser nor in the Sidekick. The reason for that is:

The Component Browser is still looking for the existence of the (“old”) extJS dialog.xml configuration. If there is no dialog.xml configuration, the component won’t be shown in the list.

How to resolve this issue

Instead of creating a dialog.xml which will never be used, a simple cq:editConfig can be created to make the components visible again:


Do you need assistance in upgrading to CoralUI or a new AEM version? Just let us know!

Limiting allowed cq:tags-path within namespaces

Christoph Thommen

A common issue when working with CQ tags is the lack of possibility to limit the user entering only specific trees of tags within a namespace in a specific TagInputField.


We have a tag structure like:

  • /etc/tags/search/keyword/…
  • /etc/tags/search/client/…
  • /etc/tags/search/…/…

Now we want the user to enter keywords (and only keywords) in the page property field “Keywords”.

The issue we’re no facing is, that in CQ only allowed namespaces can be limited, but not paths inside a namespace.


To solve this, the following listener attached to the TagInputField in the dialog.xml might help:

This listener is fired each time a tag is added to the TagInputField. The listener checks if the tag is located inside the desired path (in our case “/keyword”). If not, it will be removed again immediately.


This is a really easy way to restrict TagInputField to certain tag paths.

CQ5 / AEM: Simulating Publish on Author

Christoph Thommen

For the first blog post, we have something small but quite handy:

Some components in CQ are administered in one place and displayed in multiple places.

This post shows how you can display a section of content without the authoring capabilities to improve the author experience.
At the same time, we omit any html decoration tags usually included on the author, this often makes it easier to make advanced html markup look nice on author.

To do this, we need two imports in our jsp file:

Then, before the section to be displayed like on publish, place the following code:

To revert back to regular author mode, add this piece of code: