Creating Content Models via Code

import { ModelFactory } from "webiny/api/cms/model";

class MyModelImpl implements ModelFactory.Interface {
  async execute(builder: ModelFactory.Builder) {
    return [
      builder
        .public({ modelId: "myModel", name: "My Model", group: "ungrouped" })
        .description("Description of the model")
        .fields(fields => ({
          // field definitions here
        }))
        .layout([/* row definitions */])
        .titleFieldId("fieldId")
        .singularApiName("MyModel")
        .pluralApiName("MyModels")
    ];
  }
}

export default ModelFactory.createImplementation({
  implementation: MyModelImpl,
  dependencies: []
});

<Api.Extension src={"/extensions/MyModel.ts"} />

.layout([
  ["name", "slug"],   // row 1: two columns
  ["description"],    // row 2: one column, full width
  ["category", "price"]
])

.fields((fields) => ({
  name: fields.text().renderer("textInput").label("Name"),
  address: fields
    .object()
    .renderer("objectAccordionSingle")
    .label("Address")
    .fields((sub) => ({
      street: sub.text().renderer("textInput").label("Street"),
      city:   sub.text().renderer("textInput").label("City"),
      zip:    sub.text().renderer("textInput").label("ZIP")
    }))
    .layout([
      ["street"],           // inner layout — only uses sub-field IDs
      ["city", "zip"]
    ])
}))
.layout([
  ["name"],
  ["address"]               // outer layout just references the object field
])

.fields((fields) => ({
  blocks: fields
    .dynamicZone()
    .label("Content blocks")
    .template("hero", {
      name: "Hero",
      gqlTypeName: "HeroBlock",
      componentName: "Custom/Hero",
      fields: (t) => ({
        heading: t.text().renderer("textInput").label("Heading"),
        image:   t.asset().label("Image")
      }),
      layout: [
        ["heading"],          // layout inside the "hero" template only
        ["image"]
      ]
    })
    .template("quote", {
      name: "Quote",
      gqlTypeName: "QuoteBlock",
      componentName: "Custom/Quote",
      fields: (t) => ({
        text:   t.longText().renderer("textarea").label("Quote text"),
        author: t.text().renderer("textInput").label("Author")
      }),
      layout: [
        ["text"],
        ["author"]
      ]
    })
}))
.layout([
  ["blocks"]                  // outer layout references the dynamicZone as a whole
])

.renderer("dynamicZone", { container: false, addItemLabel: "Add block" })
.renderer("objectAccordionSingle", { open: false, container: true, itemTitle: "name" })
.renderer("objectAccordionMultiple", { itemTitle: "title", addItemLabel: "Add section" })

tags: fields
  .text()
  .list()
  .renderer("textInputs") // plural, because .list() is chained
  .label("Tags");

tags: fields
  .text()
  .list()
  .renderer("textInput") // WRONG: should be "textInputs"
  .label("Tags");

.fields(fields => ({
  name: fields.text().renderer("textInput").label("Name"),
  divider: fields.uiSeparator().label("Additional Info"),
  bio: fields.longText().renderer("textarea").label("Bio")
}))
.layout([["name"], ["divider"], ["bio"]])

.fields(fields => ({
  warning: fields
    .uiAlert()
    .label("Changes to this section require approval.")
    .alertType("warning"),
  title: fields.text().renderer("textInput").label("Title")
}))
.layout([["warning"], ["title"]])

.fields(fields => ({
  tabs: fields
    .uiTabs()
    .tab("general", {
      label: "General",
      fields: sub => ({
        title: sub.text().renderer("textInput").label("Title").required(),
        slug: sub.text().renderer("textInput").label("Slug").required()
      }),
      layout: [["title", "slug"]]
    })
    .tab("seo", {
      label: "SEO",
      fields: sub => ({
        seoTitle: sub.text().renderer("textInput").label("SEO Title"),
        seoDescription: sub.longText().renderer("textarea").label("SEO Description")
      }),
      layout: [["seoTitle"], ["seoDescription"]],
      rules: [
        { type: "accessControl", target: "identity", operator: "matches", value: "team:marketing", action: "hide" }
      ]
    })
}))
.layout([["tabs"]])

