AEM Granite Render Conditions

Photo by Muesli on Unsplash

A Granite Render Condition is a way of conditionally rendering a component in an AEM Touch UI dialog.

There are many situation where you might want to conditionally display an element of a dialog. Some examples are:

  • Displaying a field depending on the user group
  • Displaying a field depending on the page path
  • Displaying a field if the page is active

Out of the Box Render Conditions

AEM provides several OOTB render conditions that might be enough for your needs where the (probably) most used is the Simple render condition /libs/granite/ui/components/coral/foundation/renderconditions/simple

Using Simple Render Condition

<?xml version="1.0" encoding="UTF-8"?>
...
<text
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Text"
  name="./text">
    <granite:rendercondition
      jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/renderconditions/simple"
      expression="${granite:containsIgnoreCase(requestPathInfo.suffix, '/foo/bar')}"/>
</text>
...

In the example above the text field will only show if your url suffix ends in /foo/bar. e.g. http://localhost:4502/content/mysite/mypage.html/foo/bar

Custom Render Condition

Let’s create an example where you want to provide a list of user groups that can see/edit the field.

The examples in AEM use JSPs, however my recommendation is not to use JSPs as there are many disadvantages in the long run.

OOTB render conditions
OOTB render conditions

First let’s create a Sling Model.

@Model(adaptables = SlingHttpServletRequest.class)
public class UserGroupRenderCondition {

    @Self
    private SlingHttpServletRequest request;

    @SlingObject
    private ResourceResolver resourceResolver;

    @ValueMapValue
    private String groups;

    @PostConstruct
    public void init() {
        List<String> allowedGroups = Arrays.asList(groups.split(","));
        UserManager userManager = resourceResolver.adaptTo(UserManager.class);
        if (userManager == null) {
            return;
        }
        boolean belongsToGroup = false;
        try {
            Authorizable currentUser = userManager.getAuthorizable(resourceResolver.getUserID());
            Iterator<Group> groupsIt = currentUser.memberOf();
            while (groupsIt.hasNext()) {
                Group group = groupsIt.next();
                String groupId = group.getID();
                if (allowedGroups.stream().anyMatch(g -> g.equals(groupId))) {
                    belongsToGroup = true;
                    break;
                }
            }
        } catch (RepositoryException e) {
            //LOG error
        }
        request.setAttribute(RenderCondition.class.getName(),
            new SimpleRenderCondition(belongsToGroup));
    }
}

Now , let’s call the model in the HTL.

Create the following structure:

/apps/mysite
          /renderconditions (nt:folder)
                         /user-group (nt:folder)
                                 /user-group.html (nt:file)

Then update user-group.html

<sly data-sly-use="com.mycompany.mysite.rendercontions.models.UserGroupRenderCondition"></sly>

Finally, update the render condition on your dialog:

<granite:rendercondition
  jcr:primaryType="nt:unstructured"
  sling:resourceType=“mysite/renderconditions/user-group”
  groups=“content-authors,admin”/>

You’ll see that the textfield only appears if you’re an admin or part of the Authors group.

Hope this was helpful. Get in touch on LinkedIn or leave comments for any questions or suggestions.

Leave a Reply