Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to add multiple values for the rootpath in TouchUI path browser?

Avatar

Level 2

Hi Team,

There is a scenario in our project where we need to add multiple values to the root path element. Can you please suggest how this can be handled? Since the rootpath takes only String as the input and not the string array?

smacdonald2008Arun PatidarTechaspect Solutions

Regards,

Sai kumar

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi

Instead of enabling multiple root paths for a path browser, you can follow this alternate approach of choosing your desired root path from a selection list in your dialog.

On the basis of this selection, the root path of the pathbrowser can be set by writing a listener as follows:

function changePath() {

    var selectElement = document.querySelector('coral-select[name="./rootPath"]'),

        inputElement = document.querySelector('input[name="./path"]'),

        span = document.querySelector('span.coral-Form-field.coral-PathBrowser');

span.setAttribute('data-path-root', selectElement.value);

    inputElement.value = selectElement.value;

    selectElement.addEventListener('change', function() {

inputElement.value = selectElement.value;

span.setAttribute('data-path-root', selectElement.value);

    })

};

$(document).ready(function() {

$(document).on("dialog-ready", function() {

        changePath();

    });

});

Keeping in mind that rootPath and path are the “name” properties for the selection list and pathbrowser respectively.

I have added screenshots for the dialog and the component for your better understanding.

Dialog structure:

1565699_pastedImage_8.png

Selection field properties:

1565700_pastedImage_9.png

Path browser properties:

1565701_pastedImage_10.png

Component :

1565702_pastedImage_11.png

Root path set as per the selection :

1565703_pastedImage_12.png

Hope this helps!

TechAspect Solutions

View solution in original post

4 Replies

Avatar

Level 10

As you suggested - OOTB -  the value is a String - does not accept a String[]. I do not think this is possible.

Avatar

Level 3

Would this help? ContextualPathBrowser

Otherwise I suggest looking into implementing a custom predicate or a JavaScript solution. There are some suggestions in here

Avatar

Correct answer by
Level 7

Hi

Instead of enabling multiple root paths for a path browser, you can follow this alternate approach of choosing your desired root path from a selection list in your dialog.

On the basis of this selection, the root path of the pathbrowser can be set by writing a listener as follows:

function changePath() {

    var selectElement = document.querySelector('coral-select[name="./rootPath"]'),

        inputElement = document.querySelector('input[name="./path"]'),

        span = document.querySelector('span.coral-Form-field.coral-PathBrowser');

span.setAttribute('data-path-root', selectElement.value);

    inputElement.value = selectElement.value;

    selectElement.addEventListener('change', function() {

inputElement.value = selectElement.value;

span.setAttribute('data-path-root', selectElement.value);

    })

};

$(document).ready(function() {

$(document).on("dialog-ready", function() {

        changePath();

    });

});

Keeping in mind that rootPath and path are the “name” properties for the selection list and pathbrowser respectively.

I have added screenshots for the dialog and the component for your better understanding.

Dialog structure:

1565699_pastedImage_8.png

Selection field properties:

1565700_pastedImage_9.png

Path browser properties:

1565701_pastedImage_10.png

Component :

1565702_pastedImage_11.png

Root path set as per the selection :

1565703_pastedImage_12.png

Hope this helps!

TechAspect Solutions