interface FieldRule {
  type: "accessControl" | "condition";
  target: string;
  operator: string;
  value: string | number | boolean | null;
  action: "hide" | "disable";
}

title: fields
  .text()
  .renderer("textInput")
  .label("Marketing Title")
  .rules([
    {
      type: "accessControl",
      target: "identity",
      operator: "matches",
      value: "team:marketing",
      action: "hide"
    }
  ]);

seoDescription: fields
  .longText()
  .renderer("textarea")
  .label("SEO Description")
  .rules([
    { type: "condition", target: "seoTitle", operator: "isEmpty", value: null, action: "disable" }
  ]);

publishDate: fields
  .datetime()
  .renderer("dateTimeInput")
  .label("Publish Date")
  .rules([
    { type: "condition", target: "status", operator: "!=", value: "published", action: "hide" }
  ]);

internalNotes: fields
  .longText()
  .renderer("textarea")
  .label("Internal Notes")
  .rules([
    {
      type: "accessControl",
      target: "identity",
      operator: "matches",
      value: "team:editors",
      action: "hide"
    },
    { type: "condition", target: "status", operator: "==", value: "draft", action: "disable" }
  ]);

.fields(fields => ({
  adminAlert: fields
    .uiAlert()
    .label("Admin only")
    .alertType("warning")
    .rules([
      { type: "accessControl", target: "identity", operator: "matches", value: "team:admins", action: "hide" }
    ]),
}))

.fields(fields => ({
  tabs: fields
    .uiTabs()
    .tab("general", {
      label: "General",
      fields: sub => ({ /* ... */ }),
      layout: [/* ... */]
    })
    .tab("advanced", {
      label: "Advanced",
      fields: sub => ({ /* ... */ }),
      layout: [/* ... */],
      rules: [
        { type: "accessControl", target: "identity", operator: "matches", value: "team:developers", action: "hide" }
      ]
    })
    .rules([/* rules on the entire tabs container */])
}))

.fields(fields => ({
  bannerTypes: fields
    .dynamicZone()
    .label("Banner Type")
    .template("siteBanner", {
      name: "Site Banner",
      gqlTypeName: "SiteBannerBlock",
      fields: t => ({
        enabled: t.boolean().renderer("switch").label("Enabled"),
        text: t.richText().renderer("lexicalEditor").label("Text"),
        global: t
          .boolean()
          .renderer("switch")
          .label("Global"),
        locationTab: t
          .uiTabs()
          .tab("Location", {
            label: "Location",
            fields: tabFields => ({
              location: tabFields.text().label("Location")
            }),
            layout: [["location"]]
          })
          .rules([
            {
              type: "condition",
              target: "$.global",      // resolves to sibling "global" in this template
              operator: "==",
              value: true,
              action: "hide"
            }
          ])
      }),
      layout: [["enabled"], ["text"], ["global"], ["locationTab"]]
    })
}))

// article model has: author: fields.ref().models([{ modelId: "author" }])
const { result } = await cms.articles.list({
  fields: [
    "id",
    "values.title",
    "values.author.values.name" // ref → double "values."
    // ^^^^^^^^^^^^^^^^^^^^^^^^^
  ]
});

// article model has:
//   author: fields.object().fields(sub => ({ name: sub.text(), bio: sub.longText() }))
const { result } = await cms.articles.list({
  fields: [
    "id",
    "values.title",
    "values.author.name", // object → single "values."
    "values.author.bio"
    // ^^^^^^^^^^^^^^^^^
  ]
});

// blocks: fields.dynamicZone().template("hero", { fields: t => ({ heading: t.text() }) })
fields: ["values.blocks.hero.heading"];

// extensions/ProductCategoryModel.ts
import { ModelFactory } from "webiny/api/cms/model";

export const PRODUCT_CATEGORY_MODEL_ID = "productCategory";

