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
<advancedSettings
    jcr:primaryType="nt:unstructured"
    jcr:title="Advanced Settings"
    sling:resourceType="granite/ui/components/coral/foundation/container"
    margin="{Boolean}true">
    <items jcr:primaryType="nt:unstructured">
        <renderLayoutAs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                fieldDescription="Forcing the component to render column layouts as"
                fieldLabel="Render Layout As"
                name="./renderLayoutAs">
            <items jcr:primaryType="nt:unstructured">
                <oneColumn
                    jcr:primaryType="nt:unstructured"
                    text="Default (One Column)"
                    selected="{Boolean}true"
                    value="oneColumn"/>
                <twoColumns
                    jcr:primaryType="nt:unstructured"
                    text="Two Columns"
                    selected="{Boolean}true"
                    value="twoColumns"/>
                <threeColumns
                    jcr:primaryType="nt:unstructured"
                    text="Three Columns"
                    value="threeColumns"/>
                <fourColumns
                    jcr:primaryType="nt:unstructured"
                    text="Four Columns"
                    value="fourColumns"/>
            </items>
        </renderLayoutAs>
    </items>
</advancedSettings>

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;
            }  
        }
    }
}

Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.

Leave a Reply

Your email address will not be published. Required fields are marked *


Back To Top