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

Question

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 cases, 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 throws an exception (i've tried forcing it to https, but it still fails saying 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 redirect 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 apppropriate 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?

Answer 1

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)

For a bit more detail on when to use query params over selectors, check out this post: http://www.citytechinc.com/us/en/blog/2013/08/apache-sling-selectors-request-parameters.html