Customize Asset share commons | Adobe Higher Education
Skip to main content
H
HarishDv
Level 2
February 26, 2018
Beantwortet

Customize Asset share commons

  • February 26, 2018
  • 3 Antworten
  • 4196 Ansichten

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

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von davidjgonzalezzzz

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 implementation built on …

[2] Search Bar | Asset Share Commons

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

[4] asset-share-commons/ui.apps/src/main/content/jcr_root/apps/asset-share-commons/components/search/search-bar at develop ·…

3 Antworten

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
February 27, 2018

Checking this with the internal expert!!

Kautuk Sahni
D
Adobe Employee
davidjgonzalezzzzAdobe EmployeeAntwort
Adobe Employee
February 27, 2018

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 implementation built on …

[2] Search Bar | Asset Share Commons

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

[4] asset-share-commons/ui.apps/src/main/content/jcr_root/apps/asset-share-commons/components/search/search-bar at develop ·…

    D
    Adobe Employee
    digarg17Adobe Employee
    Adobe Employee
    June 20, 2022

    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>

     

      Allgemeine NutzungsbedingungenAccessibility statement

      Loading footer...