feat(core): Allow customising the collection list based on multiple fields #2140

devinea · 2019-03-05T01:16:55Z

Summary

This allows customising the collection list display based on multiple fields rather than the title or identifier_field.
Adding the following to the collection definition in the config.yml controls the feature.

    list_fields: ['version','title']
    list_fields_seperator: ' - '

full collection

  - name: 'faq' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'FAQ' # Used in the UI
    folder: '_faqs'
    list_fields: ['version','title']
    list_fields_seperator: ' - '
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - { label: 'Question', name: 'title', widget: 'string', tagname: 'h1' }
      - { label: 'Answer', name: 'body', widget: 'markdown' }
      - { label: 'Version', name: 'version', widget: 'string', default : '1.01' }

Test plan

Here is a screenshot of the result.

netlify · 2019-03-05T01:17:02Z

Preview proposed changes to the CMS demo site in the link below:

Built with commit af645e9

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

netlify · 2019-03-07T22:41:05Z

Preview proposed changes to netlifycms.org in the link below:

Built with commit 077a408

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

tomrutgers · 2019-03-08T00:09:50Z

@devinea I like where this is going! List view customization is a long standing feature request, so thanks for picking this up!

I have to say though, I find the concept of having three different options to displaying a text in the list view (title, identifier_field and list_fields) a bit hard to grasp. If we can somehow manage to integrate identifier_field and list_fields into a single property with some kinda smart logic in the background that figures out if it's a single field or an array of fields, it would be a whole lot easier to sell. Might be overthinking this though. Thoughts @erquhart?

talves · 2019-03-08T00:26:04Z

I like this feature. Great start!

I agree, we should just check for an array and use it if it exists. and then have identifier_fields_separator as an optional field that defaults to -.

erquhart · 2019-03-11T16:31:17Z

Thanks for this @devinea! See #2019 for previous discussion on how to address the underlying issue here. The current practice for constructing custom values in the configuration is to use template strings, as we do for the slug config, so we should probably go that route for this as well: https://www.netlifycms.org/docs/configuration-options/#slug

This would allow us to use a familiar approach and just one config field to set it up. We could call the config key summary.

Your use case would then look like:

  - name: 'faq' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'FAQ' # Used in the UI
    folder: '_faqs'
    summary: '{{version}} - {{title}}'
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - { label: 'Question', name: 'title', widget: 'string', tagname: 'h1' }
      - { label: 'Answer', name: 'body', widget: 'markdown' }
      - { label: 'Version', name: 'version', widget: 'string', default : '1.01' }

Thoughts?

MerlindlH · 2019-03-25T13:06:23Z

Hey everyone,
thanks for your feedback :)
@devinea and I refactored the code according to @erquhart 's suggestions. In detail, we added a summary key, replacing list_fields and list_fields_separator and made use of the existing logic for compiling slug templates to replace the templates in this field. This also makes use of the existing logic to find the respective identifier and use it when compiling the template.

erquhart

Thanks for putting this together @devinea and @MerlindlH!

erquhart · 2019-03-25T17:24:14Z

packages/netlify-cms-core/src/backend.js

