Surjith S M
Web Designer & Front-end Developer. Figma, TailwindCSS & Next.js
Surjith is located at Kerala, India
Sanity preview component cannot access the parent/document if its inside an array or object. Using Custom Preview component, we can solve the issue.
import PreviewComponent from "../components/PreviewComponent";
export default {
name: "steps",
title: "Steps",
type: "object",
fields: [
{
name: "items",
title: "Add Steps",
type: "array",
of: [
{
type: "object",
fields: [
{
name: "title",
title: "Title",
type: "string"
},
{
name: "description",
title: "Description",
rows: 3,
type: "text"
}
],
preview: {
select: {
_key: "_key",
title: "title",
subtitle: "description"
},
prepare({ _key, title, subtitle }) {
return { _key, title, subtitle };
},
component: PreviewComponent
}
}
]
},
],
};
import React from "react";
import { withDocument } from "part:@sanity/form-builder";
import Preview from "part:@sanity/base/preview";
const PreviewComponent = ({ document, value }) => {
const { steps } = document;
const { _key, title, subtitle } = value;
const index = steps.items.findIndex(item => item._key == _key);
return (
<Preview
type="image"
value={{
title: title,
subtitle: subtitle,
media: <span style={{ fontSize: "1.5rem" }}>{index + 1}</span>
}}
/>
);
};
export default withDocument(PreviewComponent);
In this example, we created a custom PreviewComponent page to get the Index of an array item inside the object using the parent document and added the index as a custom image. But you can modify it to anything you like.
Web Designer & Front-end Developer. Figma, TailwindCSS & Next.js
Community Engineer at Sanity.io
Add a count of documents to your Structure Builder panes
Go to Display a document count in the title of a pane in Structure BuilderIf you'd like to be able to reference your project users within your content, you'll need to create a document for them.
Go to Create A Document for All Current Project UsersUse a publishedOnce field to control other fields.
Go to Make a Field Read-Only After Publishing Once