Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

11-03-2020

Working Solution 🙂 

Below piece of javascript can be used to dynamically show/hide action buttons in Granite UI.

Use case - Toggle display of an action button Dynamically when user selects a Page item in either column view/ List view or card view

 

$(window).load(function () {
    var BUTTON1 = ".cq-siteadmin-admin-actions-button1-activator",
        BUTTON2 = ".cq-siteadmin-admin-actions-button2-activator",
        ALLOWED_PATH_PREFIX = "/content/mysites",
        PATH_ATTRIBUTE = "data-granite-collection-item-id",
        doOnSelectionChange = function (whichSelector) {
            $(BUTTON1).parent().hide();
            $(BUTTON2).parent().hide();
            var selected = $(whichSelector).filter(function (index, page) {
                var path = page.getAttribute(PATH_ATTRIBUTE);
                return path.startsWith(ALLOWED_PATH_PREFIX) && page.selected;
            });
            if (selected.length === 1) {
                $(BUTTON1).parent().show();
                $(BUTTON2).parent().show();
            }
        };
    $(document).on('foundation-selections-change', function (e) {

        switch (e.target.tagName) {
            case "CORAL-MASONRY":
                doOnSelectionChange("coral-masonry-item");
                break;
            case "CORAL-COLUMNVIEW":
                doOnSelectionChange("coral-columnview-item");
                break;
            case "TABLE":
                doOnSelectionChange("tr.foundation-collection-item");
                break;
            default:
                return;
        }
    });
});