topic Re: Adding a new button to Aikau Search Component in Alfresco Forum

Adding a new button to Aikau Search Component

francesco_forna — Wed, 14 Feb 2018 16:45:33 GMT

Dear All,could you suggest me how to add a new button on the search results page? The Search is an Aikau component and I'm looking to add a new action button to call a new repo webscript.Could you help me to solve my problem?Thank you,Regards.Francesco.

Re: Adding a new button to Aikau Search Component

openpj — Thu, 15 Feb 2018 08:21:36 GMT

I found an existent and old thread about the same problem but there is no effective solution published yet:

Adding a new button to Aikau Search Component

In that thread Dave Draper said (2013!!!) that the search results page is the most tricky to customize but I'm wondering if also in 5.x version it is the same.

Does anybody have some good hints about this?

Re: Adding a new button to Aikau Search Component

krutik_jayswal — Thu, 15 Feb 2018 09:08:54 GMT

faceted-search.get.js is the file which is responsible for rendering search result page.

You need to extend above file and add the aikau widget in json configuration..

For handling the onclick event , aiaku is using pubsub mechanism.

Meaning of Pubsub is publication and subscript.In the widget configuration you need to add publishTopic, and you need to subscribe it inside the javascript service file(it is a dijit file).Refer below code for creating aikau button.

{     name : "alfresco/buttons/AlfButton",     config : {         label : "old",         publishTopic : "GIVE_NAME_TOPIC",         }     }  }

Refer below link for subscripton of a topic.If you take a look on registerSubscriptions function on below file link,that shows how you can subscribe to a publish topic.

JSDoc: Source: services/CrudService.js

Re: Adding a new button to Aikau Search Component

francesco_forna — Thu, 15 Feb 2018 09:47:44 GMT

Thank you Krutik. So we have to modify directly the faceted-search.get.js source code.

Re: Adding a new button to Aikau Search Component

krutik_jayswal — Thu, 15 Feb 2018 09:57:53 GMT

No, you should extend it, how to extend this is defined in below links.its not the exact example.But it demonstrates how you can extend javascript controller.

5. Customize Alfresco Share JavaScript controllers | Alfresco Documentation

Modifying Out-of-the-box Aikau Pages | Alfresco Documentation

Re: Adding a new button to Aikau Search Component

francesco_forna — Thu, 15 Feb 2018 10:13:22 GMT

Ok ok,

I mean that we have to replace the original faceted-search.get.js by adding our custom logic. For example, if we have to add the button to SEARCH_RESULTS_MENU_BAR, we'll have to override this widget by adding our piece of code.

Re: Adding a new button to Aikau Search Component

krutik_jayswal — Thu, 15 Feb 2018 10:35:58 GMT

yes

Re: Adding a new button to Aikau Search Component

francesco_forna — Thu, 15 Feb 2018 10:48:14 GMT

Dear All,

thanks to the help Krutik Jayswal.

So the correct way to do this particular customisation is:

1) Create AMP o JAR Share project as usual;

2) create a new extension module, for exampe:

<?xml version="1.0" encoding="UTF-8"?>
<extension>
    <modules>
        <module>
            <id>Add Export Excel - Search Page</id>
            <version>1.0</version>
            <auto-deploy>true</auto-deploy>
            <customizations>
                <customization>
                    <targetPackageRoot>org.alfresco.share.pages.faceted-search</targetPackageRoot>
                    <sourcePackageRoot>YOUR_PACKAGE.share.pages.faceted-search</sourcePackageRoot>
                </customization>
            </customizations>
        </module>
    </modules>
</extension>

3) add your JS file in the site-webscript project directory to override the faceted-search.js file.
Keep in mind to get existing widgets or push newone; avoid to modify directly the source code.
For example, for the specific question:
var searchResultsMenuBar  = widgetUtils.findObject(model.jsonModel, "id", "SEARCH_RESULTS_MENU_BAR");
searchResultsMenuBar.config.widgets.push({
    id: "YOUR_BUTTON",
    name: "alfresco/buttons/AlfButton",
    config: {
        label : "old",
        publishTopic : "GIVE_NAME_TOPIC"
    }
});
4) package and deploy the AMP/JAR. You'll your new fantastic button... Eureka!