live preview globals disabled page

default discord avatar
_nadiem
4 weeks ago
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
    4 weeks ago

    "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
    _nadiem
    4 weeks ago

    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
    4 weeks ago

    can you please share your PostsPage file?

  • default discord avatar
    _nadiem
    4 weeks ago

    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
    4 weeks ago

    looks like it

    should

    work to me.



    are you sure you're on the latest version?

  • default discord avatar
    _nadiem
    3 weeks ago

    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!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.