Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 2

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)

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

5 Replies

Avatar

Community Advisor

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 ?

Avatar

Level 2

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. 

Avatar

Correct answer by
Community Advisor

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.

Avatar

Community Advisor

Hi,

 

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

 

Hope this helps.

 



Esteban Bustamante

Avatar

Level 2

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.