AEM 6.3 Coral touch ui pathfield for multiple values using javascript

[srinivas_chann1]

Hi,

I am using  the below coral pathfield ,please let me know how  could i set the value of pathfield using javascript for multiples values .Which must show cross (X) for each value in the UI.

I have the below sample dam path array

Current behavior on UI

var pathArray=["/content/dam/path1","/content/dam/path2"];

If i just do $("#setpathid").val(pathArray);

  it shows on the UI with /content/dam/path1,/content/dam/path2

It shows both the paths added together.

Expected behavior on UI

But i would want it display individual path separately as (X) /content/dam/path1 (X)/content/dam/path2. 

<path

granite:id="setpathid"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

fieldLabel="Select Dam Path"

name="spreadSheetPath"

multiple="{Boolean}true"

rootPath="/content/dam">

</path>

Please let me know how to achieve it

Thanks

[srinivas_chann1 · Accepted solution]

I got the fix details below

To set the multiple path:-

var pathArray=["/content/dam/path1","/content/dam/path2"];

for (var j = 0; j < pathArray.length; j++){

           $('#setpathid').find('coral-taglist').append('<coral-tag value="'+pathArray[j]+'"><coral-tag-label >'+pathArray[j]+'</coral-tag-label></coral-tag>');

To get the multiple paths:-

If the form had

granite:id="path-update-form"

Then

var formPathUpdateInput = $("form#path-update-form").find("input[name='spreadSheetPath']");

var multiPathValue = formPathUpdateInput.map(function() {

            return $(this).val();

        }).get();

Then you could send this values to java code from javascript using ajax

JSON.stringify(multiPathValue)