topic Re: Customizing Search results Page in Alfresco Archive

Customizing Search results Page

nishantqwerty — Tue, 20 Nov 2012 00:47:15 GMT

I am trying to customize the search result page for Alfresco Share Community 4.2.b -to include a check box next to all the results -a toolbar with 2 drop down menus (i)first menu consisting of options to select or deselect all checkboxes (ii)second m

Re: Customizing Search results Page

ddraper — Tue, 20 Nov 2012 10:00:53 GMT

Unfortunately the search results page is one of the trickiest to customize at the moment (even inserting a toolbar is tricky because the query box and the results are all rendered by the same WebScript). Given that you're currently working on 4.2.b I would suggest that you try to use the <@markup> approach (http://blogs.alfresco.com/wp/ddraper/2011/08/12/customizing-alfresco-share-freemarker-templates/) to customizing the search.get.html.ftl template and add the <@markup> directives that you need yourself and then append your requirements as a sub-task of https://issues.alfresco.com/jira/browse/ALF-16691. If you are able to provide us with your requirements in the next few weeks (I can't say for certain what the cutoff will be at the moment) then we should be able to add them in for 4.2.c.

The reason you'll want to do this is that by manipulating (what would become) the default DOM you can add in the additional toolbar and customize the results section.

Regards,
Dave

Re: Customizing Search results Page

nishantqwerty — Wed, 21 Nov 2012 05:29:22 GMT

Hey David,
Thank you for your reply. I will surely look into that and add my requirements.
I could not help but notice that the search results are rendered by a javascript. To add check boxes next to search results, shall I edit the original javascript or is there any other way?
Thank You,
Nishant

Re: Customizing Search results Page

pmverma — Thu, 22 Nov 2012 11:00:17 GMT

Hi nishantqwerty,

It would be best not modify the original js file. You should use the extension mechanism to do that.

Re: Customizing Search results Page

ddraper — Thu, 22 Nov 2012 11:11:14 GMT

This blog post describes how you can extend a default client-side JavaScript widget for Share: http://blogs.alfresco.com/wp/ddraper/2012/05/22/customizing-share-javascript-widget-instantiation-part-1/

Regards,
Dave

Re: Customizing Search results Page

nishantqwerty — Thu, 22 Nov 2012 23:58:14 GMT

Hey David,
Thank you for your reply. Before implementing the search result page I tried doing what was in your blog i.e. showing the message box after the filter is changed in document library.
The folder structure I made was this:
[img]http://i48.tinypic.com/16m3nl5.jpg[/img]

in custom-view-renderer.xml:

<extension>
    <modules>

       <module>
  <id>Custom DocumentList Widget</id>
  <description>Instantiate a custom DocumentList widget</description>
  <customizations>
    <customization>
      <targetPackageRoot>org.alfresco.components.documentlibrary</targetPackageRoot>
      <sourcePackageRoot>blog.demo.customization</sourcePackageRoot>
    </customization>
  </customizations>
</module>

    </modules>
</extension>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In documentlist.get.head.ftl:

<script type="text/javascript" src="${page.url.context}/res/alfresco-share-doclib-views-example/components/documentlibrary/documentlist-custom.js"></script>‍

In documentlist.get.html.ftl:

<@markup id="custom-documentlist-dependencies" target="js" action="after" scope="global">
  <@script src="${url.context}/res/doclib/extension/custom-documentlist.js" group="documentlibrary"/>
</@markup>‍‍‍

In documentlist.get.js:

for (var i=0; i<model.widgets.length; i++)
{
  if (model.widgets[i].id == "DocumentList")
  {
    model.widgets[i].name = "Blog.custom.DocumentList";
  }
}‍‍‍‍‍‍‍

In documentlist-custom.js:

if (typeof Blog == undefined || !Blog) { var Blog = {}; }
if (!Blog.custom) { Blog.custom = {}; }
(function()
{
  // Define constructor…
  Blog.custom.DocumentList = function CustomDocumentList_constructor(htmlId)
  {
    Blog.custom.DocumentList.superclass.constructor.call(this, htmlId);
    return this;
  };

  // Extend default DocumentList…
  YAHOO.extend(Blog.custom.DocumentList, Alfresco.DocumentList,
  {
    onFilterChanged: function CustomDL_onFilterChanged(layer, args)
    {
      // Call super class method…
      Blog.custom.DocumentList.superclass.onFilterChanged.call(this, layer,args);

      // Pop-up a message…
      Alfresco.util.PopupManager.displayMessage({
        text: "Filter Changed!"
      });
    }
  });
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

the build.xml file:

<?xml version="1.0" ?> 
<project name="alffilterchange" default="compress">

   <target name="init">
      <mkdir dir="build/classes" />
      <mkdir dir="dist" />
   </target>

   <target name="compile" depends="init">
      <javac srcdir="src" destdir="build/classes" />
   </target>
   
   <target name="compress" depends="compile">
           <jar destfile="dist/abcdefg.jar" basedir="build/classes" />
   </target>
   
   
   <target name="clean">
      <delete dir="build" />
      <delete dir="dist" />
   </target>
   
</project>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

after running the ant file I copied the jar file at the appropriate location (i.e. C:\Alfresco\tomcat\webapps\share\WEB-INF\lib) but its not working.
Could you please tell me where I went wrong!
Thank you,
Nishant

Re: Customizing Search results Page

jpfi — Fri, 23 Nov 2012 11:51:30 GMT

Hi,
I guess you missed the the auto-deploy module option & you didn't deploy the module manually:


<extension>
    <modules>

       <module>
  <id>Custom DocumentList Widget</id>
  <description>Instantiate a custom DocumentList widget</description>
  <customizations>
    <customization>
      <targetPackageRoot>org.alfresco.components.documentlibrary</targetPackageRoot>
      <sourcePackageRoot>blog.demo.customization</sourcePackageRoot>
    </customization>
  </customizations>
<auto-deploy>true</auto-deploy>
</module>

    </modules>
</extension>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

or deploy via Module Deployment WebScripts.
Cheers, jan

Re: Customizing Search results Page

nishantqwerty — Sun, 25 Nov 2012 21:37:51 GMT

Hi Jan,
Thank u for your reply.I tried what you told me to do but it didn't work.
Regards,
Nishant

Re: Customizing Search results Page

nishantqwerty — Mon, 26 Nov 2012 21:16:14 GMT

Hi guys,
I still haven't got it working. Any help regarding my issue will be really appreciated.
Thank you,
Nishant

Re: Customizing Search results Page

ddraper — Tue, 27 Nov 2012 07:18:30 GMT

In the code snippets you've posted you've got code in both a .head.ftl file and the .html.ftl. File you only need to be using the .html.file now. You appear to be loading two different JS resources - you should be doing these both from the .html.ftl file (especially if the order is important). Also, you're not really saying *why* it's not working - e.g. what symptoms you're seeing? It might also be useful if you show how you're extending the default DocumentList widget (in the JS).

Regards,
Dave

Re: Customizing Search results Page

mbe — Mon, 19 Aug 2013 15:23:01 GMT

@nishantquerty:

very interesting question - we would like to do a similar customization to the search results.
Did you get any further with your work?

Kind regards

mbe