Render AEM Site Actions Dynamically using render conditions

Avatar

Avatar
Validate 1
Level 1
jithinkumar
Level 1

Like

1 like

Total Posts

5 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
jithinkumar
Level 1

Like

1 like

Total Posts

5 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
jithinkumar
Level 1

02-03-2020

I have created a custom page action button.
I need to show the Action button only when author is on a particular path in sites(http://localhost:4502/sites.html/content) view and hide otherwise. For example: i want this button only displayed when user is at any of the child pages of (http://localhost:4502/sites.html/content).
I tried using render condition for this - https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/path-rendercondition...
But the issue is that render condition is getting evaluated only when page is refreshed.

Is there a way i can either force re render the action bar in sites view and invoke the render condition every time user select a page in sites view ? without reloading the page

View Entire Topic

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

02-03-2020

@jithinkumar,

In the way of serverside render, you can:

1. Create a component with a one to one relationship with a Sling Model.

2. The Sling Model will expose a property of "isChildPage", and is evaluated within the logic of the Sling Model.

 

@Model(adaptables=Resource.class)
public class MyModel {
    
    @Getter
    private boolean isChildPage = false;
    
    @PostConstruct
    protected void initComponent() {
         // pseudo-code
         // if currentPage.path equals to CONST.CHILD_PAGE_PATTERN
         // isChildPage = true;
    }
}

 

3. Simply add logic into your HTL Sightly as (wcmmode.edit means that you are in author):

 

<div data-sly-test="${wcmmode.edit}" data-sly-use.mymodel="sling.models.MyModel">
     <a data-sly-test="${!mymodel.isChildPage}" href="/parent.html">
            Parent Page
      </a>
     <a data-sly-test="${mymodel.isChildPage}" href="/child-page.html">
            Child Page
      </a>
</div>

 

4. Don't forget to apply Sling Model Unit Tests: https://sourcedcode.com/aem-sling-models-unit-test-junit-4-with-examples
I hope this helps.