Pickers are one of the selector types used in Content Editor. This pages describes how to customize the rendering of the existing pickers. If you want to create your own picker from scratch, you should refer to Creating custom selector types for Content Editor.
Content pickers enable you to create a weak reference to a content item of your choice. Content Editor provides the following pickers:
In the definitions.cnd
file, a weak reference property using a picker is defined as:
[qant:myContent] > jnt:content, jmix:editorialContent
- myFilePicker (weakreference,picker) < jnt:file
This definition specifies that an editorial picker will fill the value for the myFilePicker property. You specify the picker configuration that you want to use by adding the type option, as shown here.
[qant:myContent] > jnt:content, jmix:editorialContent
...
- myFilePicker (weakreference,picker[type='file']) < jnt:file
...
The type option defines which configuration to use for the property. The configuration name has to be present in the application registry to allow Content Editor to resolve it. You can find available configurations in the Picker.configs.js Content Editor file.
The configurations are added in the registry with the pickerConfiguration
key, for example:
ceRegistry.add('pickerConfiguration', ‘editorialLink’,...)
The field containing a picker displays like this in Content Editor.
Editors click on the field to open the picker modal.
If you just need to restrict the content types that editors can select in the picker, you don't need to declare a new custom picker. You only need to declare the restriction in the definitions.cnd
file. In the example below, the picker for the myLocationPicker
property allows editors to only select qant:location
.
[qant:customPicker] > jnt:content, qamix:qaContent, jmix:editorialContent - myLocationPicker (weakreference,picker) < qant:location
You can create a custom picker selector type in Content Editor. The process for adding the custom selector type picker is similar to how you add other selector types.
To add a custom picker selector type to the registry, you need to add a new picker configuration to the registry. This configuration is automatically applied by the resolveSelectorType function in Content Editor.
export const resolveSelectorType = ({selectorType, selectorOptions, displayName, ...field}) => {
let selector = registry.get('selectorType', selectorType);
if (selector) {
if (selector.resolver) {
return selector.resolver(selectorOptions);
}
selector.key = selectorType;
return selector;
}
if (selectorType) {
console.warn(`No renderer component for ${selectorType} selectorType`);
} else {
console.error(`Field ${displayName} has no selectorType !`, {selectorOptions, displayName, ...field});
}
return registry.get('selectorType', 'Text');
};
The resolveSelectorType function has the following parameters.
selectorType
for each picker is Picker. The picker selector type has a resolver function so it will be called with the selectorOptions to define which picker configuration to use.resolveType
function looks for the picker configuration of the file type.
{
"name": "type",
"value" : "file"
}
You can add a custom selector type to your Jahia instance.
To add a custom selector type:
To add a new configuration, you must add an entry for the pickerConfiguration type in the registry.
Selector options:
The cmp object in details:
There are two available pickers that can be found in the registry: the ContentPicker and the MediaPicker. These pickers can be a custom component as well.
The treeConfigs object in detail:
The following picker configuration adds a configuration for a picker which allows editors to select nodes of the 'qant:location'
type in Content Editor.
window.jahia.uiExtender.registry.add('pickerConfiguration', 'location', {
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: 'location',
}],
searchSelectorType: 'qant:location',
listTypesTable: ['qant:location'],
selectableTypesTable: ['qant:location']
}
})
The following definition specifies that the qant:customPicker nodes has the myLocationPicker property, which is a weakreference of a qant:location node.
[qant:customPicker] > jnt:content, qamix:qaContent, jmix:editorialContent
- myLocationPicker (weakreference,picker[type='location']) < qant:location
By specifying picker[type='location'] in the definition, Content Editor will use the location configuration defined in the registry (registry.add('pickerConfiguration', 'location'...).
Consider the following definition in the definitions.cnd file.
[qant:customPicker] > jnt:content, qamix:qaContent, jmix:editorialContent
- myObject (weakreference) < qant:myObject
For example, you can add the qant_customPicker.json file to specify the picker configuration to use.
{
"name":"qant:customPicker",
"displayName":"Custom picker",
"description":"",
"dynamic":false,
"fields":[
{
"name":"myObject",
"selectorType": "Picker",
"selectorOptions":[{
"name": "type",
"value" : "location"
}]
}
]
}
The previous JSON definition specifies that the myObject field will use the Picker selector type ("selectorType": "Picker") and specifies the type of the picker through the selector options. The selector option has to contain an object with the property "name": "type" and the value is the name of the configuration to use for the picker, which in this case is "location".