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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

sai_kumart66079
Level 2
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
Techaspect_Solu
Correct answer by
Level 7
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

0 Replies
smacdonald2008
Level 10
Level 10

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

Endoriel
Level 3
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

Techaspect_Solu
Correct answer by
Level 7
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