Customizing Search results Page

[nishantqwerty]

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 menu consisting of 2 or more custom actions that have already been implemented for document library.

the image(doctored) given below shows what exactly i want to do.

How do I extend the search results table that is displayed after searching for any content?
And how do I insert the toolbar into the page?

Considering the fact that the toolbars (in the image)are similar to ones displayed in the document library page, Is it possible to make the search result page similar to the document library page minus some of the widgets.
[img]http://i47.tinypic.com/2uy1t28.png[/img]

[ddraper]

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

[nishantqwerty]

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

[pmverma]

Hi nishantqwerty,

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

[ddraper]

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-pa...

Regards,
Dave

[nishantqwerty]

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

[jpfi]

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

[nishantqwerty]

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

[nishantqwerty]

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

[ddraper]

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