My custom picker does not work on Jahia 8

Question

Here is the definition of my property (in Bootstrap 4 button, for instance)

- internalLink (weakreference, picker[type='editoriallink']) < jmix:droppableContent, jnt:page, jnt:file

On the page-composer, I'm unable to select a file. However, I'm able to select a file using the old UI.

Should we add the jmix:browsableInEditorialPicker to the jnt:file?

Answer

Valid before Content Editor 4.1

You should better use a custom picker (let's call it pagesandfiles). If so, your definition will look like this (this example is used in the Bootstrap 4 module

- internalLink (weakreference, picker[type='pagesandfiles']) < jmix:droppableContent, jnt:page, jnt:file

Then, in the src/main/resources/javascript/apps/jahia.json  file you need to register some extensions

{
  "jahia": {
    "apps": {
      "jahia": "javascript/apps/registerExtensions.js"
    }
  }
}

Then add your new picker configuration in the src/main/resources/javascript/apps/registerExtensions.js file where you will define the openableTypes and selectableTypes

window.jahia.i18n.loadNamespaces('bootstrap4-components');

window.jahia.uiExtender.registry.add('callback', 'bootstrap4-components', {
    targets: ['jahiaApp-init:60'],
    callback: function () {
        window.jahia.uiExtender.registry.add('pickerConfiguration', 'pagesandfiles', {
            cmp: {
                picker: window.jahia.uiExtender.registry.get('selectorType', 'ContentPicker'),
                treeConfigs: [{
                    rootPath: site => `/sites/${site}`,
                    openableTypes: ['jnt:page', 'jnt:navMenuText', 'jnt:virtualsite', 'jnt:contentFolder', 'nt:folder', 'jmix:siteContent', 'jmix:browsableInEditorialPicker'],
                    selectableTypes: ['jnt:page', 'jnt:navMenuText', 'jnt:virtualsite', 'jnt:contentFolder', 'nt:folder', 'jmix:siteContent', 'jmix:browsableInEditorialPicker'],
                    type: 'pagesandfiles',
                }],
                searchSelectorType: 'bootstrap4mix:internalLink',
                listTypesTable: ['jmix:droppableContent', 'jnt:page', 'jnt:file'],
                selectableTypesTable: ['jmix:droppableContent', 'jnt:page', 'jnt:file']
            }
        });        
    }
});

Get the full documentation on this page