diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fcb5b65c4..bd0be3c81b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ ### Feature +- Add ability to filter the attributes that are saved in the ObjectBrowserWidget @sneridagh +- Add `object_browser` as widget @sneridagh + ### Bugfix ### Internal diff --git a/docs/source/blocks/editcomponent.md b/docs/source/blocks/editcomponent.md index 68180c9dc7..f8e93fb9ae 100644 --- a/docs/source/blocks/editcomponent.md +++ b/docs/source/blocks/editcomponent.md @@ -189,6 +189,36 @@ if we use object browser widget for fields: - **image**: dataName is _url_ and propDataName is null - **link**: dataName is _href_ and propDataName is null +#### Usage in blocks schema + +Used in along with `InlineForm`, one can instantiate and configure it using the widget props like this: + +```js +{ + title: 'Item', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['href'], + }, + ], + properties: { + href: { + title: 'title', + widget: 'object_browser', + mode: 'link', + selectedItemAttrs: ['Title', 'Description'], + }, +} +``` + +#### selectedItemAttrs + +You can select the attributes from the object (coming from the metadata brain from +@search endpoint used in the browser) using the `selectedItemAttrs` prop as shown in the +last example. + #### ObjectBrowserWidgetMode() Returns the component widget with _mode_ passed as argument. diff --git a/src/components/manage/Widgets/ObjectBrowserWidget.jsx b/src/components/manage/Widgets/ObjectBrowserWidget.jsx index 316b5a6e94..88f97d03e6 100644 --- a/src/components/manage/Widgets/ObjectBrowserWidget.jsx +++ b/src/components/manage/Widgets/ObjectBrowserWidget.jsx @@ -137,7 +137,6 @@ class ObjectBrowserWidget extends Component { if (maxSize === 1 && value.length === 1) { value = []; //enable replace of selected item with another value, if maxsize is 1 } - let exists = false; let index = -1; value.forEach((_item, _index) => { @@ -150,8 +149,26 @@ class ObjectBrowserWidget extends Component { // '@id': flattenToAppURL(item['@id']), // }); if (!exists) { - //add item - value.push(item); + // add item + // Check if we want to filter the attributes of the selected item + let resultantItem = item; + if (this.props.selectedItemAttrs) { + const allowedItemKeys = [ + ...this.props.selectedItemAttrs, + // Add the required attributes for the widget to work + '@id', + 'title', + ]; + resultantItem = Object.keys(item) + .filter((key) => allowedItemKeys.includes(key)) + .reduce((obj, key) => { + obj[key] = item[key]; + return obj; + }, {}); + } + // Add required @id field, just in case + resultantItem = { ...resultantItem, '@id': item['@id'] }; + value.push(resultantItem); this.props.onChange(this.props.id, value); } else { //remove item diff --git a/src/config/Widgets.jsx b/src/config/Widgets.jsx index cf52e0c748..549afff98b 100644 --- a/src/config/Widgets.jsx +++ b/src/config/Widgets.jsx @@ -49,6 +49,7 @@ export const widgetMapping = { align: AlignWidget, url: UrlWidget, email: EmailWidget, + object_browser: ObjectBrowserWidget, }, vocabulary: { 'plone.app.vocabularies.Catalog': ObjectBrowserWidget,