How to display lists in Netlify Preview

Netlify CMS
1

I’m trying to customize the preview in Netlify CMS for my blog. I’ve just added a tags field to my config.yml, which is just a comma-separated list of tags for a blog post. I’m having trouble, however, in displaying those tags. I assume there’s something here that’s more tricky because of immutable.js? Here’s what I have, which I know is probably wrong:

this.props.widgetsFor('tags').map(function(tag, index) {
   return h('span', {key: index}, tag)
})

However, with the tag test the above code returns:

datatestwidgets

I just copied the map function from the documentation, not sure if that’s the way to go with a simple list without fields.

I’ve logged the object in the console, and there are two arrays, with the first being ['data','test']. and the second being ['widgets']. I’m unsure of how to access the actual tag. Doing something like tag[0][1] doesn’t seem to work because the arrays might be in a Object of some sort. Does anyone have any ideas? I’m sure I’m doing something pretty basic the wrong way.

Just to be thorough, here are the corresponding lines from my config.yml. Everything else displays correctly:

collections:
  - name: "post"
    label: "Posts"
    folder: "blog"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Body", name: "body", widget: "markdown"}
2

Hi there, @andystevensname :wave:

Welcome to the Netlify Forums! Looks like this thread has been quiet for a bit since you first posted. Have you made any progress on this in the past three days?

@tomrutgers might have some ideas here as well. He has a wealth of knowledge about the Netlify CMS :netliconfetti:

3

Have a look at some of the starters for examples of custom preview templates:

I think, because you have a flat list, all you have to do is get the data from the tag. I’m not entirely sure, as I always use a fields property for the list widget.

this.props.widgetsFor('tags').map(function(tag, index) {
   return h('span', {key: index}, tag.get('data')
})

With a fields property:

- label: "Tags"
  name: "tags"
  widget: "list"
  fields: 
    - {name: name, widget: string}

And then:

this.props.widgetsFor('tags').map(function(tag, index) {
   return h('span', {key: index}, tag.getIn(['data', 'name']))
})
4

Aha! I see what the issue is. Thank you @tomrutgers for putting those examples together, it confirmed what I was thinking. As it turns out, my initial implementation was working for existing posts, and erroring for new entries. I realized, after staring at it for too long, that a blank entry in the “tags” field caused the preview window to error. I had to wrap things in an if block:

this.props.widgetsFor('tags').map(function(tag, index) {
  if (tag != undefined) {
    return h('span', {key: index}, tag.get('data'))
  }
}

Now my tags are displaying correctly in a flat list (and I tried them with fields, that also works).

1 Like