Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

[wns]

Hello,

I added two reset buttons in the advanced search form in Share. I did it for the Alfresco version 4.1x ( Create button 'Clear' in Advantage Search Form ) but now, I want to show how to do it in Alfresco 5.2.

My steps are:

1. Added new module called "advsearch-extension.xml" in path "/src/main/resources/alfresco/web-extension/site-data/extensions/":

   1. <extension>
          <modules>
              <module>
                  <id>Search Results extension</id>
                  <auto-deploy>true</auto-deploy>
                  <customizations>
                      <customization>
                          <targetPackageRoot>org.alfresco.components.search</targetPackageRoot>
                          <sourcePackageRoot>com.company.components.search</sourcePackageRoot>
                      </customization>
                  </customizations>
              </module>
          </modules>
      </extension>

2. Added "advsearch.get.html.ftl" in path "/src/main/resources/alfresco/web-extension/site-webscripts/com/company/components/search/":

   1. <@markup id="company-js"  target="js" action="after">
          <@script src="${url.context}/res/components/search/extensions/company-advsearch.js" group="search" />
      </@>

3. Added "advsearch.get.js" in path "/src/main/resources/alfresco/web-extension/site-webscripts/com/company/components/search/":

   1. for (var i=0; i<model.widgets.length; i++) {
      
          if (model.widgets[i].id == "AdvancedSearch") {
      
              model.widgets.splice(i, 1);
              var companyAdvancedSearch = {
                  id : "companyAdvancedSearch",
                  name : "Alfresco.CompanyAdvancedSearch"
                  options : {
                   siteId : model.siteId,
                   savedQuery : (page.url.args.sq != null) ? page.url.args.sq : "",
                   searchScope : model.searchScope,
                   searchForms : model.searchForms,
                   searchPath : model.searchPath
                 }
              };
              model.widgets.push(companyAdvancedSearch);
          }
      }

4. Added "company-advsearch.js" in path "/src/main/resources/META-INF/components/search/extensions/":

   1. (function() {
      
          Alfresco.CompanyAdvancedSearch = function CompanyAdvancedSearch_constructor(htmlId){
              Alfresco.CompanyAdvancedSearch.superclass.constructor.call(this, htmlId);
              return this;
          };
      
          /**
           * Extended from AdvancedSearch
           */
          YAHOO.extend(Alfresco.CompanyAdvancedSearch, Alfresco.AdvancedSearch, {
      
              onReady: function CompanyADVSearch_onReady()
              {
                  Alfresco.CompanyAdvancedSearch.superclass.onReady.call(this);
                  this.widgets.clearButton1 = Alfresco.util.createYUIButton(this, "clear-button-1", this.onClearClick);
                  this.widgets.clearButton2 = Alfresco.util.createYUIButton(this, "clear-button-2", this.onClearClick);
      
              },
      
              /** Event handler that gets fired when user clicks the Search button.
              *
              * @method onClearClick
              * @param e {object} DomEvent
              * @param obj {object} Object passed back from addListener method
              */
              onClearClick: function ADVSearch_onClearClick(e, obj)
              {
                  document.getElementById(this.currentForm.runtime.formId).reset();
                  document.getElementById(this.id + "-search-text").value = "";
              }
      
          });
      })();

5. Added "advsearch.get.html.ftl" in path "/src/main/resources/alfresco/web-extension/site-webscripts/org/alfresco/components/search/". You can see that I override the default template adding the two reset buttons (clear-button-1 and clear-button-2). Maybe it's possible to do it in a cleaner way and don't override the default template. But I couldn't do it in another way...:

   1. <@markup id="css" >
      <#-- CSS Dependencies -->
          <#include "../form/form.css.ftl"/>
          <@link href="${url.context}/res/components/search/search.css" group="search"/>
      </@>
      
      <@markup id="js">
      <#-- JavaScript Dependencies -->
          <#include "../form/form.js.ftl"/>
          <@script src="${url.context}/res/components/form/date-range.js" group="search"/>
          <@script src="${url.context}/res/components/form/number-range.js" group="search"/>
          <@script src="${url.context}/res/components/search/advsearch.js" group="search"/>
      
      </@>
      <@markup id="widgets">
          <@createWidgets group="search"/>
      </@>
      
      <@markup id="html">
          <@uniqueIdDiv>
              <#assign el=args.htmlid?html>
            <div id="${el}-body" class="search">
                <div class="yui-gc form-row">
                    <div class="yui-u first">
                        <span class="lookfor">${msg("label.lookfor")}:</span>
      
                    <#-- component to show list of forms, displays current form -->
                        <span class="selected-form-button">
                        <span id="${el}-selected-form-button" class="yui-button yui-menu-button">
                           <span class="first-child">
                              <button type="button" tabindex="0"></button>
                           </span>
                        </span>
                     </span>
                    <#-- menu list of available forms -->
                        <div id="${el}-selected-form-list" class="yuimenu" style="visibility:hidden">
                            <div class="bd">
                                <ul>
                              <#list searchForms as f>
                                  <li>
                                      <span class="form-type-name" tabindex="0">${f.label?html}</span>
                                      <span class="form-type-description">${f.description?html}</span>
                                  </li>
                              </#list>
                                </ul>
                            </div>
                        </div>
                    </div>
      
                <#-- search button -->
                    <div class="yui-u align-right">
                     <span id="${el}-search-button-1" class="yui-button yui-push-button search-icon">
                        <span class="first-child">
                           <button type="button">${msg('button.search')}</button>
                        </span>
                     </span>
                     <span id="${el}-clear-button-1" class="yui-button yui-push-button clear-icon">
                        <span class="first-child">
                           <button type="button">${msg('button.clear')}</button>
                        </span>
                     </span>
                    </div>
                </div>
      
            <#-- keywords entry box - DIV structure mirrors a generated Form to collect the correct styles -->
                <div class="forms-container keywords-box">
                    <div class="share-form">
                        <div class="form-container">
                            <div class="form-fields">
                                <div class="set">
                                    <div>${msg("label.keywords")}:</div>
                                    <input type="text" class="terms" name="${el}-search-text" id="${el}-search-text"
                                           value="${(page.url.args["st"]!"")?html}" maxlength="1024"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
      
            <#-- container for forms retrieved via ajax -->
                <div id="${el}-forms" class="forms-container form-fields"></div>
      
                <div class="yui-gc form-row">
                    <div class="yui-u first"></div>
                <#-- search button -->
                    <div class="yui-u align-right">
                     <span id="${el}-search-button-2" class="yui-button yui-push-button search-icon">
                        <span class="first-child">
                           <button type="button">${msg('button.search')}</button>
                        </span>
                     </span>
                        <span id="${el}-clear-button-2" class="yui-button yui-push-button clear-icon">
                          <span class="first-child">
                              <button type="button">${msg('button.clear')}</button>
                          </span>
                        </span>
                    </div>
                </div>
            </div>
          </@>
      </@>

