Related items

Show a widget to select related items.

Configuration

Option	Type	Default	Description
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.
basePath	string	set to rootPath.	Start browse/search in this path.
breadcrumbTemplate	string		Template to use for a single item in the breadcrumbs.
breadcrumbTemplateSelector	string	null	Select an element from the DOM from which to grab the breadcrumbTemplate.
closeOnSelect	boolean	true	Select2 option. Whether or not the drop down should be closed when an item is selected.
contextPath	string		Path of the object, which is currently edited. If this path is given, this object will not be selectable.
dropdownCssClass	string	'pattern-relateditems-dropdown'	Select2 option. CSS class to add to the drop down element.
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.
minimumInputLength	integer	0	Number of characters necessary to start a search.
mode	string		Initial widget mode. Possible values: are 'auto', 'search' and 'browse'. If set to 'search', the catalog is searched for a searchterm. If set to 'browse', browsing starts at basePath. Default: 'browse', which means the search and browse in separated tabs. Auto would combine global search and browse in one selection.
orderable	boolean	true	Whether or not items should be drag-and-drop sortable.
pageSize	integer	10	Batch size to break down big result sets into multiple pages.
recentlyUsed	boolean	false	Show the recently used items dropdown.
recentlyUsedMaxItems	integer	20	Maximum items to keep in recently used list. 0: no restriction.
resultTemplate	string	Refer to source	Template for an item in the in the list of results. Refer to source for default.
resultTemplateSelector	string	null	Select an element from the DOM from which to grab the resultTemplate.
rootPath	string	"/"	Only display breadcrumb path elements deeper than this path.
rootUrl	string		Visible URL up to the rootPath. This is prepended to the currentPath to generate submission URLs.
scanSelection	boolean		Scan the list of selected elements for other patterns.
selectableTypes	array	null	If the value is null all types are selectable. Otherwise, provide a list of strings to match item types that are selectable.
selectionTemplate	string	Refer to source	Template for element that will be used to construct a selected item.
selectionTemplateSelector	string	null	Select an element from the DOM from which to grab the selectionTemplate.
separator	string	','	Select2 option. String which separates multiple items.
sortOn	string	null	Index on which to sort on. If null, will default to term relevance (no sort) when searching and folder order (getObjPositionInParent) when browsing.
sortOrder	string	'ascending'	Sort ordering.
tokenSeparators	array	[",", " "]	Select2 option, refer to select2 documentation.
toolbarTemplate	string		Template for element to which toolbar items will be appended.
toolbarTemplateSelector	string	null	Select an element from the DOM from which to grab the toolbarTemplate.
upload	boolean		Allow file and image uploads from within the related items widget.
uploadAllowView	string		View, which returns a JSON response in the form of {allowUpload: true}, if upload is allowed in the current context.
vocabularyUrl	string	null	This is a URL to a JSON-formatted file used to populate the list
width	string	'100%'	Specify a width for the widget.

Default, mode "browse" (separate browse and search tabs)

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

Default, mode "auto" (search/browser combined)

<input
    type="text"
    class="pat-relateditems"
    data-pat-relateditems="width:30em;
                            mode:auto;
                            vocabularyUrl:relateditems-test.json"
/>

Default, mode "search"

<input
    type="text"
    class="pat-relateditems"
    data-pat-relateditems="width:30em;
                            mode:search;
                            vocabularyUrl:relateditems-test.json"
/>

Default, mode browse, favorites, recently used and upload

<input
    type="text"
    class="pat-relateditems"
    data-pat-relateditems='{"vocabularyUrl": "relateditems-test.json", "favorites": [{"title": "Projects", "path": "/path"}], "recentlyUsed": true, "upload": true}'
/>

Existing values, some bad

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

Selectable Types

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

Select a single item

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

Mode "browse", Upload

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