May 22, 2020
Estimated Post Reading Time ~

Is it possible to switch to Sling Selector Script based on page property

In an AEM Sightly component, which has two modes; gallery and directory. The directory view is implemented with a selector (/apps/mi-proj/people_list/directory.html).

By default the component renders in a gallery mode (using people_list/people_list.html). Users would like the ability to choose which view is shown by default. In either case, users can toggle between the views.

Example paths assuming the content sling:resourceType = people_list:

/content/mi-proj/people.html (people_list.html)
/content/mi-proj/people.gallery.html (people_list.html)
/content/mi-proj/people.directory.html (directory.html)
The users have a checkbox in the component dialog to select directory as the default. Both views use the same WCMUse Java class, which call this.getResponse().sendRedirect(redirectPath) if the default directory property is set.

private void forwardToDirectory(String selector){
    String redirectPath;
    redirectPath = String.format("%s.%s.html", this.getCurrentPage().getPath(), selector);          
    try {
        this.getResponse().sendRedirect(redirectPath);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}
The redirect works okay on my localhost and dev tier. But problems arise when rendering the page within AEM's content finder page (cf#), /cf#/content/mi-proj/people.html

It places the page in a big iframe. For some reason the iframe scheme (http) does not match the request (https) for the redirect, so the browsers throw an exception (I've tried forcing it to https, but it still fails to say the https scheme doesn't match the iframe scheme, data)... it seems I need to work around this and do away with the redirect...

I didn't like forcing the 302 redirects anyway and would prefer to do something to handle it on the backend... Here's the process I want to write...

if directoryDefault == true || selector == 'directory'
    use directory.html
else 
    people_list.html
My only idea is to refactoring/renaming the scripts (calling them gllry.html and drcty.html). Check the selector from people_list.html, then data-sly-include the appropriate script. But that's not using the sling resolution for selectors, and I might as well as switch to query params...

So my question is, is there some way to make the component use the selector script even if the request does not have the selector?

Best How To:
I think your idea is on the right track, based on my assumption that "users" (from, "Users would like the ability to choose which view is shown by default") is referring to authors as opposed to end-users of the site.

In people_list.html, check the property and render in directory mode if set by including directory.html. Otherwise, include gallery.html:

<div data-sly-test.directoryDefault="${properties.directoryDefault == true}" data-sly-unwrap>
    <div data-sly-include="directory.html" data-sly-unwrap />
</div>
<div data-sly-test="${!directoryDefault}" data-sly-unwrap>
    <div data-sly-include="gallery.html" data-sly-unwrap />
</div>

You can still access either view using selectors, regardless of the property value:
/content/mi-proj/people.html (gallery.html or directory.html)
/content/mi-proj/people.gallery.html (gallery.html)
/content/mi-proj/people.directory.html (directory.html)


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.