-function slugFormatter(collection, entryData, slugConfig) {
-  const template = collection.get('slug') || '{{slug}}';
-
+export function getIdentifier(entryData, collection) {


This is just a wrapper around selectIdentifier, use that instead of exporting this.

addressed, thanks :)

erquhart · 2019-03-26T16:09:30Z

packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js

+
+  const summary = collection.get('summary');
+  if (summary) {
+    title = compileSlug(summary, new Date(), getIdentifier(entryData, collection), entryData);


The date replacements should be based off of fields in the entry, similar to what we do when creating a deploy preview URL: https://github.com/netlify/netlify-cms/blob/3cac3ef7796e89f8a3462b2dc06457fb4086cb29/packages/netlify-cms-core/src/backend.js#L242

A problem could arise here if we do not have a date field in the entry.
We would like to use the compileSlug function and "ignore" all date references in summary (which compileSlug currently doesn't allow, so we'd have to refactor it) or we could catch the raised exception and retry compileSlug after removing all date template string from summary

erquhart · 2019-03-27T21:31:50Z

packages/netlify-cms-core/src/reducers/collections.js

@@ -128,7 +128,7 @@ export const selectInferedField = (collection, fieldName) => {
  const fields = collection.get('fields');
  let field;

-  // If colllection has no fields or fieldName is not defined within inferables list, return null
+  // If collection has no fields or fieldName is not defined within inferables list, return null


I must have looked at this in annoyance a thousand times but never bothered to fix lol 👍👍

packages/netlify-cms-core/src/backend.js

erquhart · 2019-03-27T23:20:05Z

Pushed up a refactor, please test it in your setup and let me know if you run into any issues. It's rebased so you'll likely need to run yarn install first.

MerlindlH · 2019-03-28T14:28:41Z

Thanks for refactoring the code and extracting the logic :)

Fixed a small issue where the string wasn't replaced by the right content but the string itself
I changed the date handling a bit so that the summary still uses the date if there is one in the fields

erquhart · 2019-03-28T14:41:50Z

packages/netlify-cms-core/src/lib/stringTemplate.js

 export function extractTemplateVars(template) {
  const regexp = RegExp(templateVariablePattern, 'g');
-  return extractVars(template, regexp);
+  const contentRegexp = RegExp(templateContentPattern, 'g');
+  return template.match(regexp).map(elem => elem.match(contentRegexp)[0]);


yeah, but I forgot to handle the case where there are no matches and the first match-call returns null instead of []

MerlindlH · 2019-03-28T15:13:03Z

Apparently the search doesn't work anymore, I'm currently trying to figure out which change did crash it (update: fixed)

erquhart · 2019-03-28T15:56:42Z

Fantastic edits, thank you. Writing code when sleep deprived is never a good idea, not sure why I do it 🙄

Added a refactor and addressed the failing CI build.

erquhart · 2019-03-28T17:18:07Z

@MerlindlH everything looking good to your testing? We can merge and release in the next beta if so.

MerlindlH · 2019-03-29T11:39:28Z

I just checked it locally, fixed a small issue with searching a date and I think It's good to go (if the remote tests also go green, locally tests seemed fine)
Thanks for your feedback and support :)

erquhart · 2019-03-29T14:40:02Z

Sounds good - is one more commit coming for the date search fix you mentioned?

_{Sent with GitHawk}

MerlindlH · 2019-03-29T15:19:00Z

No, no more commits from my side (at least regarding the date search, that is fixed :) )
Let me know If there is anything else that has to be corrected, besides that it's good to go from my side :)

erquhart · 2019-03-29T20:18:39Z

@MerlindlH @devinea this is currently published in the beta channel, you can use it at netlify-cms@beta.

devinea · 2019-04-01T19:11:51Z

Awesome @erquhart @MerlindlH thanks

adamtaylor13 · 2019-04-22T23:24:46Z

Is this in the docs as of now, or should this thread be the general reference for now? Just curious because I don't see it, but I'm not sure if I'm overlooking it somewhere.

tomrutgers · 2019-04-22T23:39:17Z

@adamtaylor13 You can find this in the docs here: https://www.netlifycms.org/docs/configuration-options/#summary

adamtaylor13 · 2019-04-23T00:17:26Z

@tomrutgers DOH. I missed that somehow. Thanks!

erquhart suggested changes Mar 26, 2019

View reviewed changes

erquhart reviewed Mar 27, 2019

View reviewed changes

erquhart suggested changes Mar 27, 2019

View reviewed changes

packages/netlify-cms-core/src/backend.js Outdated Show resolved Hide resolved

packages/netlify-cms-core/src/backend.js Outdated Show resolved Hide resolved

erquhart force-pushed the entry_card branch from ef63db8 to 6f0be01 Compare March 27, 2019 23:18

erquhart reviewed Mar 28, 2019

View reviewed changes

erquhart force-pushed the entry_card branch from cd12eb4 to 1ffeab3 Compare March 28, 2019 20:40

devinea and others added 13 commits March 28, 2019 17:07

Allow customising the collection list based on multiple fields

66ee500

Update docs

351c485

prettier

b5e8e4b

applied feedback, use template strings for summary field

703d594

format code

4723576

adjust search bar to make summary string fields searchable

8ae1173

format code

c5a112e

make searchList unique

46c3fb3

removes getIdentifier wrapper

a80bd04

refactor

d493d5f

fix template string replacements

3d1d099

fix imports

6e6ca1c

Update config.yml

8993fa7

Merlin de la Haye and others added 4 commits March 28, 2019 17:07

fix template string regex on case of no matches

ceed3c1

refactor

6cb5dc1

fixed issue if there are no fields

c39756b

simplify dev-test example

0bda57d

erquhart force-pushed the entry_card branch from 1ffeab3 to 0bda57d Compare March 28, 2019 21:08

fixed issue with the search not picking up dates

af645e9

erquhart approved these changes Mar 29, 2019

View reviewed changes

erquhart merged commit 573ad88 into decaporg:master Mar 29, 2019

devinea deleted the entry_card branch April 1, 2019 19:11

erquhart mentioned this pull request Jun 5, 2019

Entry Card Customization #2019

Closed

erquhart mentioned this pull request Sep 5, 2019

Add configuration option to define a separator for relation widget displayFields #2606

Closed

erezrokah mentioned this pull request Feb 21, 2020

No way to meaningfully customize EntryCards (list/grid cards) #2868

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core): Allow customising the collection list based on multiple fields #2140

