cannot make filter to work with CMS.init

[PetroPavlenko]

Describe the bug In my team we tried to use filter feature with CMS.init but this doesn't work. I know that filter should work with folder collection. But I haven't found way to add them using CMS.init. Maybe I'm doing something wrong?

Applicable Versions:

• Netlify CMS version:2.12.9
• Git provider: GitHub
• OS: OS X
• Browser version chrome 83
• Node.JS version: v12.16.1
• yarn: 1.22.4

CMS configuration

/cms.tsx :

window.CMS_MANUAL_INIT = true;

import CMS from "netlify-cms-app";

import { TermsPagePreview, AboutPagePreview } from "./preview-templates";
import { termsCollection } from "./collections/terms";
import { menusCollection } from "./collections/menus";
import { aboutPageConfig } from "./collections/about";
import "./editor-components/TextWithAlign";

const isLocal = process.env.GATSBY_IS_LOCAL === "true";

const config: NetlifyCms.CmsConfig = {
  backend: {
    name: "git-gateway",
    branch: "master",
    commit_messages: {
      create: "Create {{collection}} “{{slug}}”",
      update: "Update {{collection}} “{{slug}}”",
      delete: "Delete {{collection}} “{{slug}}”",
      uploadMedia: "[skip ci] Upload “{{path}}”",
      deleteMedia: "[skip ci] Delete “{{path}}”"
    }
  },
  publish_mode: isLocal ? undefined : "editorial_workflow",
  local_backend: isLocal,
  media_folder: "static/img",
  public_folder: "/img",
  collections: [
    termsCollection,
    menusCollection,
    { 
      name: "pages", 
      label: "Pages", 
      files: [aboutPageConfig] 
    },
  ]
};

CMS.init({ config });
CMS.registerPreviewTemplate("terms", TermsPagePreview);
CMS.registerPreviewTemplate("about", AboutPagePreview);

/terms.tsx :

import { pageMetaData } from "../custom-fields/meta-data";

export const termsCollection = {
  name: "terms",
  label: "Terms",
  folder: "src/pages/terms",
  create: true,
  identifier_field: "slug",
  preview_path: "terms/{{slug}}",
  slug: "{{slug}}",
  fields: [
    pageMetaData,
    {
      label: "terms",
      name: "templateKey",
      widget: "hidden",
      default: "terms-page"
    },
    {
      label: "Title",
      name: "title",
      widget: "string"
    },
    {
      label: "Body",
      name: "body",
      widget: "markdown",
      editorComponents: ["image", "text-with-align"]
    }
  ]
};

/meta-data.tsx :

export const pageMetaData = {
  label: "Page meta data",
  name: "pageMetaData",
  widget: "object",
  fields: [
    {
      label: "Exclude from sitemap.xml",
      name: "isExcludedFromSitemap",
      widget: "boolean",
      default: false
    },
    {
      label: "meta title",
      name: "title",
      widget: "string",
      hint: "*required. max length is 60 characters",
      filter: { field: "isExcludedFromSitemap", value: false },
      pattern: [/^.{0,60}$/, "max length is 60 characters"],
      default: "OVO Energy"
    }, {
      label: "meta description",
      name: "description",
      widget: "string",
      hint: "*required. max length is 155 characters",
      filter: { field: "isExcludedFromSitemap", value: true },
      pattern: [/^.{0,155}$/, "max length is 155 characters"],
    }, 
  ],
};

[barthc]

You would have to setup two collections and use the filter option like so for both:

label: "Page meta data",
name: "pageMetaData",
widget: "object",
filter: { field: "isExcludedFromSitemap", value: false or true },

Or you can use the view_filters options, no need to setup another collection in this case.

label: "Page meta data",
name: "pageMetaData",
widget: "object",
view_filters:
  - label: ExcludedFromSitemap
    field: isExcludedFromSitemap
    pattern: true

[PetroPavlenko]

@barthc I use js to declarate configs. I tried

export const pageMetaData = {
  label: "Page meta data",
  name: "pageMetaData",
  widget: "object",
  filter: { field: "isExcludedFromSitemap", value: true },
  fields: [

But this doesn't work Maybe you know way to declarate collections in JS ?

[barthc]

Whoops sorry my bad, thought I added the filter: { field: "isExcludedFromSitemap", value: true }, as a collection level config ..

Add the filter option as a collection level option. For example:

export const termsCollection = {
  name: "terms",
  label: "Terms",
  folder: "src/pages/terms",
  create: true,
  identifier_field: "slug",
  filter: { field: "isExcludedFromSitemap", value: true },