To expand upon my custom widget comment, I want to try following this documentation in order to build a preview pane for the variable types list widget: https://www.netlifycms.org/docs/customization/

No issue tracking this that I'm aware of, but I could be wrong. Would definitely like to see previews working, just haven't heard a lot of feedback from folks using this functionality to determine if we got the control side right.

cc/ @smnh

Hey,

Yes originally we had more advanced previews for typed list widget. But eventually we dropped it as, if I understood correctly, the preview itself might be customized per case.

But if preview of typed lists is still desired we can bring it back, I think one of the commits of the original PR still has it -
#1857
The discussion of the PR also has some screenshots of how previews of typed lists work

One problem is that we've passed more power to widget control components over time, but did not do the same for the widget preview components. The preview component core needs to catch up to the control component core to address this.

@erquhart @smnh Thank you for the feedback. I'll checkout the above PR - that should be helpful if I get around to testing a custom solution!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

For me the preview pane has been working perfectly for my very extensive Variable Type setup. I don't know why the documentation says it doesn't work :)

@laurenskling Do you have some example or docs how to implement it? Maybe we could extend the netlify cms docs?

Preview pane has been working for me out of the box for Variable Types. I haven't done anything special (I think...) isn't it working for you? If that's the case, I'm willing to try to setup a MVP for you....

@laurenskling - I haven't actually tested it, but maybe I will now. I figured based off the docs it just wasn't supported.

To confirm you're using widget: "list" with set of types containing various nested fields of widget: "object" or something similar?

Did you do anything to customize your preview pane setup or are you just using it out of the box?

Just as the docs say. Note: types in list must always be object.

export default {
  label: 'collection',
  name: 'collection',
  create: true,
  folder: `collection`,
  slug: '{{slug}}',
  fields: [
    {
      label: 'Title',
      name: 'title',
      widget: 'string',
    },
    {
      label: 'Blocks',
      name: 'blocks',
      widget: 'list',
      types: [
        {
          label: 'Todo',
          name: 'todo',
          widget: 'object',
          fields: [
            {
              label: 'Content',
              name: 'content',
              widget: 'markdown',
              required: true,
            },
          ],
        },
      ],
    },
  ],
};

CMS.registerPreviewTemplate('collection', PagePreview);

const PagePreview = ({ entry }) => {
  const data = entry.getIn(['data']).toJS();
  if (data) {
    return (
....

This is just as normal, right? It just works for me

The docs might mean having default previews is not supported. Will check and update here.

FYI, rephrased the docs to mention custom preview support #3376

Thank you both @erezrokah & @laurenskling!

Whooo, didn't know that it works. This is insane 👍 🥇 🎉

Use case for passing widgets down to objects contained in a list.

config.yml

...
collections:
  - name: "pages"
    label: "Pages"
    create: true
    fields:
      - label: "Sections"
        name: "sections"
        widget: "list"
        types:
          - label: "Content Block"
            name: "block_body"
            widget: "object"
            fields:
              - label: "Image"
                name: "image"
                widget: "image"
              - label: "Markdown"
                name: "markdown"
                widget: "markdown"

admin.html

widgetsFor('sections').map(function(section, index) {
   console.log(section);
});

outputs (with Immutable formatting)

{"data" => 
    {"image" => "/assets/brett-jordan-1329359-unsplash.jpg"}
    {"markdown" => "# Title"}
    {"type" => "block_body"}
}
{"widgets" => undefined} 🚫 

But, when I use a standard list:

   - label: "Sections"
        name: "sections"
        widget: "list"
        fields:
          - label: "Markdown"
            name: "markdown"
            widget: "markdown"
          - label: "Image"
            name: "image"
            widget: "image"

admin.html outputs

{"data" => 
    {"image" => "/assets/brett-jordan-1329359-unsplash.jpg"}
    {"markdown" => "# Title"}
    {"type" => "block_body"} 
}
{"widgets" => 
    {"image" =>  Object} ✅
    {"markdown" => Object} ✅
}

Current workaround to render markdown with https://www.npmjs.com/package/marked and dangerouslySetInnerHTML:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

const sections = widgetsFor('sections').map(function(section, index) {
   const markdown = section.getIn(['data', 'markdown']);
   const markup = markdown ? window.marked(markdown) : '';
   return html`<div dangerouslySetInnerHTML=${{ __html: markup }}></div>`;
});

I've hit the same issue when creating a custom preview component, as the widgetsFor helper isn't returning the widgets structure alongside data for variable type lists, so have opened #7296 to address it.

Thanks for the precise issue description @garrettboatman, that was helpful!