😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Help with getting preview pane working for certain document types in Sanity.io

15 replies
Last updated: Feb 28, 2023
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:
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")
                ),
          ]),
        ),
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!
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
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
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
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
productionUrl
function look like? The issue may be there.
Feb 27, 2023, 9:37 PM
Good question.... I don't have a productionUrl anywhere... 😬
Feb 27, 2023, 9:38 PM
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
And the preview pane should just be an iframe with this exact url
Feb 27, 2023, 9:43 PM
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
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
Got my page preview working
Feb 28, 2023, 3:23 PM
What turned out to be the issue?
Feb 28, 2023, 4:59 PM
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.

Was this answer helpful?