👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Discussion about showing combinations of paper and weight in the same reference box in Sanity.io

17 replies
Last updated: Jan 24, 2022
Hello, I’m making a content model for my print studio and wanted to have:
• a document for paper qualities:
paper
◦ it has a
name
, a reference to
supplier
and also an array of references to
weight

weight
is a document type for paper weightsWhen I reference
paper
on a new document (let’s say
print
), naturally it shows only the name list for
paper
in the reference box inside Studio because I only created that entry.
Is there a way I could show combinations of
paper
+
weight
in the same reference box?
Dec 17, 2021, 7:02 PM
Great diagram! That helps a lot.
If you include
weight
in your paper documents' preview , I expect it'll show up in the reference list. If you don't have a custom preview in place yet, I can confirm this and provide an example shortly.
Dec 17, 2021, 7:07 PM
Here's a schema of what you're (hopefully) after:

// weights.js

export default {
  name: 'weights',
  title: 'Weights',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
  ],
}

// paper.js

export default {
  name: 'paper',
  title: 'Paper',
  type: 'document',
  fields: [
    {
      name: 'name',
      title: 'Paper Name',
      type: 'string',
    },
    {
      name: 'availableWeights',
      title: 'Available Weights',
      type: 'array',
      of: [
        {
          name: 'weight',
          title: 'Weight',
          type: 'reference',
          to: [{ type: 'weights' }],
        },
      ],
    },
  ],
  preview: {
    select: {
      name: 'name',
      weight0: 'availableWeights.0.title',
      weight1: 'availableWeights.1.title',
      weight2: 'availableWeights.2.title',
      weight3: 'availableWeights.3.title',
    },
    prepare: ({ name, weight0, weight1, weight2, weight3 }) => {
      const weights = [weight0, weight1, weight2].filter(Boolean)
      const subtitle = weights.length > 0 ? weights.join(', ') : ''
      const hasMoreWeights = Boolean(weight3)
      return {
        title: name,
        subtitle: hasMoreWeights ? `${subtitle}...` : subtitle,
      }
    },
  }
}

// print.js

export default {
  name: 'print',
  title: 'Print',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'paper',
      title: 'Paper',
      type: 'reference',
      to: [{ type: 'paper' }],
    },
  ],
}
Dec 17, 2021, 7:27 PM
Thanks
user A
! I smelled preview. Let me try to sketch something and get back to you? I would normally know how to filter/compose the preview but what I couldn't figure out was producing the combinations...
Dec 17, 2021, 7:27 PM
Ohhh I wrote my answer before I saw the rest :D
Dec 17, 2021, 7:28 PM
Trying this now, exciting!
Dec 17, 2021, 7:29 PM
Yeah, previewing array items isn't currently the most intuitive thing. They use a different syntax than one would normally expect, and there's no way to just get everything (hence the
.0
,
.1
, etc.). It's something we're considering going forward.
Dec 17, 2021, 7:30 PM
Here's a schema of what you're (hopefully) after:

// weights.js

export default {
  name: 'weights',
  title: 'Weights',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
  ],
}

// paper.js

export default {
  name: 'paper',
  title: 'Paper',
  type: 'document',
  fields: [
    {
      name: 'name',
      title: 'Paper Name',
      type: 'string',
    },
    {
      name: 'availableWeights',
      title: 'Available Weights',
      type: 'array',
      of: [
        {
          name: 'weight',
          title: 'Weight',
          type: 'reference',
          to: [{ type: 'weights' }],
        },
      ],
    },
  ],
  preview: {
    select: {
      name: 'name',
      weight0: 'availableWeights.0.title',
      weight1: 'availableWeights.1.title',
      weight2: 'availableWeights.2.title',
      weight3: 'availableWeights.3.title',
    },
    prepare: ({ name, weight0, weight1, weight2, weight3 }) => {
      const weights = [weight0, weight1, weight2].filter(Boolean)
      const subtitle = weights.length > 0 ? weights.join(', ') : ''
      const hasMoreWeights = Boolean(weight3)
      return {
        title: name,
        subtitle: hasMoreWeights ? `${subtitle}...` : subtitle,
      }
    },
  }
}

// print.js

export default {
  name: 'print',
  title: 'Print',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'paper',
      title: 'Paper',
      type: 'reference',
      to: [{ type: 'paper' }],
    },
  ],
}
Dec 17, 2021, 7:27 PM
Thanks
user A
! I smelled preview. Let me try to sketch something and get back to you? I would normally know how to filter/compose the preview but what I couldn't figure out was producing the combinations...
Dec 17, 2021, 7:27 PM
Ohhh I wrote my answer before I saw the rest :D
Dec 17, 2021, 7:28 PM
Trying this now, exciting!
Dec 17, 2021, 7:29 PM
user A
quick q: I didn’t manage to make it work yet but is the expected outcome from your example that it will show the array paper weights under the single document title in the reference box?
Dec 17, 2021, 9:00 PM
Yes, here's what I see:
Dec 17, 2021, 9:50 PM
Perfect! I realize now what I was looking for might not be possible. I was hoping that having one entry with multiple associated weights could produce multiple single entries, one per each combination of quality+weight.
The input list would show then, instead of one item with 3 weights in the preview, 3 entries with one item in the preview each.

But that doesn’t make sense right? 3 entries has to mean 3
real entries.
Dec 17, 2021, 10:09 PM
Ahh, I follow you. Do you simply need them to appear in the list (i.e., to group other documents)?
Dec 17, 2021, 10:37 PM
Ahh, I follow you. I can't think of a way to achieve what you're after without distinct documents, but I'll think about it and ask some colleagues.
Dec 17, 2021, 10:38 PM
Thanks, I appreciate it! I think it’s realistic that it needs to be distinct documents 🙂
Dec 17, 2021, 10:41 PM
super late 🙏 from my end
user B
!
Jan 24, 2022, 9:20 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?