Help with getting preview pane working for certain document types in Sanity.io
15 replies
Last updated: Feb 28, 2023
S
I need some help with getting my preview pane working for certain document types. Currently, my preview for my Global Settings type is working, but I can not get the the Page type to display a preview pane. Here is a paired down version of my deskstructure.js:
As this stands, there is no Editor/Preview toggle for Pages like there is for my Global Settings. I am expecting something like the attached image. This is working in our v2 but I am currently trying to migrate to v3. Thanks!
import LoeSettingsPreview from "./preview-components/LoeSettingsPreview";
import PagePreview from "./preview-components/PagePreview";
export const loeStructure = (S, context) =>
S.list()
.title('LOE Content')
.items([
S.listItem()
.title("Global Settings")
.schemaType("loeSetting")
.icon(MdSettings)
.child(
S.editor()
.schemaType("loeSetting")
.documentId("loeSetting")
.views([
S.view.form(),
S.view.component(LoeSettingsPreview).title("Preview"),
])
),
S.listItem()
.title("Pages")
.icon(SiLibreoffice)
.child(
S.list()
.title("Filters")
.items([
S.listItem()
.title("Pages By Microsite")
.icon(SiMoleculer)
.child(
S.documentTypeList("microsite")
.title("Pages By Microsite")
.child((micrositeId) =>
S.documentList()
.title("Pages")
.filter(
'_type == "page" && _id in *[_id == $micrositeId ][0].content[].docId._ref'
)
.params({ micrositeId }),
)
),
S.listItem()
.title("Approved Pages")
.icon(MdThumbUpAlt)
.child(
S.documentList()
.title("Approved Pages")
.filter('_type == "page" && status == "approved"')
),
S.listItem()
.title("Draft Pages")
.icon(MdEditNote)
.child(
S.documentList()
.title("Draft Pages")
.filter(
'_type == "page" && (status == "draft" || !defined(status)) '
)
),
S.listItem()
.title("Expired Pages")
.icon(MdDelete)
.child(
S.documentList()
.title("Expired Pages")
.filter('_type == "page" && status == "expired"')
),
S.listItem()
.title("All Pages")
.child(
S.documentTypeList("page")
.title("Pages")
),
]),
),Feb 24, 2023, 5:54 PM
It looks like you’re currently only adding the views to your global settings doc in that structure. Can you try adding a default document node function?
Feb 27, 2023, 8:38 PM
S
Yes, I did it that way at one point and am now doing it this way 🤷♀️ I am getting the Edit and Preview options now, but it seems that there is an error in how that translates over to my 11ty code, so now I think my issue isn't sanity-related (or so I think HA!)
S.listItem()
.title("Pages")
.icon(SiLibreoffice)
.child(
S.list()
.title("Filters")
.items([
S.listItem()
.title("Pages By Microsite")
.icon(SiMoleculer)
.child(
S.documentTypeList("microsite").title("Pages By Microsite")
.child((micrositeId) =>
S.documentList()
.title("Pages")
.filter(
'_type == "page" && _id in *[_id == $micrositeId ][0].content[].docId._ref'
)
.child(
S.editor()
.schemaType("page")
.documentId("page")
.views([
S.view.form(),
S.view.component(PagePreview).title("Preview"),
])
)
.params({ micrositeId })
)
),
S.listItem()
.title("Approved Pages")
.icon(MdThumbUpAlt)
.child(
S.documentList()
.title("Approved Pages")
.filter('_type == "page" && status == "approved"')
.child(
S.editor()
.schemaType("page")
.documentId("page")
.views([
S.view.form(),
S.view.component(PagePreview).title("Preview"),
])
)
),
S.listItem()
.title("Draft Pages")
.icon(MdEditNote)
.child(
S.documentList()
.title("Draft Pages")
.filter(
'_type == "page" && (status == "draft" || !defined(status)) '
)
.child(
S.editor()
.schemaType("page")
.documentId("page")
.views([
S.view.form(),
S.view.component(PagePreview).title("Preview"),
])
)
),
S.listItem()
.title("Expired Pages")
.icon(MdDelete)
.child(
S.documentList()
.title("Expired Pages")
.filter('_type == "page" && status == "expired"')
.child(
S.editor()
.schemaType("page")
.documentId("page")
.views([
S.view.form(),
S.view.component(PagePreview).title("Preview"),
])
)
),
S.listItem()
.title("All Pages")
.child(
S.documentTypeList("page") .title("Pages")
.child(
S.editor()
.schemaType("page")
.documentId("page")
.views([
S.view.form(),
S.view.component(PagePreview).title("Preview"),
])
)
),
]),Feb 27, 2023, 9:02 PM
S
It almost seems like no data is getting sent to the preview. I noticed this when I did the getDefaultDocumentNode option, too. The preview works great in v2, but now that I am trying to migrate to v3, my page-preview is unhappy. I am wondering if the way these previews are set up if it's not actually telling it what to preview?
Feb 27, 2023, 9:21 PM
S
async function getBody(pageJson) {
let body = `<html><head><title>Not a Page</title></head><body>document ${pageJson._id} is of type ${pageJson._type}. Type "page" is required.</body></html>`;
if (pageJson?._type != 'page') {
return body;
}
//second argument is telling 11ty not to create or pull values from cache
pageJson.body = await FullPageJson(pageJson.body, false);
body = `<html DOCTYPE!>
<head>
<title>${pageJson.title}</title>
<meta charset="UTF-8" />
${getCSS(pageJson)}
</head>
<body>
${pageJsonScriptTag(pageJson)}
${await PageBody(pageJson, false)}
${socketScriptText}
</body>`;
return body;
}Feb 27, 2023, 9:25 PM
So, I don’t know much about 11ty 😅
What does your
What does your
productionUrlfunction look like? The issue may be there.
Feb 27, 2023, 9:37 PM
S
Good question.... I don't have a productionUrl anywhere... 😬
Feb 27, 2023, 9:38 PM
S
Ok, so for some more context... I have a custom action for pages that allows our editors to open the preview in a new browser tab, and that is working just fine and goes to a url like this: https://loe-sanity-preview.netlify.app/.netlify/functions/page-preview?slug=740fd4c8-1d18-48c8-b95d-2269b03d0c9a
Feb 27, 2023, 9:43 PM
S
And the preview pane should just be an iframe with this exact url
Feb 27, 2023, 9:43 PM
S
But, instead, it is like the information isn't going through or something is getting lost in translation
Feb 27, 2023, 9:44 PM
It sounds like something’s going wrong in the document action, then. We do have a built in API for previews that may be more reliable. But if you don’t want to migrate to using that, can you share the document action?
Feb 27, 2023, 9:47 PM
S
This is my PreviewLink document action
import { BsBoxArrowUpRight } from "react-icons/bs";
export function PreviewLink(props) {
let previewStart = "<https://loe-sanity-preview.netlify.app/.netlify/functions/page-preview?slug=>"
let pageId = props.id
let previewLink = previewStart + pageId
function openLink() {
window.open(previewLink, '_blank')
}
return {
label: "External Preview",
icon: BsBoxArrowUpRight,
onHandle: () => openLink()
}
}Feb 27, 2023, 10:21 PM
S
Got my page preview working
Feb 28, 2023, 3:23 PM
What turned out to be the issue?
Feb 28, 2023, 4:59 PM
S
It was related to a URL issue but we have our preview being built a slightly different way, so I just had to give that a little edit magic. Then another document type wasn't previewing either, but it turned out that the page id wasn't getting passed into the url - found that the documentid() was being called twice for that document type in the deskstructure
Feb 28, 2023, 6:28 PM
Awesome! Thanks for sharing and glad you got it sorted out!
Feb 28, 2023, 6:41 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.