feat(core): Allow customising the collection list based on multiple fields #2140

devinea commented Mar 5, 2019

netlify bot commented Mar 5, 2019 •

edited

Loading

netlify bot commented Mar 7, 2019 •

edited

Loading

tomrutgers commented Mar 8, 2019 •

edited

Loading

talves commented Mar 8, 2019

erquhart commented Mar 11, 2019 •

edited

Loading

MerlindlH commented Mar 25, 2019

erquhart left a comment

erquhart Mar 25, 2019

MerlindlH Mar 27, 2019

erquhart Mar 26, 2019

MerlindlH Mar 27, 2019

erquhart Mar 27, 2019

erquhart commented Mar 27, 2019

MerlindlH commented Mar 28, 2019

erquhart Mar 28, 2019

MerlindlH Mar 28, 2019

MerlindlH commented Mar 28, 2019 •

edited

Loading

erquhart commented Mar 28, 2019

erquhart commented Mar 28, 2019 •

edited

Loading

MerlindlH commented Mar 29, 2019 •

edited

Loading

erquhart commented Mar 29, 2019

MerlindlH commented Mar 29, 2019

erquhart commented Mar 29, 2019

devinea commented Apr 1, 2019

adamtaylor13 commented Apr 22, 2019

tomrutgers commented Apr 22, 2019

adamtaylor13 commented Apr 23, 2019

feat(core): Allow customising the collection list based on multiple fields #2140

feat(core): Allow customising the collection list based on multiple fields #2140

Conversation

devinea commented Mar 5, 2019

netlify bot commented Mar 5, 2019 • edited Loading

netlify bot commented Mar 7, 2019 • edited Loading

tomrutgers commented Mar 8, 2019 • edited Loading

talves commented Mar 8, 2019

erquhart commented Mar 11, 2019 • edited Loading

MerlindlH commented Mar 25, 2019

erquhart left a comment

Choose a reason for hiding this comment

erquhart Mar 25, 2019

Choose a reason for hiding this comment

MerlindlH Mar 27, 2019

Choose a reason for hiding this comment

erquhart Mar 26, 2019

Choose a reason for hiding this comment

MerlindlH Mar 27, 2019

Choose a reason for hiding this comment

erquhart Mar 27, 2019

Choose a reason for hiding this comment

erquhart commented Mar 27, 2019

MerlindlH commented Mar 28, 2019

erquhart Mar 28, 2019

Choose a reason for hiding this comment

MerlindlH Mar 28, 2019

Choose a reason for hiding this comment

MerlindlH commented Mar 28, 2019 • edited Loading

erquhart commented Mar 28, 2019

erquhart commented Mar 28, 2019 • edited Loading

MerlindlH commented Mar 29, 2019 • edited Loading

erquhart commented Mar 29, 2019

MerlindlH commented Mar 29, 2019

erquhart commented Mar 29, 2019

devinea commented Apr 1, 2019

adamtaylor13 commented Apr 22, 2019

tomrutgers commented Apr 22, 2019

adamtaylor13 commented Apr 23, 2019

netlify bot commented Mar 5, 2019 •

edited

Loading

netlify bot commented Mar 7, 2019 •

edited

Loading

tomrutgers commented Mar 8, 2019 •

edited

Loading

erquhart commented Mar 11, 2019 •

edited

Loading

MerlindlH commented Mar 28, 2019 •

edited

Loading

erquhart commented Mar 28, 2019 •

edited

Loading

MerlindlH commented Mar 29, 2019 •

edited

Loading