AnsweredAssumed Answered

Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

Question asked by wns on Oct 1, 2018
Latest reply on Oct 10, 2018 by 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!

Outcomes