Extending jContent UI

  Written by The Jahia Team
   Estimated reading time:

Add a new accordion in jContent

You can add a new accordion in the secondary navigation of jContent by adding 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 will be displayed 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, defining where your actions will be added : 

  1. contentActions : this is the main target, where most of the actions are added. This will add action in all contextual (right click) menu, 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. 
  2. headerPrimaryActions : this 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.
  3. 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.
  4. publishMenu : here are the items of the "publish" menu