Support displayFields in the Relation widget #1303

zurawiki · 2018-04-21T01:57:11Z

- Summary

Some relation objects I have are stored by an id field to guarantee each object has a unique value. My ids are random hashes though and they are not very informative, especially looking through the autocomplete options.

By adding the displayFields option, we can render information of the object that is more useful to the user. In my case I can display the title and author, which helps distinguish posts with the same title.

- Test plan

Manual testing works
The test suite passes using yarn test

- Description for the changelog

The relation widget now supports custom display fields

zurawiki · 2018-04-21T01:58:53Z

By only changing the renderSuggestion callback, I don't have to worry about the onChange prop getting the wrong information. I would appreciate any feedback on this approach.

verythorough · 2018-04-21T01:59:31Z

Deploy preview for cms-demo ready!

Built with commit 0d9f19a

https://deploy-preview-1303--cms-demo.netlify.com

verythorough · 2018-04-21T01:59:39Z

Deploy preview for netlify-cms-www ready!

Built with commit 0d9f19a

https://deploy-preview-1303--netlify-cms-www.netlify.com

erquhart · 2018-04-21T02:07:11Z

@zurawiki man you are on fire, where did you come from? These may not get much activity before Monday, but thank you!

_{Sent with GitHawk}

erquhart

Thanks for this, I love the simplicity of your approach. Can you push a commit that updates the first field in the kitchen sink example to use this? That way we can try it out in the deploy preview.

erquhart · 2018-04-24T16:05:26Z

src/components/EditorWidgets/Relation/RelationControl.js

