Pathbrowser conponent coralui

[sr508]

Hi,

I am building a component with coralui.

It consists of multifeild in the front end ui.

I have referred the coralui components markup  available used it.

Inside multifeild I am having a pathbrowser .

Problem:::

The path browser loaded initially for first time is working properly.

When I click on addfeild of multifeild feild component the pop-up of path browser is not working.

FINDINGS::

My findings are ,

- Pathbrowser register on the page load.

- when a new pathbrowser ui is added at later     point dynamically , the registration wont happen   and the pop-up don't open.

-I have tried to override the coraljs methods for the pathbrowser registration on click of add field .

But it didn't work out.

Now, I need a way to add the pathbrowser ui when click on the addfeild.

Note: I am not working with dialog . I am purely using the coral ui classes and html for the component.

[arunpatidar]

Hi,

what did you added inside Multifield. Are you getting any console error while clicking on Add field.

I'll try from my end.

I believe you've added something like below inside Multifield.

<foundation-autocomplete class="coral-Form-field" name="./linkUrl" pickersrc="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/picker.html?_charset_=utf-8&amp;root=%2f&amp;filter=hierarchyNotFile&amp;selectionCount=single" data-foundation-validation="" role="combobox"><div class="foundation-autocomplete-inputgroupwrapper"><div class="coral-InputGroup"><input is="coral-textfield" class="coral-Textfield coral-InputGroup-input" autocomplete="off" placeholder="" aria-invalid="false"><span class="coral-InputGroup-button"><button is="coral-button" class="coral-Button coral-Button--secondary" size="M" variant="secondary" title="Open Selection Dialog" type="button" aria-label="Open Selection Dialog"><coral-icon class="coral-Icon coral-Icon--sizeS coral-Icon--select" icon="select" size="S" role="img" aria-label="select"></coral-icon><coral-button-label></coral-button-label></button></span></div></div>

    <coral-overlay foundation-autocomplete-suggestion="" class="foundation-picker-buttonlist coral-Overlay" data-foundation-picker-buttonlist-src="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/suggestion{.offset,limit}.html?_charset_=utf-8&amp;root=%2f&amp;filter=hierarchyNotFile{&amp;query}" aria-hidden="true" style="display: none;"></coral-overlay>

    <coral-taglist foundation-autocomplete-value="" name="./linkUrl" class="coral-TagList" role="listbox" aria-live="off" aria-atomic="false" aria-relevant="additions" aria-disabled="false" aria-invalid="false" aria-required="false"><coral-tag value="/content/AEM63App/en/community" class="coral-Tag coral-Tag--large" tabindex="0" closable="" role="option" aria-selected="false" aria-label="Remove /content/AEM63App/en/community"><button is="coral-button" class="coral-Button coral-Button--minimal coral-Tag-removeButton" size="M" variant="minimal" handle="button" type="button" icon="close" iconsize="XS" title="Remove" tabindex="-1" coral-close="" aria-hidden="true"><coral-icon class="coral-Icon coral-Icon--close coral-Icon--sizeXS" icon="close" size="XS" role="img" aria-label="close"></coral-icon><coral-button-label></coral-button-label></button><coral-tag-label class="coral-Tag-label" aria-hidden="true">/content/AEM63App/en/community</coral-tag-label><input handle="input" type="hidden" name="./linkUrl" value="/content/AEM63App/en/community"></coral-tag><object aria-hidden="true" tabindex="-1" style="display:block; position:absolute; top:0; left:0; height:100%; width:100%; opacity:0; overflow:hidden; z-index:-100;" type="text/html" data="about:blank">​</object></coral-taglist><input class="foundation-field-related" type="hidden" name="./linkUrl@Delete"></foundation-autocomplete>

[sr508]

Hi arun,

I have referred the Documentation | CoralUI for mutlifield.

Following is the code i have used in my jsp,

<coral-multifield>

  <coral-multifield-item>

<div class="multi-custom--coralPath" id="multifield--pathbrowser0">

                      <label class="coral-Form-fieldlabel coral-Form--Path">Enter Path</label>

                     <span data-init="pathbrowser"  data-root-path="/" data-option-loader="" data-picker-src="/libs/wcm/core/content/common/pathbrowser/column.html?predicate=hierarchyNotFile" data-crumb-root="">

                     <input class="coral-InputGroup-input coral-Textfield js-coral-pathbrowser-input ng-pristine ng-valid custom-selected-pathbrowser0" placeholder="Enter path to resource" type="text" name="path0" value="/content" autocomplete="off" aria-owns="coral-1" ng-model="app.resource" ng-change="dirty()" ng-blur="blur()" id="coral-2" aria-haspopup="true" aria-expanded="false" >

                     <button class="coral-Button coral-Button--secondary coral-Button--square js-coral-pathbrowser-button" type="button" title="Browse">

                     <i class="coral-Icon coral-Icon--sizeS coral-Icon--folderSearch"></i>

                     </button>

                     </span>

                      </div>

  </coral-multifield-item>

  <button coral-multifield-add type="button" is="coral-button" id="multifield-path--button">Add a field</button>

  <template coral-multifield-template>

      <div class="multi-custom--coralPath--child">

<label class="coral-Form-fieldlabel coral-Form--Path">Enter Path</label>

                     <span data-init="pathbrowser"  data-root-path="/" data-option-loader="" data-picker-src="/libs/wcm/core/content/common/pathbrowser/column.html?predicate=hierarchyNotFile" data-crumb-root="">

                     <input class="coral-InputGroup-input coral-Textfield js-coral-pathbrowser-input ng-pristine ng-valid custom-selected-pathbrowser" placeholder="Enter path to resource" type="text" name="pathSelected" value="/content" autocomplete="off" aria-owns="coral-1" ng-model="app.resource" ng-change="dirty()" ng-blur="blur()" id="coral-2" aria-haspopup="true" aria-expanded="false" >

                     <button class="coral-Button coral-Button--secondary coral-Button--square js-coral-pathbrowser-button" type="button" title="Browse">

                     <i class="coral-Icon coral-Icon--sizeS coral-Icon--folderSearch"></i>

                     </button>

                     </span>

      </div>

  </template>

</coral-multifield>

I don't see any console error also.

[sr508]

Hi Arun,

I am using aem 6.2 instance.

Pathfield is not available in the path granite/ui/content/coral/foundation/form/pathfield .

[arunpatidar]

ok, I'll check and get back to you if get something.