Add button to Site Navigation Bar

In previous post I went through how you can add a new button to your site document library page. Now, we are going to see how to add new button to navigation bar of your site. Also we are going to extend the component which is responsible for generating the navigation bar for site.

First we need to identify the component which is responsible for generating site header. You could find it under this location.

<ALF_HOME>\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\share\header\share-header.get.js

It looks like this.

<import resource="classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js">

model.jsonModel = {
   rootNodeId: "share-header",
   services: getHeaderServices(),
   widgets: [
      {
         id: "SHARE_VERTICAL_LAYOUT",
         name: "alfresco/layout/VerticalWidgets",
         config: 
         {
            widgets: getHeaderModel()
         }
      }
   ]
};

Create file called share-header.get.js under following location in your share project.Note I am assuming you already have share project in place which you are using to maintain your share customization code.

Location

\share\src\main\amp\config\alfresco\web-extension\site-webscripts\org\alfresco\share\header

File will look like this :

<import resource="classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js">
model.jsonModel = {
   rootNodeId: "share-header",
   services: getHeaderServices(),
   widgets: [
      {
         id: "SHARE_VERTICAL_LAYOUT",
         name: "alfresco/layout/VerticalWidgets",
         config: 
         {
            widgets: getHeaderModel()
         }
      }
   ]
};
var menuBar =  widgetUtils.findObject(model.jsonModel, "id", "HEADER_NAVIGATION_MENU_BAR");
if (menuBar != null)
{
     menuBar.config.widgets.unshift({
		 id: "HEADER_SITE_HELP",
				 name: "alfresco/menus/AlfMenuBarItem",
				 config: {
					id: "HEADER_SITE_HELP",
					label: "ArvixeBlogs",
					targetUrl: "http://blog.arvixe.com/tag/alfresco/",
					targetUrlType:"FULL_PATH",
					targetUrlLocation: "NEW",
					selected: false
		 }
  });
}

Two important parameters from configuration of button are

 targetUrlType:"FULL_PATH",(Indicate weather URL is full url or relative to alfresco share)
 targetUrlLocation: "NEW",(Indicate weather URL should be opened in same window or new window)

widgetUtils provides API called findObject through which we can find particular object based on ID passed. To get ID you have to look into out of box file which generate that component. Once we find that object we are manipulating that object to add our new button ahead of all existing buttons.In this case we want to open new tab and URL is also external so we need to keep it as given.

 This is how your header look with new button added in the site header. This is going to affect all your existing site and new sites which you are going to create as all of them have common header.

Customized Site Header

Here we had seen one more customization of alfresco share and this should make your alfresco share fundamentals more clear.Please feel free to comment or get in touch with me for any queries.

Looking for quality Alfresco Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Alfresco, Uncategorized | RSS 2.0

Author Spotlight

mitpatoliya

I love opensource technologies working with those technologies from the time I have stepped in to the Software Industry. Alfresco CMS is my area of expertise. I have worked on various complex implementations which involved integration of Alfresco with other technologies, extensively worked with JBPM workflows and Webscripts.

Leave a Reply

Your email address will not be published. Required fields are marked *