diff --git a/example/config.yml b/example/config.yml index c48921a279dd..943e8ebfb776 100644 --- a/example/config.yml +++ b/example/config.yml @@ -74,6 +74,7 @@ collections: # A list of collections the CMS should be able to edit name: "post" widget: "relationKitchenSinkPost" collection: "posts" + displayFields: ["title", "date"] searchFields: ["title", "body"] valueField: "title" - {label: "Title", name: "title", widget: "string"} diff --git a/src/components/EditorWidgets/Relation/RelationControl.js b/src/components/EditorWidgets/Relation/RelationControl.js index 8cb2d6519753..31651b1ca9b1 100644 --- a/src/components/EditorWidgets/Relation/RelationControl.js +++ b/src/components/EditorWidgets/Relation/RelationControl.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import Autosuggest from 'react-autosuggest'; import uuid from 'uuid/v4'; -import { Map } from 'immutable'; +import { List, Map } from 'immutable'; import { connect } from 'react-redux'; import { debounce } from 'lodash'; import { query, clearSearch } from 'Actions/search'; @@ -90,8 +90,15 @@ class RelationControl extends Component { renderSuggestion = (suggestion) => { const { field } = this.props; - const valueField = field.get('valueField'); - return {suggestion.data[valueField]}; + const valueField = field.get('displayFields') || field.get('valueField'); + if (List.isList(valueField)) { + return ( + + {valueField.toJS().map(key => {new String(suggestion.data[key])}{' '})} + + ); + } + return {new String(suggestion.data[valueField])}; }; render() { diff --git a/website/site/content/docs/widgets/relation.md b/website/site/content/docs/widgets/relation.md index c431884fe089..3be24bcdbb61 100644 --- a/website/site/content/docs/widgets/relation.md +++ b/website/site/content/docs/widgets/relation.md @@ -13,6 +13,7 @@ The relation widget allows you to reference items from another collection. It pr - **Options:** - `default`: accepts any widget data type; defaults to an empty string - `collection`: (**required**) name of the collection being referenced (string) + - `displayFields`: list of one or more names of fields in the referenced collection that will render in the autocomplete menu of the control. Defaults to `valueField`. - `searchFields`: (**required**) list of one or more names of fields in the referenced collection to search for the typed value - `valueField`: (**required**) name of the field from the referenced collection whose value will be stored for the relation - **Example** (assuming a separate "authors" collection with "name" and "twitterHandle" fields): @@ -24,5 +25,6 @@ The relation widget allows you to reference items from another collection. It pr collection: "authors" searchFields: ["name", "twitterHandle"] valueField: "name" + displayFields: ["twitterHandle", "followerCount"] ``` - The generated UI input will search the authors collection by name and twitterHandle as the user types. On selection, the author name will be saved for the field. + The generated UI input will search the authors collection by name and twitterHandle, and display each author's handle and follower count. On selection, the author name will be saved for the field.