Join live – Get insights, tips, + Q&A from Sanity developers on our latest releases

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.

Was this answer helpful?

Categorized in