README.md

permalink	title
pat/contenbrowser/	Contentbrowser

Contentbrowser

Show a widget to select items in an offcanvas miller-column browser.

Configuration

Option	Type	Default	Description
vocabularyUrl	string	null	This is a URL to a JSON-formatted file used to populate the list
attributes	array	['UID', 'Title', 'portal_type', 'path']	This list is passed to the server during an AJAX request to specify the attributes which should be included on each item.
rootPath	string	"/"	Browsing/searching root path. You will not get beneath this path
rootUrl	string		Browsing/searching root url.
basePath	string	set to rootPath.	Start browse/search in this path.
contextPath	string		Path of the object, which is currently edited. If this path is given, this object will not be selectable.
favorites	array	[]	Array of objects. These are favorites, which can be used to quickly jump to different locations. Objects have the attributes "title" and "path".
maximumSelectionSize	integer	-1	The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
mode	string	"browse"	Toggle between "browse" and "search"
width	integer		Override the width of the selected items field
bSize	integer	10	Batch size of the items listed in levels
maxDepth	integer		Maximum level depth for "browse" mode
separator	string	','	Select2 option. String which separates multiple items.
upload	boolean		Allow file and image uploads from within the related items widget.
recentlyUsed	boolean	false	Show the recently used items dropdown.
recentlyUsedKey	integer		Storage key for saving the recently used items. This is generated with fieldname and username in the patternoptions.
recentlyUsedMaxItems	integer	20	Maximum items to keep in recently used list. 0: no restriction.
customComponentKeys	dict	{}	Register custom components. Currently only "SelectedItem" implemented

Default

<input
    type="text"
    class="pat-contentbrowser"
    data-pat-contentbrowser='{"selectableTypes": ["Document"], "vocabularyUrl": "contentbrowser-test.json"}'
/>

Existing values, some bad

<input
    type="text"
    class="pat-contentbrowser"
    value="asdf1234gsad,sdfbsfdh345,asdlfkjasdlfkjasdf,kokpoius98"
    data-pat-contentbrowser="width:30em; vocabularyUrl:contentbrowser-test.json"
/>

Selectable Types

<input
    type="text"
    class="pat-contentbrowser"
    data-pat-contentbrowser='{"selectableTypes": ["Document"], "vocabularyUrl": "contentbrowser-test-selectable.json"}'
/>

Select a single item

<input
    type="text"
    class="pat-contentbrowser"
    data-pat-contentbrowser='{"selectableTypes": ["Document"], "vocabularyUrl": "contentbrowser-test.json", "maximumSelectionSize": 1}'
/>

Mode "browse", Upload

<input
    type="text"
    class="pat-contentbrowser"
    data-pat-contentbrowser='{"selectableTypes": ["Image", "File"], "vocabularyUrl": "contentbrowser-test.json", "upload": true}'
/>

Register custom component

Currently only for SelectedItem component available.

<input
    type="text"
    class="pat-contentbrowser"
    data-pat-contentbrowser='{
        "customComponentKeys": {
            "SelectedItem": "pat-contentbrowser.myfield.MySelectedItemComponent",
        },
    }'
/>

Copy the existing component src/SelectedItem.svelte to your addon, customize it and register it in your JS bundle as follows:

...
import plone_registry from "@plone/registry";
...

async function register_selecteditem_component() {
    // we register our component to a custom keyname,
    // which later can be used for pattern_options
    const SelectedImages = (await import("./MySelectedItemComponent.svelte")).default;
    plone_registry.registerComponent({
        name: "pat-contentbrowser.myfield.MySelectedItemComponent",
        component: SelectedImages,
    });
}
register_selecteditem_component();

...

Note: this needs the svelte-loader plugin in your webpack.config.js ... see mockups webpack config for info.