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 Re: 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)