AEM 6.3 Coral touch ui pathfield for multiple values using javascript | Community
Skip to main content
srinivas_chann1
srinivas_chann1
Level 7
December 5, 2019
Solved

AEM 6.3 Coral touch ui pathfield for multiple values using javascript

  • December 5, 2019
  • 1 reply
  • 2562 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by srinivas_chann1

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)

1 reply

srinivas_chann1
srinivas_chann1AuthorAccepted solution
Level 7
December 6, 2019

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)

Terms & ConditionsAccessibility statement

Loading footer...