Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

wns — Mon, 01 Oct 2018 15:38:12 GMT

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:Added new module called "advsearch-extension.xml" in path "/src/main/resou

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

douglascrp — Tue, 09 Oct 2018 16:45:36 GMT

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

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

wns — Wed, 10 Oct 2018 10:40:21 GMT

Hi Douglas,

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

Regards

Werner

topic Add Reset Buttons in Advanced Search Form (Alfresco 5.2) in Alfresco Forum

Add Reset Buttons in Advanced Search Form (Alfresco 5.2)

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

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