This post shows how to get search template tree and apply it in new customized feature. Instead of bringing whole SearchPane widget, it is possible to select only the tree model and use it in your custom feature. For this all is needed is a new feature widget extending “ecm/widget/layout/_SearchSelectorMixin” and defined “ecm/widget/search/SearchSelector” module.
1. New feature and extending _SearchSelectorMixin
By extending custom feature widget from _SearchSelectorMixin we add (inherit) its methods and variables in our widget (as shown in picture 1). This allows us to use those methods and variables without declaring them.
2. Implementing and populating variables
After completing first step, it is time to assign variables and create search template tree. This can be done in postCreate method. First of all repository is set so that SearchSelector uses the required repository to retrieve search templates. The method this._createSearchSelector is used to build rendering search tree and _SearchSelectorMixin widget does the rest. It’s that easy and simple. However, note that method used to create search tree is private method and this might change with future releases. The reason for using that method is that overall _SearchSelectorMixin widget has two methods that are not inherited from SearchSelector and it uses its private method to generate search tree. Also the doSearchSelectorConnections method is called after creating search tree. However, this method has been modified to suit our purpose. This will be explained more in details in next step.
The _createNewSearchButton in SearchSelector prototype is changed during the generation of search tree. If feature, search tree is being implemented, doesn’t include SearchTabContainer, SearchTabs, or equivalent option then it is better not to include New Search button as it will try to redirect you to SearchTab within same widget. If it is must then it could be achieved either by extending\using SearchTab or SearchTabContainer, or modifying doSearchSelectorConnections to open Search View (default feature).
3. Modifying doSearchSelectorConnections and openItem methods
This method is not changed much but rather copied. The main reason behind this is our widget should call its own overridden/replaced openItem method where the main modification takes place. Also the event listener for new search button has been removed.
In this method callback function of actionOpen method is changed. The line 334 becomes this.onOpenItem(item, null) from this.onOpenItem(item, openItemData). On opening search templates, that are configured to autorun this method , this method tries to open the resultSet that is inside openItemData variable. By setting it to null it treats it as search template without autorun option enabled and thus opens Search View (default feature).
4. Final step
After modifying two above mentioned methods, this.searchSelector is placed in html page for UI interaction. In this example it is done by using appendChild() method as shown in picture 2. This.searchSelector is widget rather than html element, thus its domNode is used to append to html page. This.searchTree is defined in html page as <div data-dojo-attach-point=”searchTree”>.