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
"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
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,
},
}),
});
can you please share your PostsPage file?
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;
looks like it
shouldwork to me.
are you sure you're on the latest version?
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
Discord
online
Get help straight from the Payload team with an Enterprise License.