Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
wns
Active Member II

Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

Jump to solution

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!

1 Solution

Accepted Solutions
douglascrp
Advanced II

Re: Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

Jump to 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...:"

View solution in original post

2 Replies
douglascrp
Advanced II

Re: Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

Jump to 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...:"

View solution in original post

wns
Active Member II

Re: Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

Jump to solution

Hi Douglas,

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

Regards

Werner