How to bring the search box to the site menu bar?

anandhan · ‎1 Sep 2017

How do I bring the search box from "SHARE_HEADER" to right side of the "HEADER_TITLE_BAR". Please refer the below image.

afaust · ‎4 Sep 2017

You customise the header via the share-header.get web script.

kalpesh_c2 · ‎7 Sep 2017

Hi,

I would suggest you to create a share-extension module.

Follow these steps.

1. Create custom-header-extension.xml file at web-extension->site-data->extensions folder with the following content

<extension>
 <modules>
 <module>
 <id>Custom Share Header Menu</id>
 <version>1.0</version>
 <customizations>
 <customization>
 <targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
 <sourcePackageRoot>admin-header</sourcePackageRoot>
 </customization>
 </customizations>
 </module>
 </modules>
</extension>

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

2. Create the admin-header folder inside site-webscripts

3. Create share-header.get.js inside admin-header with the following code

- This will remove search option from main menu

   widgetUtils.deleteObjectFromArray(model.jsonModel, "id", "HEADER_SEARCH");‍

- and the following code will add it to title-bar.

var headerMenu = widgetUtils.findObject(model.jsonModel, "id", "HEADER_TITLE_BAR");
 if (headerMenu != null) {
 headerMenu.config.widgets.push({
 id: "HEADER_SEARCH",
 name: "alfresco/header/SearchBox",
 align: "right",
 config: {
 id: "HEADER_SEARCH_BOX",
 site: page.url.templateArgs.site,
 siteName: "mySite",
 enableContextLiveSearch: true,
 linkToFacetedSearch: true,
 sitePage: ""
 }
 });
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Feel free to ask in case of any query.

Thanks

Kalpesh

ContCentric