Customize Asset share commons

[HarishDv]

Hi Guys,

I am using AEM 6.3.1 and the feature pack for Asset share commons .

I have some custom requirements to add some additional filter components (with "type ahead" and some Business logic) .

Moreover would also like to extend the Search functionality to point to an external SOLR system etc.

I was not able to find any good online materials on this topic.

Can anyone share the details if already done or share links to some detailed information .

Thanks

Harish

[kautuk_sahni]

Checking this with the internal expert!!

[davidjgonzalezz · Accepted solution]

Hi!

First a quick correction; Asset Share Commons [1] is not a Feature Pack but rather an open source project; just want to make sure thats clear.

1) Creating an additional filter component with type-ahead; you're best best is to look at the Search Bar component implementation [2] [3] [4]. In alot of ways this would be a custom component. I think you'd want to do something like:

  * Create custom component like Search Bar

  * Create JS for the component to make the AJAX calls/etc.

  * Not understanding all your use cases; but you may want to create a new SearchProvider implementation that collects and returns the "type ahead" results. Note, this could be fairly complex and probably one of the most advanced things you can implement in ASC.

2) With to searching SOLR ... im not sure this will really work. ASC's Search is tightly tied to AEM QueryBuilder syntax. If you want some other syntax, you'd have to rewrite all the Search component or somehow transform QB syntax to Solr syntax. Likewise you would need a totally new SearchProvider impl to have it search SOLR for data, I also expect youll have a number of problems with results/computed properties, since their implementation assumes theyre backed by an AEM Asset (dam:Asset).

TL;DR - Asset Share Commons is tightly coupled w AEM QueryBuilder and AEM Assets (dam:Assets); diverging from these paradigms will be highly problematic, and i doubt a good idea.

[1] GitHub - Adobe-Marketing-Cloud/asset-share-commons: A modern, open-source asset share reference impl...

[2] Search Bar | Asset Share Commons

[3] asset-share-commons/FulltextPredicateImpl.java at develop · Adobe-Marketing-Cloud/asset-share-common...

[4] asset-share-commons/ui.apps/src/main/content/jcr_root/apps/asset-share-commons/components/search/sea...

[digarg31]

Some additional inputs that might be of help :

Semantic UI dropdown - check country selection dropdown in below link

https://semantic-ui.com/modules/dropdown.html#/definition

You can type and it would show filter options matching with your inputs. We implemented something similar for keywords filter search. Helps user experience when there is a long list of options like tags.

Code snippet tags->templates/options.html 

/ui.apps/src/main/content/jcr_root/apps/<project>/components/search/tags/templates/options.html

<!--/* Checkbox Template also renders Radio, Toggle, and Slide formats */-->
<template data-sly-template.checkbox="${ @ predicate}">
<div class="${predicate.isExpanded ? 'active' : ''} title right">
<i class="dropdown icon"></i> ${predicate.title}
</div>
<div class="${predicate.isExpanded ? 'active' : ''} content field"
data-asset-share-id="${predicate.id}__fields"
data-asset-share-update-method="${predicate.componentUpdateMethod}">
<div class="grouped fields"
data-sly-list.option="${predicate.items}">
<div class="field">
<div class="ui ${predicate.subType} checkbox">
<input for="${predicate.id}"
form="${predicate.formId}"
type="${predicate.subType == 'checkbox' ? 'checkbox' : 'radio'}"
name="${predicate.group}.${predicate.name}.${predicate.subType == 'checkbox' ? optionList.index : '0'}_${predicate.valuesKey}"
value="${option.value}"
checked="${option.selected}"
disabled="${option.disabled}"
data-asset-share-search-on="${predicate.autoSearch ? 'change' : ''}"/>
<label>${option.text}</label>
</div>
</div>
</div>
</div>
</template>
<!--/* Dropdown Template - renders a dropdown */-->
<template data-sly-template.dropdown="${ @ predicate}">
<div class="${predicate.isExpanded ? 'active' : ''} title right">
<i class="dropdown icon"></i> ${predicate.title}
</div>
<div class="${predicate.isExpanded ? 'active' : ''} content field">
<select class="ui fluid search dropdown"
name="${predicate.group}.${predicate.name}.${predicate.valuesKey}"
value="${predicate.intialValue}"
form="${predicate.formId}"
for="${predicate.id}"
data-asset-share-search-on="${predicate.autoSearch ? 'change' : ''}"
data-asset-share-id="${predicate.id}__fields"
data-asset-share-update-method="${predicate.componentUpdateMethod}" multiple="">
<option value="">${predicate.title}</option>
<sly data-sly-list.optionItem="${predicate.items}">
<option value="${optionItem.value}"
disabled="${optionItem.disabled}"
selected="${optionItem.selected ? 'selected' : ''}">
${optionItem.text}
</option>
</sly>
</select>
</div></template>