The UI Extension's working process is divided into 3 phases:

Setting up

At first, you must add dependencies to pom.xml. In this phase, you are going to install all elements of UI Extension framework in the configuration.xml file:


UIExtensionPlugin is responsible for looking up all UI Extension definitions, thus you can use it to obtain all UI Extensions, then plug it into UIExtensionManager. At present, all UI Extensions in your project will be managed by UIExtensionManager. Now you can get UI Extensions everywhere by invoking the getUIExtensions(String objectType) method.

In the UI Component class, implement a function which:

List<UIExtension> extensions = manager.getUIExtensions("org.exoplatform.wiki.UIPageToolBar");
// You are free to create a context
Map<String, Object> context = new HashMap<String, Object>();
// UIExtensionManager will depend on this context and extension to add or does not add extension to UI Component(this)
UIComponent component = manager.addUIExtension(extension, context, this);

The addUIExtension() method is responsible for adding extensions to a UI Component. It depends on:


The final step is to present UI Extension in a template.

As all UI Extensions are presently becoming children of UI Component, you can implement UI Component's action thanks to UI Extension's action. For example:

<%for(entry in uicomponent.getActions()) {
  String action = entry.Id();
  def uiComponent = entry;
  String link = uiComponent.event(action);
  <a href="$link" class="$action" title="$action" %>"><%= action %></a>


You are free to customize your action's Stylesheet.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus