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?
smacdonald2008 Arun Patidar Techaspect Solutions
Regards,
Sai kumar
Solved! Go to Solution.
Views
Replies
Total Likes
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:
Selection field properties:
Path browser properties:
Component :
Root path set as per the selection :
Hope this helps!
Views
Replies
Total Likes
As you suggested - OOTB - the value is a String - does not accept a String[]. I do not think this is possible.
Views
Replies
Total Likes
Would this help? ContextualPathBrowser
Otherwise I suggest looking into implementing a custom predicate or a JavaScript solution. There are some suggestions in here
Views
Replies
Total Likes
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:
Selection field properties:
Path browser properties:
Component :
Root path set as per the selection :
Hope this helps!
Views
Replies
Total Likes
Great response!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies