Seed Information Management

Enterprise Content Management Consultants ECM Experts

Customising Alfresco Live Search

By

When a user starts typing a search-term in the Alfresco Share Search Box on the main menu bar, a live search is executed and the result is shown in a drop down list.  By default the live search only searches for documents, people and sites. So in this blog we’ll show how to change the default behaviour so as to include a custom folder type (seed:folder)and also sort the drop down list to show our custom folder first.

Alfresco Live Search

There are 3 main itemss which are required to be modified for our customisation and these are as follows;

  • Live Search Document Repository Webscript
  • Search Box Widget
  • Alfresco Share Main Menu

Live Search Document Repo Webscript

The live search document webscript is called when a user starts typing in the Search Box. So we first need to override the default live search document webscript  located in alfresco-share-sevices jar.

We added the default webscript to  /alfresco/extension/templates/webscripts/org/alfresco /slingshot/search package in our maven repo project and then made the following changes;

  • The getDocResults method in live-search.lib.js was modified so as to search for seed:folder type folders besides just cm:content
var ftsQuery = params.term + ' AND (+TYPE:"cm:content" OR +TYPE:"seed:folder")';
  • The getDocResults method was modified as shown below so as to also sort the result firstly based on seed:folderIndex property and secondly on cm:name.
var sort1 =  {
   column: "@{https://seedim.com.au/model/content/1.0}folderIndex",
   ascending: false
};
var sort2 = {
   column: "@{http://www.alfresco.org/model/content/1.0}name",
   ascending: false
};
var queryDef = {
  query: ftsQuery,
  language: "fts-alfresco",
  sort:[sort1,sort2],
  templates: getQueryTemplate(),
  defaultField: "keywords",
  defaultOperator: operator,
  onerror: "no-results",
  page: {
    maxItems: params.maxResults,
    skipCount: params.startIndex
  }
};
  • The getDocumentItem method in live-search.lib.js was modified as shown below to return the container type and path
if(node.isContainer){
  item.container = "folder";
  item.path = getFolderPath(node);
}
  • And finally the associated freemarker file (live-search-docs.get.json.ftl) was modified as shown below to include the container and path fields in the returned json.
<#if item.container??>
"container": "${item.container}",
"path":"${item.path}"
</#if>

Search Box Widget

The search box widget is an aikau widget which passes the search terms typed by the user and calls the live search doc repo webscript. It is also responsible for the rendering of the returned search results. The search box widget has been overridden as follows in /META-INF/js/seed/customSearchBox package in our share maven project.

  • The processLiveSearchDocument method in SearchBox.js was modified to process folder nodes and show the proper icon and link for the returned search results in the drop down list. See below code snippet.
switch (item.container){

case "wiki":
  link = this.wikiPage + "?title=" + encodeURIComponent(item.name);
  break;
case "blog":
  link = this.blogPage + "?postId=" + encodeURIComponent(item.name);
  item.name = item.title;
  break;
case "folder":
  //link = "folder-details?nodeRef=" + item.nodeRef;
  link = "context/shared/sharedfiles#filter=" + encodeURIComponent(item.path);
  //item.name = item.title;
  break;
default:
  link = this.documentPage + "?nodeRef=" + item.nodeRef;
  break;
}

var lastModified = item.lastThumbnailModification || 1;
if(item.container == "folder"){
  this.alfLog("log", "Folder link: ", link);
  return this.createLiveSearchDocument({
  searchBox: this,
  cssClass: "alf-livesearch-thumbnail",
  title: desc,
  label: item.name,
  link: urlUtils.convertUrl(link, urlTypes.PAGE_RELATIVE),
  icon: AlfConstants.URL_RESCONTEXT + "components/images/filetypes/generic-folder-32.png",
  alt: item.name,
  meta: info,
  meta2: info2,
  currentItem: lang.clone(item),
  publishTopic: this.publishTopic,
  publishPayload: this.publishPayload,
  publishGlobal: this.publishGlobal,
  publishToParent: this.publishToParent,  
  publishPayloadType: this.publishPayloadType,
  publishPayloadItemMixin: this.publishPayloadItemMixin,
  publishPayloadModifiers: this.publishPayloadModifiers
});

Alfresco Share Main Menu

The default Search box widget was replaced with our custom search box widget by modifying the SHARE_HEADER widget and injecting the custom search box widget. The underlying js (share-header.get.js) was overridden via a share extension module as follows;

var headerMenu = widgetUtils.findObject(model.jsonModel.widgets, "id", "SHARE_HEADER");
var seedSearchBox = {
  id: "HEADER_SEARCH",
  name: "seed/customSearchBox/SearchBox",
  align: "right",
  config: {
  id: "HEADER_SEARCH_BOX",
  site: page.url.templateArgs.site,
  enableContextLiveSearch: true,
  linkToFacetedSearch: true,
  documentsTitle:"Folders and Documents",
  placeholder:"Search for Folders, Documents, People .."
  }
}
if(headerMenu){
  headerMenu.config.widgets.push(clientSearchBox);
}

Conclusion

In this blog we showed how to extend the Alfresco Live Search to search for our custom folder type and sort based on a custom property so that our custom folder appears first in the list. The same method can be applied to search for cm:folder in general as well.