✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register 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?