Easily Add Links to the Header Menu in the Nuxeo Platform


Tue 26 May 2015 By Frédéric Vadon

Our use case today is quite simple - we want to display a drop down list of links in the header menu of the Nuxeo Platform. The idea is to make it easy for the users to access a list of resources from the menu.

Here's what we want to achieve:

Links


Let's use the extensibility of the Nuxeo Platform to make it happen!

And "ACTION"!


Most of the links, buttons and tabs are what we call 'Actions' in the Nuxeo Platform. If you want to learn everything about actions, you can can jump directly to the documentation, but here is a short summary of why actions are both so useful and powerful.

Actions can be contributed through simple XML contributions and there are categories to help you choose where you want to display them. They also have filters to help decide whether to display them or not depending on conditions. What is really important for us today is that actions have Types. The action type will drive both its rendering and what happens when you click on it. If we wanted to display one external link only, we could have used the bare_link type but we want something custom here. Can we use a custom code to generate our link dropdown list? The answer, of course, is yes!

The solution is to use the "template" action type to directly reference a custom widget. Here's what my contribution looks like:

<extension point="actions" target="org.nuxeo.ecm.platform.actions.ActionService">
<action id="externalMenuHeader" order="101" type="template">
<category>MAIN_TABS</category>
<properties>
<property name="addForm">false</property>
<property name="template">/widgets/externalheadermenu_widget.xhtml</property>
</properties>
</action>
</extension>

You can see that one property of my template type action is the path of the custom XHTML file on the server. The source is available in nuxeo-labs if you want to check it out!

https://github.com/nuxeo/nuxeo-labs/blob/master/nuxeo-labs-widgets/externalheadermenu_widget.xhtml

Wrap It Up


In the end, we used 2 separate things - a template type action to display our dropdown list widget, and the custom code for the list. We can also apply the exact same logic to display something more complex than just a link dropdown list! Here's how the link dropdown will look in the Nuxeo Platform:



Category: Product & Development
Tagged: Demo, How to, Nuxeo Platform