@@ -90,7 +90,14 @@ class RelationControl extends Component {

  renderSuggestion = (suggestion) => {
    const { field } = this.props;
-    const valueField = field.get('valueField');
+    const valueField = field.get('displayFields').toJS() || field.get('valueField');


This would error out if displayFields isn't a list. Instead of converting to JS, just leave the value as is and switch your Array.isArray check to List.isList.

zurawiki · 2018-04-25T00:25:44Z

Thanks for the suggestions @erquhart. I have updated the PR with your feedback.

erquhart · 2018-04-25T01:41:28Z

Can you add it to the example so we can try it out in the deploy preview? The relevant config field is here: https://github.com/netlify/netlify-cms/blob/1.6.0/example/config.yml#L73-L78

zurawiki · 2018-04-25T06:22:04Z

I had a typo in my previous PR. Should be fixed now and live on the preview site. I guess I can't access the CMS from my GitHub username which makes sense.

erquhart · 2018-04-25T13:20:35Z

Found an error - try typing "post" into the relation field in the deploy preview, you'll get this error:

Objects are not valid as a React child (found: Wed Apr 25 2018 21:40:39 GMT-0400 (EDT)).

Which means each displayField value is being output as a React element child - in this case a date object from the date field. We'll need to ensure the value being rendered is renderable.

zurawiki · 2018-04-26T06:42:13Z

Ok, thanks for your patience @erquhart.

My patch was to wrap all items in new String() constructors.

I opted to use this approach over .toString() so that null and undefined values would not cause errors. Date object will get translated to proper strings. Array values will render as new String(['a', 'b']) --> 'a,b' which I think is good enough for now.

I am punting on objects, they render as '[object Object]'

erquhart

I think we're there! Just a few documentation change requests.

erquhart · 2018-04-26T13:50:20Z

website/site/content/docs/widgets/relation.md

    searchFields: ["name", "twitterHandle"]
    valueField: "name"
  ```
-  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 as the user types. Each collection will be represented by the author's handle and follower count. On selection, the author name will be saved for the field.


Combine this change into the first sentence, so the first sentence reads:

The generated UI input will search the authors collection by name and twitterHandle, and display each author's handle and follower count.

erquhart · 2018-04-26T13:50:42Z

website/site/content/docs/widgets/relation.md

@@ -22,7 +23,8 @@ The relation widget allows you to reference items from another collection. It pr
    name: "author"
    widget: "relation"
    collection: "authors"
+    displayFields: ["twitterHandle", "followerCount"]


Drop this to the bottom (optional field).

erquhart · 2018-04-26T13:51:23Z

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. The value field is used by default.


Replace last sentence with:

Defaults to valueField.

zurawiki · 2018-04-26T17:35:24Z

@erquhart updated

zurawiki · 2018-04-29T18:10:36Z

Do you have any idea on when this PR can be merged in? I'd really like to start benefiting from this feature ASAP.

erquhart · 2018-04-30T00:26:39Z

@talves @tech4him1 @Benaiah need one more approval here

_{Sent with GitHawk}

Benaiah · 2018-05-01T23:44:30Z

@zurawiki just merged the changes, thanks for the PR!

erquhart · 2018-05-05T12:20:11Z

@zurawiki getting this released soon.

_{Sent with GitHawk}

* Support displayFields in the Relation widget * Fix typo * Wrap display fields in String constructors * 📝 Documentation updates

erquhart suggested changes Apr 24, 2018

View reviewed changes

Support displayFields in the Relation widget

7c44dd7

Fix typo

8373787

erquhart mentioned this pull request Apr 25, 2018

Netlify CMS 2.0 #1280

Closed

10 tasks

Wrap display fields in String constructors

49a5a61

erquhart suggested changes Apr 26, 2018

View reviewed changes

📝 Documentation updates

0d9f19a

erquhart approved these changes Apr 27, 2018

View reviewed changes

Benaiah approved these changes May 1, 2018

View reviewed changes

Benaiah merged commit cd30b59 into decaporg:master May 1, 2018

zurawiki deleted the rmz-relation-display-field branch June 24, 2018 02:13

barthc mentioned this pull request Jan 9, 2019

Allow displaying a different field that the linked valueField in Relation widget #591

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support displayFields in the Relation widget #1303

Support displayFields in the Relation widget #1303

zurawiki commented Apr 21, 2018

zurawiki commented Apr 21, 2018

verythorough commented Apr 21, 2018 •

edited

Loading

verythorough commented Apr 21, 2018 •

edited

Loading

erquhart commented Apr 21, 2018 •

edited

Loading

erquhart left a comment

erquhart Apr 24, 2018

zurawiki Apr 25, 2018

zurawiki commented Apr 25, 2018

erquhart commented Apr 25, 2018

zurawiki commented Apr 25, 2018

erquhart commented Apr 25, 2018

zurawiki commented Apr 26, 2018

erquhart left a comment

erquhart Apr 26, 2018 •

edited

Loading

erquhart Apr 26, 2018

erquhart Apr 26, 2018

zurawiki commented Apr 26, 2018

zurawiki commented Apr 29, 2018

erquhart commented Apr 30, 2018

Benaiah commented May 1, 2018

erquhart commented May 5, 2018

Support displayFields in the Relation widget #1303

Support displayFields in the Relation widget #1303

Conversation

zurawiki commented Apr 21, 2018

zurawiki commented Apr 21, 2018

verythorough commented Apr 21, 2018 • edited Loading

verythorough commented Apr 21, 2018 • edited Loading

erquhart commented Apr 21, 2018 • edited Loading

erquhart left a comment

Choose a reason for hiding this comment

erquhart Apr 24, 2018

Choose a reason for hiding this comment

zurawiki Apr 25, 2018

Choose a reason for hiding this comment

zurawiki commented Apr 25, 2018

erquhart commented Apr 25, 2018

zurawiki commented Apr 25, 2018

erquhart commented Apr 25, 2018

zurawiki commented Apr 26, 2018

erquhart left a comment

Choose a reason for hiding this comment

erquhart Apr 26, 2018 • edited Loading

Choose a reason for hiding this comment

erquhart Apr 26, 2018

Choose a reason for hiding this comment

erquhart Apr 26, 2018

Choose a reason for hiding this comment

zurawiki commented Apr 26, 2018

zurawiki commented Apr 29, 2018

erquhart commented Apr 30, 2018

Benaiah commented May 1, 2018

erquhart commented May 5, 2018

verythorough commented Apr 21, 2018 •

edited

Loading

verythorough commented Apr 21, 2018 •

edited

Loading

erquhart commented Apr 21, 2018 •

edited

Loading

erquhart Apr 26, 2018 •

edited

Loading