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

[sparwaiz]

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]

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 ?

[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? Yes Correct , Since I have used rootpath:/content/my-project/PLP so whenever author browser the pathfield it navigates to PLP page  and author also have options to choose its PLP child pages. I am looking for some way by which author could not select the  child pages of  root page(PLP) or hiding/disabling the child pages.

Attached image for your reference :

RootPath : Page highlighted in yellow color 

                 Child  Pages highlighted in blue color ( should be disable/hide or author can not be able to select after browsing the dialog pathfield. 

[pulkitvashisth · Accepted solution]

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.

[EstebanBustamante]

Hi,

You cannot achieve that with the out-of-the-box (OOTB) pathfield functionality. However, you have several options:

• Add a validator that prevents the selection of child pages and shows an error message. Check here: https://lucanerlich.com/docs/aem/dialog-validation/ https://aemlab.blogspot.com/2019/05/aem-touch-ui-component-dialog-field.html 

• Customize the pathfield to display only the first level of your pages. Check here: https://medium.com/activate-aem/loading-custom-js-in-an-aem-dialog-6b31e9a36743 

• Create your own widget that performs the required function. Check here: https://axamit.com/blog/adobe-experience-manager/customizingtouchuidialogs/ 

• Use a simple textField where the user directly sets the path.

Hope this helps.

[RahulBGPandey]

The path field is designed in such a way that you can limit selecting a page under a particular (given) hierarchy. and you can control the root node under which you want to restrict the selection but not the child level. 

To achieve your use case you will need to use something custom i.e. js validator.