Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Setting up a list view with conditional fields in Sanity.io.

35 replies
Last updated: Jun 4, 2020
can someone help me set up a list view?
it might be a little tricky because it involves the Conditional Fields custom component. I'll explain in the thread.
Jun 4, 2020, 2:55 PM
I have document type of 
moment

Here you choose from a 
string
list of either 
imageType
or 
videoType

i'd like to use the preview subtitle to show which type a 
moment
is.
then to go one deeper ... if you select 
imageType
you have 4 choices of 
displaySize

i'd like to use the description preview to show the 
displaySize

so far, dot.notation has not worked to access either the type or the displaySize

thoughts?
Jun 4, 2020, 2:57 PM
Hi User, could you share the schema for 
moment
?
Jun 4, 2020, 2:59 PM
happy to
Jun 4, 2020, 2:59 PM
Hi User, could you share the schema for 
moment
?
Jun 4, 2020, 2:59 PM
import Gift from 'react-icons/lib/go/ruby'

export default {
  title: "Moment",
  name: "moment",
  icon: Gift,
  type: "document",
  fieldsets: [
    {
      title: "Tags",
      name: "tags",
      options: {
        collapsible: true,
        collapsed: false
      }
    }
  ],
  fields: [
    {
      title: "Title",
      name: "title",
      type: "string"
    },
    {
      name: "choice",
      type: "momentChoice"
    },
  ],
  preview: {
    select: {
      title: 'title',
      momentType: 'momentChoice.momentType'
    }
  }
}
Jun 4, 2020, 3:00 PM
happy to
Jun 4, 2020, 2:59 PM
i've stripped that down to the relevant fields
Jun 4, 2020, 3:00 PM
as i'm reading the documentation again, i'm thinking i'll need to use the 
prepare
option, as i don't think simple dot.notation is going to cut it
Jun 4, 2020, 3:01 PM
I have document type of 
moment

Here you choose from a 
string
list of either 
imageType
or 
videoType

i'd like to use the preview subtitle to show which type a 
moment
is.
then to go one deeper ... if you select 
imageType
you have 4 choices of 
displaySize

i'd like to use the description preview to show the 
displaySize

so far, dot.notation has not worked to access either the type or the displaySize

thoughts?
Jun 4, 2020, 2:57 PM
ok, i have the first item working now (was incorrectly asking for 
momentChoice
which is the type, not the name
asking for just 
choice
gave me that
Jun 4, 2020, 3:05 PM
Indeed, 
choice
(or 
choice.name
if you were to have a name field inside the 
momentChoice
object) should work in this case. For the second part, where does 
displaySize
sit in this case? Inside 
momentChoice
as a conditional field? What type if so?
Jun 4, 2020, 3:22 PM
You should be able to pass something like 
displaySize: 'choice.displaySize'
to 
select
for use in 
prepare
, then check whether 
displaySize
is set and, if so, use 
subtitle: displaySize
there.
Jun 4, 2020, 3:26 PM
user M
inside 
momentChoice
is the first conditional which segments 
imageType
and 
videoType

inside 
imageType
is where 
displaySize
is
Jun 4, 2020, 3:30 PM
Should be possible! Could you share that schema too? 😄
Jun 4, 2020, 3:31 PM
here is the 
momentChoice
schema

export default {
  title: "Moment Choice",
  name: "momentChoice",
  type: "object",
  fields: [
    {
      name: "momentType",
      type: "string",
      description: "Choose moment type",
      options: {
        list: [
          { title: "Image", value: "imageType" },
          { title: "Video", value: "videoType" },
        ],
        layout: "radio",
        direction: "horizontal"
      }
    },
    {
      name: "imageType",
      type: "imageMoment",
      inputComponent: ConditionalFields,
      options: {
        condition: (document, context) => context().momentType === "imageType"
      }
    },
    {
      name: "videoType",
      type: "videoMoment",
      inputComponent: ConditionalFields,
      options: {
        condition: (document, context) => context().momentType === "videoType"
      }
    },
    {
      name: "textType",
      type: "textMoment",
      inputComponent: ConditionalFields,
      options: {
        condition: (document, context) => context().momentType === "textType"
      }
    }
  ]
}
Jun 4, 2020, 3:32 PM
and the 
imageType
schema

export default {
  title: "Image Moment",
  name: "imageMoment",
  type: "object",
  fields: [
    {
      title: "Display Size",
      name: "displaySize",
      description: 'Preferred layout crop, only select if different from default',
      type: 'string',
      options: {
        list: [
          {title: 'Small Square', value: 'smSq'},
          {title: 'Big Square', value: 'bigSq'},
          {title: 'Vertical', value: 'vertical'},
          {title: 'Horizontal', value: 'horizontal'}
        ],
        layout: 'radio',
        direction: 'horizontal'
      }
    },
Jun 4, 2020, 3:32 PM
You’ll probably need to perform some checks in 
prepare
and this won’t work yet, but for fun, could you try adding something like this to 
select
?
subtitle: 'choice.imageType.displaySize.title'
Jun 4, 2020, 3:34 PM
yeah, no luck with that.
also tried 
subtitle: 'choice.momentType.imageType.displaySize.title'
Jun 4, 2020, 3:36 PM
since it has to pass through momentChoice first
Jun 4, 2020, 3:37 PM
and yes, definitely aware that i'd have to check for it being an 
imageType
at some point
Jun 4, 2020, 3:37 PM
Happy to experiment for a moment with this. Would you mind sending a zip of your schema files in DM? 🙂
Jun 4, 2020, 3:38 PM
absolutely
Jun 4, 2020, 3:38 PM
do you want all the schemas? or just the relevant ones?
Jun 4, 2020, 3:39 PM
Just the relevant ones is OK but please include the conditionalFields component just in case - they tend to be different on a case by case basis.
Jun 4, 2020, 3:44 PM
i included the ConditionalFields component as well
Jun 4, 2020, 3:44 PM
but i haven't modified it
Jun 4, 2020, 3:45 PM
thanks
user M
!
Jun 4, 2020, 3:45 PM
also, just realizing i have some poor file naming ... i have 
momentChoice
as 
MomentType.js
Jun 4, 2020, 3:51 PM
Hi again User - this should work 🤞
preview: {
  select: {
    title: 'title',
    subtitle: 'choice.momentType',
    description: 'choice.imageType.displaySize'
  }
}
Jun 4, 2020, 4:02 PM
that works!
Jun 4, 2020, 4:13 PM
i guess i was trying to over complicate it?
Jun 4, 2020, 4:13 PM
adding more levels than necessary 🤷‍♂️
Jun 4, 2020, 4:13 PM
When we think ‘nested’, it’s easy to go into let.me.nest.one.more.just.to.be.sure mode 😄
Jun 4, 2020, 5:15 PM
haha
Jun 4, 2020, 5:15 PM
so accurate 😂
Jun 4, 2020, 5:15 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.

Get started for freeExplore the demo

Was this answer helpful?