Feel free to comment and I hope it can help you!

[douglascrp · Accepted solution]

In order to change the html part of the page, you can use the same file you used for this:

<@markup id="company-js"  target="js" action="after">
    <@script src="${url.context}/res/components/search/extensions/company-advsearch.js" group="search" />
</@>

Inside of this same file, you can use the "@markup" item to "replace" the html with whatever you want, something like:

<@markup id="company-html"  target="html" action="replace">
    <@uniqueIdDiv>
        <#assign el=args.htmlid?html>
      <div id="${el}-body" class="search">
          <div class="yui-gc form-row">
              <div class="yui-u first">
                  <span class="lookfor">${msg("label.lookfor")}:</span>

              <#-- component to show list of forms, displays current form -->
                  <span class="selected-form-button">
                  <span id="${el}-selected-form-button" class="yui-button yui-menu-button">
                     <span class="first-child">
                        <button type="button" tabindex="0"></button>
                     </span>
                  </span>
               </span>
              <#-- menu list of available forms -->
                  <div id="${el}-selected-form-list" class="yuimenu" style="visibility:hidden">
                      <div class="bd">
                          <ul>
                        <#list searchForms as f>
                            <li>
                                <span class="form-type-name" tabindex="0">${f.label?html}</span>
                                <span class="form-type-description">${f.description?html}</span>
                            </li>
                        </#list>
                          </ul>
                      </div>
                  </div>
              </div>

          <#-- search button -->
              <div class="yui-u align-right">
               <span id="${el}-search-button-1" class="yui-button yui-push-button search-icon">
                  <span class="first-child">
                     <button type="button">${msg('button.search')}</button>
                  </span>
               </span>
               <span id="${el}-clear-button-1" class="yui-button yui-push-button clear-icon">
                  <span class="first-child">
                     <button type="button">${msg('button.clear')}</button>
                  </span>
               </span>
              </div>
          </div>

      <#-- keywords entry box - DIV structure mirrors a generated Form to collect the correct styles -->
          <div class="forms-container keywords-box">
              <div class="share-form">
                  <div class="form-container">
                      <div class="form-fields">
                          <div class="set">
                              <div>${msg("label.keywords")}:</div>
                              <input type="text" class="terms" name="${el}-search-text" id="${el}-search-text"
                                     value="${(page.url.args["st"]!"")?html}" maxlength="1024"/>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

      <#-- container for forms retrieved via ajax -->
          <div id="${el}-forms" class="forms-container form-fields"></div>

          <div class="yui-gc form-row">
              <div class="yui-u first"></div>
          <#-- search button -->
              <div class="yui-u align-right">
               <span id="${el}-search-button-2" class="yui-button yui-push-button search-icon">
                  <span class="first-child">
                     <button type="button">${msg('button.search')}</button>
                  </span>
               </span>
                  <span id="${el}-clear-button-2" class="yui-button yui-push-button clear-icon">
                    <span class="first-child">
                        <button type="button">${msg('button.clear')}</button>
                    </span>
                  </span>
              </div>
          </div>
      </div>
    </@>
</@>

By doing this way, you don't need the file to be placed into /src/main/resources/alfresco/web-extension/site-webscripts/org/alfresco/components/search/ at all.

PS: I have not tested the code. I am just kind of answering your "Maybe it's possible to do it in a cleaner way and don't override the default template. But I couldn't do it in another way...:"

[wns]

Hi Douglas,

That's the way 🙂 
Thanks for the tip, it works perfectly. Good point!!

Regards

Werner