New Entry Wizard

New Entry Wizard

TL;DR

A New Entry Wizard intercepts the "create new entry" flow in the Headless CMS and shows a custom form before the full entry editor. The wizard collects initial values (title, slug, category, etc.), then calls formPresenter.newEntry(initialValues) to pre-fill the entry form and transition to the editor. The form is automatically marked as dirty so the user sees unsaved changes.

A wizard extension has five files:

1. abstractions.ts -- DI token and presenter interface (ALWAYS a standalone file)
2. feature.ts -- createFeature wiring (ALWAYS a standalone file)
3. Presenter -- owns the wizard form (fields, layout, validation) via FormModelFactory
4. View -- renders the wizard UI using FormView and FormErrors
5. Registration -- plugs the wizard into specific content models via ContentEntryEditorConfig.NewEntryWizard

Registration

// extensions/myWizard/index.tsx
import React from "react";
import { RegisterFeature } from "webiny/admin";
import { ContentEntryEditorConfig } from "webiny/admin/cms/entry/editor";
import { MyWizardFeature } from "./feature.js";
import { MyWizardForm } from "./MyWizardForm.js";

const MyWizardExtension = () => {
  return (
    <>
      <RegisterFeature feature={MyWizardFeature} />
      <ContentEntryEditorConfig>
        <ContentEntryEditorConfig.NewEntryWizard
          element={<MyWizardForm />}
          modelIds={["article", "blogPost"]}
        />
      </ContentEntryEditorConfig>
    </>
  );
};

export default MyWizardExtension;