Blog Hero Image

Jahia WCM Quick Review: Maven, Templates and Navigation

Nov 09, 2011
Oshyn Labs
Oshyn Labs

Jahia is a Web Content Management System (WCMS) integrated with Document Management (DMS) and Portal Features. This solution offers development, integration and management of content for intranet, extranet and Internet networks and is an excellent alternative to Alfresco CMS.

For template developing with Jahia V6 is important understand the existing structures illustrated in the following image, and they are:

  • Fields: Basic structure that needs to exist inside a container and the principal function is to structure data. The types of fields are: smallText, sharedSmallText, bigText, date, page, file, portlet, integer, float, Boolean, category, color, and field selectors.
  • Containers: Logical entity that groups fields and container lists.
  • Container Lists: List of containers of a specific definition.
  • Pages: They are similar to HTML pages. Jahia pages are associated to a template described in a jsp file. They declare the content structure of a page, and they can contain single containers and container lists.


Jahia needs a specific project structure in order to create templates. There exists a maven archetype that creates that structure for you through the following command:

mvn archetype:generate -DarchetypeCatalog=

This command creates a folder structure needed by Jahia to upload a template set.

  1. The file templates.xml defines and describes templates of the current template set. For example:

    <templates default="home" homepage="Home">
        <template name="home" display-name="Home page" filename="home.jsp" page-type="my_templates:home"/>
  2. The file definitions.cnd describes content definitions. The following is an example of the content of this file:

    [my_templates:logoContainer] > jnt:container
        file logoImage (file[mime='image/*'])
     [my_templates:navigation] mixin
        containerList navLink (jnt:navLink)
     [my_templates:genericText] > jnt:container
        bigText insertText
     [my_templates:home] > jnt:page, my_templates:navigation
        singleContainer logo (my_templates:logoContainer)
        singleContainer pageBodyText (my_templates:genericText)

    Notice that we are defining a page that is going to have navigation, a logo container and HTML container.

  3. After defining the above page structure, we need to create a jsp file named home.jsp in order to define this template layout. Here we need to write all the necessary HTML and use Jahia tags in order to display the editable fields of the page.

    Every page needs to have the following structure:

           Content that is going to appear in the <head> html section
            Content that is going to appear in the <body> html section
  4. Jahia identifies the elements defined in the .cnd file by name. So in order to include a list or a single container to a jsp we need to use the same name defined in the cnd file. For example:

    (Use of the logo container in home.jsp)

    <template:absoluteContainerList name="logo" id="logoSingleContainer" pageLevel="1">
           <a href='<template:composePageURL pageID="${requestScope.currentSite.homepageID}"/>'><template:image file="logo" cssClassName="headerImages"/></a>

    (Use of page body text container in home.jsp)

    <template:containerList name="pageBodyText" id = "pageBodyTextList">
           <template:field name="insertText" display="true"/>

    The main difference between the absoluteContainerList and containerList is that the absolute container list defines a page level where containers are going to be filled.

  5. To use Jahia navigation, we just need to use the tag <ui:navigationmenu>. This tag builds the structure <ul><li><a href="">item</a></li></ul></ui:navigationmenu>

    (Example of Main Navigation)
        <ui:navigationMenu displayActionMenuBeforeLink="true" cssClassName="" mockupClass="mockup-hmenu" kind="topTabs" requiredTitle="true" usePageIdForCacheKey="true"/>

    The look and feel of the navigation needs to be done using style sheets. Or if you do not want to use the standard HTML created by this tag, you can personalize it assigning a var attribute to this tag and personalize it.

Latest insights