nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding a new button to Aikau Search Component

francesco_forna

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.

Find more posts tagged with

Alfresco Content Services

Accepted answers

francesco_forna

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!

All comments

openpj

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?

krutik_jayswal

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

francesco_forna

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

krutik_jayswal

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

francesco_forna

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.

krutik_jayswal

yes

francesco_forna

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!