granite/ui/components/coral/foundation/form/pathfield field should show only rootPath pages not its child pages after browsing the dialog pathfield

Question

have dialog field of type /granite/ui/components/coral/foundation/form/pathfield (field name : select PLP Pages) and rootpath:/content/my-project/PLP in a component . when author browse the pathfield(select PLP Pages) it navigates to the PLP root path(PLP). This PLP root page also have few child pages(Ex: PDP1,PDP2, PDP3...). Requirement is to limiting the browsing till rootpath only (Example /content/my-project/PLP) its child pages ( PDP1,PDP2, PDP3) of PLP should not be appeared for the author selection . Please share your thought. Thanks in Advance.

ENV (AEM as cloud service)

pulkitvashisth · Accepted Answer

Well in above image @sparwaiz
Your root path is not reflecting. If you have selected rootpath as en/products/equipment/snow-sports
Then your pathfield browse will start from after en/products/equipment/snow-sports means it will only show children of snow-sports
Which you do not want to select.
Now
1. If you just want to allow author to select just once path i.e. en/products/equipment/snow-sports then do not keep it a pathfield but just a checkbox. If user checks the checkbox, you can write logic in HTL to read path as en/products/equipment/snow-sports otherwise empty string.
2. If you do not want to keep rootpath as en/products/equipment/snow-sports and also do not want to show the children of snow-sports as well then to restrict user to certain level of paths you can add a validator to your pathfield

(function ($) {
    $(document).on("foundation-contentloaded", function() {
        var pathfield = $("coral-pathfield[name='./contentPath']");
        var allowedLevels = 3; // Define your allowed level here

        pathfield.on("change", function() {
            var path = pathfield.val();
            var level = path.split("/").length - 1;

            if (level > allowedLevels) {
                alert("You can only select paths up to level " + allowedLevels);
                // Clear the pathfield value or handle accordingly
                pathfield.val("");
            }
        });
    });
})(Granite.$);

Above make sure to replace the pathfield selector $("coral-pathfield[name='./contentPath']") as per your code.

pulkitvashisth · Answer

Hi @sparwaiz
Can you clear your use case once, do you want to allow to select just one path i.e. /content/my-project/PLP in your case?
Or like if the root path is /content/my-project/PLP you want to restrict the user to just 1 level of children under the root path i.e. children of PLP page ?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded