How to access Design Dialogue Properties in Sling Model

Design Dialogs are especially useful for creating components that need to be easily configurable through editable template and policies without directly editing the underlying code. They enable a clear separation between content and presentation, allowing content authors to make changes without needing technical expertise. Design Dialogs are defined using the AEM Touch UI Dialog, which is an integral part of the component development process.

In this article we will talk through how to access the design dialogue settings that is configured in editable template policies within Sling Models. This article will be a quick reference, which means we will provide you code examples for the solution.

1. Example _cq_design_dialog.xml configuration

This is a snippet that resides in /apps/core/wcm/components/title/v1/title/_cq_design_dialog.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2. Accessing Design Dialog Properties in Sling Models:

In AEM, Sling Models provide a way to map resource properties to Java objects, making it easier to work with the content of a page. To access Design Dialog properties within a Sling Model, take a look at the example code below.

Take notice, in line:17, we are using Sling Model Specific Annotations, @ScriptVariable, to initiate the currentStyle object. In line:22, we are calling the get method() which is a public method, which here we will attempt to find configuration set via design dialog “renderLayoutAs”. If “renderLayoutAs” is not configured, then String renderLayoutAs == null. Finally in line:24, we will use a switch statement to execute code based on what is configured.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

package com.sourcedcode.core.internal.components;

import com.day.cq.wcm.api.designer.Style;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;

import javax.annotation.PostConstruct;
import javax.inject.Inject;

import static org.apache.commons.lang3.StringUtils.isNotEmpty;

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

private static final String RENDER_LAYOUT_AS_PROP = "renderLayoutAs";

@ScriptVariable
private Style currentStyle;

@PostConstruct
public void init() {
String renderLayoutAs = currentStyle.get(RENDER_LAYOUT_AS_PROP, String.class);
if (isNotEmpty(renderLayoutAs)) {
switch (renderLayoutAs) {
case "oneColumn":
break;
case "twoColumns":
break;
case "threeColumns":
break;
case "fourColumns":
break;
default:
System.out.println("Default case");
break;
}
}
}
}

Looking for Help? Or need a mentor?

If you need help to super drive your AEM career road map, you can hire me for a one-hour session on codementor.io; We can work together on a price works just for you. https://www.codementor.io/@briankasingli. I'd be happy to help you along your way to becoming a high-quality AEM full-stack engineer.

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

How to access Design Dialogue Properties in Sling Model