Extending jContent UI

February 2, 2022

Add a new accordion in jContent

You can add a new accordion in the secondary navigation of jContent by adding an accordionItem entry in the registry with the jContent target. You can create a new accordion from scratch by defining the render attribute, or inherit from a base accordion definition provided by jContent.

Content Tree accordion

This will be similar to the content, pages, media accordion. You can configure which nodes to display in the tree. You need to extend the renderDefaultContentTrees item.

registry.add('accordionItem', 'my-files-tab', window.jahia.uiExtender.registry.get('accordionItem', 'renderDefaultContentTrees'), {
    targets: ['jcontent:50'],
    icon: <Collections/>,
    label: 'ns:label.contentManager.navigation.media',
    defaultPath: siteKey => '/sites/' + siteKey + '/files/my-files',
    config: {
        rootPath: '/files/my-files',
        selectableTypes: ['jnt:folder'],
        type: 'files',
        openableTypes: ['jnt:folder'],
        rootLabel: 'jcontent:label.contentManager.browseFiles',
        key: 'browse-tree-files'

Settings/Apps accordion

This will create an accordion entry like the apps entry. It will be filled with settings entries which have the target defined in appsTarget.

window.jahia.uiExtender.registry.add('accordionItem', 'example', window.jahia.uiExtender.registry.get('accordionItem', 'renderDefaultApps'), {
    targets: ['jcontent:998'],
    label: 'ns:label.appsAccordion.title',
    icon: window.jahia.moonstone.toIconComponent('<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6V5A2 2 0 0 0 17 3H15A2 2 0 0 0 13 5V6H11V5A2 2 0 0 0 9 3H7A2 2 0 0 0 5 5V6H3V20H21V6M19 18H5V8H19Z" /></svg>'),
    appsTarget: 'my-accordion',
    isEnabled: function(siteKey) {
        return siteKey !== 'systemsite'

Adding new actions in jContent

Actions can be added in multiple places in jContent. Here's the list of available targets that define where to add your actions: 

  • contentActions
    The main target where most of the actions are added. This will add action in all contextual (right-click) menus and also in the 3 dots menu available on each node. The actions here need to carefully check on which node they can apply, and if they can apply on multiple nodes. They will receive the path property in the context, or paths in case of multiple selection. 
  • headerPrimaryActions
    The target for actions in the header, applied to the main node (the current page or folder). They will get the path of the current node in the context.
  • selectedContentActions
    This target is for the actions in the right part of the header when nodes are selected. They will get the paths property in the context.
  • publishMenu
    Here are the items in the Publish menu.

Example module

You can find an example module that provides a custom content action here.