How to declare a custom picker?

Question

How can I declare a custom picker in Jahia 8 in order to specify specific values for:

• the root node of the picker
  • to point to a specific page / folder of the site
• the types of nodes to be displayed in the left navigation tree of the picker
  • if I want to display custom node types
• the types of nodes that can actually be selected in the picker

Answer

This can be done by using the following picker declaration, and adjusting it to your needs:

window.jahia.uiExtender.registry.add('callback', 'customPickerRegistration', {

    targets: ['jahiaApp-init:33'],
    callback: () => {
        const registry = window.jahia.uiExtender.registry;

        registry.add('pickerConfiguration', 'myCustomPicker', {

            // List of content types that can be selected in the picker
            selectableTypesTable: ['jmix:droppableContent', 'jmix:editorialContent'],

            // List of accordions to be display on the left side of the picker
            accordions: ['picker-pages', 'picker-content-folders'],

            accordionItem: {
                "picker-pages": {
                    // Specify the root node for the Pages accordion
                    rootPath: "/sites/{site}",
                    treeConfig: {
                        // Hide the root node
                        hideRoot: true
                    }
                },
                "picker-content-folders": {
                    // Specify the root node for the Content Folder accordion
                    rootPath: "/sites/{site}/contents",

                    treeConfig: {
                        // Display the root node: in this example, the "/contents" folder
                        hideRoot: false,

                        // List of content types that can be expanded in the left tree
                        openableTypes: ['jmix:visibleInContentTree', 'jnt:contentFolder', 'jmix:list'],

                        // List of content types that can be selected in the left tree, so their content is displayed in the main table
                        selectableTypes: ['jmix:visibleInContentTree', 'jnt:contentFolder', 'jmix:list']

                    },
                    tableConfig: {
                        // List of types that can be expanded in the main table, when using the Structured view
                        openableTypes: ['jmix:list'],
                    }
                }
            }
        });
    }
});

• The selectable content types is defined for the entire picker
  • while you need to specify one root path per accordion
• If you want the picker to only display the Pages or the Content Folder accordion, you need to specify the one you want to use in the accordions property
  • and you can remove the accordionItem configuration of the other accordion, as it won't be displayed