Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

live preview globals disabled page

default discord avatar
_nadiemlast year
6

Hi everyone,


I'm playing around a bit with payload CMS, trying to understand how the config works etc.


I enabled live previews on my globals test page.



I can see the live preview, since I added it to my payload.config and I can click on it. I can't edit any content on the globals page though, within the live preview function, since the input fields are disabled.



Within my collections I can edit anything with live preview.



Would I need to enable this somewhere?



Using svelte and payload 2.0.0

  • default discord avatar
    zephury.last year

    "Within my collections I can edit anything with live preview. "


    do you mean without live-preview you can edit it...?



    Please, share your Postspage collection file, and perhaps your payload.config

  • default discord avatar
    _nadiemlast year

    Thanks for your reply!


    Additionally I have added a posts collection. Within this collection the live preview functionality is working.



    The postspage is a globals file, since I'm testing out the globals^^. The problem occurs with a globals file, not with the collection file:)



    Current payload.config:



    import path from "path";
    
    import { payloadCloud } from "@payloadcms/plugin-cloud";
    import { postgresAdapter } from "@payloadcms/db-postgres";
    import { webpackBundler } from "@payloadcms/bundler-webpack";
    import { slateEditor } from "@payloadcms/richtext-slate";
    import { buildConfig } from "payload/config";
    
    import Users from "./collections/Users";
    import Posts from "./collections/Posts";
    import Pages from "./collections/Pages";
    import PostsPage from "./globals/PostsPage";
    
    export default buildConfig({
      admin: {
        user: Users.slug,
        bundler: webpackBundler(),
        livePreview: {
          url: (doc) => {
            // document info contains the slug, for deeper nesting edit the path, also add in the locale
            if (doc.documentInfo.slug === "postspage") {
              return `http://localhost:5173/posts`;
            }
            return `http://localhost:5173/${doc.documentInfo.slug}/${doc.documentInfo.id}`;
          },
          collections: ["posts", "pages"],
          globals: ["postspage"],
        },
      },
      editor: slateEditor({}),
      collections: [Users, Posts, Pages],
      globals: [PostsPage],
      localization: {
        locales: ["en", "de"],
        defaultLocale: "en",
        fallback: true,
      },
      typescript: {
        outputFile: path.resolve(__dirname, "payload-types.ts"),
      },
      graphQL: {
        schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
      },
      plugins: [payloadCloud()],
      db: postgresAdapter({
        pool: {
          connectionString: process.env.DATABASE_URI,
        },
      }),
    });
  • default discord avatar
    zephury.last year

    can you please share your PostsPage file?

  • default discord avatar
    _nadiemlast year

    Ah sorry, I'm blind 😅



    import { GlobalConfig } from "payload/types";
    
    const PostsPage: GlobalConfig = {
      slug: "postspage",
      access: { read: () => true },
      fields: [
        {
          name: "title",
          label: "Title",
          type: "text",
          required: true,
        },
        {
          name: "subtitle",
          label: "Subtitle",
          type: "text",
        },
        {
          name: "text",
          label: "Text Content",
          type: "richText",
        },
        {
          name: "items",
          type: "array",
          required: true,
          maxRows: 8,
          fields: [
            {
              name: "post",
              type: "relationship",
              relationTo: "posts",
              required: true,
            },
          ],
        },
      ],
    };
    
    export default PostsPage;
  • default discord avatar
    zephury.last year

    looks like it

    should

    work to me.



    are you sure you're on the latest version?

  • default discord avatar
    _nadiemlast year

    Hmmm, not sure how I wasn't. But I ran:



    - npm i -g npm-check-updates


    - ncu -u


    - npm install



    Now it's working, thanks for the help!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.