How to Pass Data Parameters to Sling Modal from Sightly HTL Component

You can pass data parameters from Sightly HTL component to the Sling Model backend by request attributes. For implementation, utilising the org.apache.sling.models.annotations.Model, we will add required options parameter, adaptable, with the value of SlingHttpServletRequest.class. Next, we can utilize the annotation, org.apache.sling.models.annotations.injectorspecific.RequestAttribute (@RequestAttribute), which will find the matching name of the attribute that is being passed from the Sightly HTL component.

As developers. We learn best by example, See the example below of an example of Sightly HTL component referencing to the Sling Model backend.

I created the code below to showcase a real production scenario. After a selection from the TouchUI pathfinder, we are given a path of /content/sourcedcode/en/home. From sightly, we must append a .html, but when the path was not chosen with the TouchUI pathfinder with the value set manually to https://sourcedcode.com, no .html extensions should be added.

This example below showcases how we can logically insert the .html extensions based on conditions.

Sightly HTL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// expect /content/sourcedcode/home.html
<a class="title-text" data-sly-use.linkResolve="${'com.sourcedcode.core.utils.use.LinkResolve' @ href='/content/sourcedcode/home'}" href="${linkResolve.href}" target="${linkResolve.target}" rel="noopener">
    ${linkResolve.href}
</a>
<br/>
// expect https://sourcedcode.com
<a class="title-text" data-sly-use.linkResolve="${'com.sourcedcode.core.utils.use.LinkResolve' @ href='https://sourcedcode.com'}" href="${linkResolve.href}" target="${linkResolve.target}" rel="noopener">
    ${linkResolve.href}
</a>
// expect https://sourcedcode.com
<a data-sly-use.linkResolve="${'com.sourcedcode.core.models.LinkResolve' @
   href=properties.href,
   target=properties.target}" href="${linkResolve.href}" target="${linkResolve.target}" rel="noopener">

    ${linkResolve.href}
</a>

Sling Model Class : LinkResolve.class

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
40
41
42
43
package com.sourcedcode.core.models;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional;
import org.apache.sling.models.annotations.injectorspecific.RequestAttribute;

import javax.annotation.PostConstruct;
import java.util.regex.Pattern;

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

    @RequestAttribute
    private String href;

    @Optional
    @Default(values="_self")
    @RequestAttribute
    private String target;

    @PostConstruct
    public void init() {
        if (href == null || href.isEmpty())
            return;

        boolean isLinkExternal = Pattern.compile("^https?://.*").matcher(href).matches();
        boolean isLinkInternalAsset = Pattern.compile(".*\\.(\\w){1,5}$").matcher(href).matches();

        if (!isLinkExternal && !isLinkInternalAsset) {
            href = (href.endsWith(".html") || href.contains("?")) ? href : href + ".html";
        }
    }

    public String getHref() {
        return href;
    }

    public String getTarget() {
        return target;
    }
}

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