class ProductCategoryModelImpl implements ModelFactory.Interface {
  async execute(builder: ModelFactory.Builder) {
    return [
      builder
        .public({
          modelId: PRODUCT_CATEGORY_MODEL_ID,
          name: "Product Category",
          group: "ungrouped"
        })
        .description("Product categories for organizing products")
        .fields(fields => ({
          name: fields
            .text()
            .renderer("textInput")
            .label("Name")
            .help("Name of the product category")
            .required("Name is required")
            .minLength(2)
            .maxLength(100),
          slug: fields
            .text()
            .renderer("textInput")
            .label("Slug")
            .help("URL-friendly identifier")
            .required("Slug is required")
            .unique(),
          description: fields.longText().renderer("textarea").label("Description").minLength(10)
        }))
        .layout([["name", "slug"], ["description"]])
        .titleFieldId("name")
        .singularApiName("ProductCategory")
        .pluralApiName("ProductCategories")
    ];
  }
}

export default ModelFactory.createImplementation({
  implementation: ProductCategoryModelImpl,
  dependencies: []
});

// extensions/ProductModel.ts
import { ModelFactory } from "webiny/api/cms/model";

export const PRODUCT_MODEL_ID = "product";

class ProductModelImpl implements ModelFactory.Interface {
  async execute(builder: ModelFactory.Builder) {
    return [
      builder
        .public({
          modelId: PRODUCT_MODEL_ID,
          name: "Product",
          group: "ungrouped"
        })
        .description("Products for our e-commerce store")
        .fields(fields => ({
          name: fields
            .text()
            .renderer("textInput")
            .label("Name")
            .help("Product name")
            .required("Name is required"),
          sku: fields
            .text()
            .renderer("textInput")
            .label("SKU")
            .help("Stock Keeping Unit - unique product identifier")
            .required("SKU is required")
            .unique(),
          description: fields
            .longText()
            .renderer("textarea")
            .label("Description")
            .help("Detailed product description"),
          price: fields
            .number()
            .renderer("numberInput")
            .label("Price")
            .required("Price is required")
            .gte(0, "Price must be greater than or equal to 0"),
          category: fields
            .ref()
            .renderer("refDialogSingle")
            .label("Category")
            .models([{ modelId: "productCategory" }])
        }))
        .layout([["name"], ["sku"], ["category"], ["description"], ["price"]])
        .titleFieldId("name")
        .singularApiName("Product")
        .pluralApiName("Products")
    ];
  }
}

export default ModelFactory.createImplementation({
  implementation: ProductModelImpl,
  dependencies: []
});

// extensions/contactSubmission/ContactSubmissionModel.ts
import { ModelFactory } from "webiny/api/cms/model";

export const CONTACT_SUBMISSION_MODEL_ID = "contactSubmission";

class ContactSubmissionModelImpl implements ModelFactory.Interface {
  async execute(builder: ModelFactory.Builder) {
    return [
      builder
        .public({
          modelId: CONTACT_SUBMISSION_MODEL_ID,
          name: "Contact Submission",
          group: "ungrouped"
        })
        .description("Stores contact form submissions from the website")
        .fields(fields => ({
          name: fields
            .text()
            .renderer("textInput")
            .label("Name")
            .help("Enter your full name")
            .required("Name is required")
            .minLength(2)
            .maxLength(100),
          email: fields
            .text()
            .renderer("textInput")
            .label("Email")
            .help("Enter a valid email address")
            .required("Email is required")
            .email(),
          message: fields
            .longText()
            .renderer("textarea")
            .label("Message")
            .help("Enter your message...")
            .required("Message is required")
            .minLength(10)
            .maxLength(1000),
          emailType: fields
            .text()
            .renderer("radioButtons")
            .label("Email Type")
            .help("Automatically classified as Work or Personal")
            .predefinedValues([
              { label: "Work", value: "work" },
              { label: "Personal", value: "personal" }
            ])
        }))
        .layout([["name", "email"], ["message"], ["emailType"]])
        .titleFieldId("name")
        .descriptionFieldId("message")
        .singularApiName("ContactSubmission")
        .pluralApiName("ContactSubmissions")
    ];
  }
}

export default ModelFactory.createImplementation({
  implementation: ContactSubmissionModelImpl,
  dependencies: []
});

Import:       import { ModelFactory } from "webiny/api/cms/model";
Interface:    ModelFactory.Interface
Builder:      ModelFactory.Builder
Export:       export default ModelFactory.createImplementation({ implementation, dependencies })
Register:     <Api.Extension src={"/extensions/MyModel.ts"} />
Deploy:       yarn webiny deploy api  (or use watch mode)