How to set a preview with a reference name in a document in Slack thread.

28 replies

Last updated: Apr 25, 2020

This may be a silly question(in that case please forgive me).

I would like to set a

preview

so that the name appear as title of this

document

.But the name I would like to see appearing is the one of a reference.
How should I do?

Thanks in advance for your help.

Apr 25, 2020, 12:51 PM

When I give the name of the reference

codeList

it returns

untitled

, probably because of the reference factor.So I tried to reference it like this


  preview: {
    select: {
      title: {
        name: 'codeList',
        title: 'Code List',
        type: 'reference',
        to: [
          {
            name: 'codeList',
            title: 'Code List',
            type: 'codeList',
          },
        ],
      },
    }
  },

but it makes an error:
title is an

object

,where title only accept

string

is.
There must be a way to get along with this.
How should I do?

Apr 25, 2020, 12:54 PM

Hi (Removed Name), have you tried something like this?

preview: {
  select: {
    title: 'codeList.title'
  }
}

Where

title

is the name of your title field in

codeList

Apr 25, 2020, 3:56 PM

sorry for the delay (Removed Name).

Apr 25, 2020, 4:49 PM

Result in the the inspector:

codeList:{} 2 items
_ref:56d99a7f-bd55-4cd7-9eeb-d5b65fe63d5e
_type:reference

Apr 25, 2020, 4:50 PM

Could you paste the full code of the document containing that preview and of the

codeList

type?

Apr 25, 2020, 4:55 PM

I should make a GROQ query based on that _ref and type (I know how to), I run into a error:select title should be a

string

.There is an example in the DOCS with the prepare function: is that what I should do?

Apr 25, 2020, 4:55 PM

yes certainly

Apr 25, 2020, 4:55 PM

import { GoListUnordered } from 'react-icons/go'
import client from 'part:@sanity/base/client'

export default {
    name: 'codeListLang',
    title: 'Code List Langue',
    icon: GoListUnordered,
    type: 'document',
    fields: [
        {
            name: 'codeList',
            title: 'Code List',
            description: 'Code commercial du service Cityvision (valeur default: VT)',
            type: 'reference',
            to: [
                {
                    name: 'codeList',
                    title: 'Code List',
                    type: 'codeList',
                }
            ]
        },
        {
          name: 'lang',
          title: 'Lang',
          description: 'Langue parlée durant le service Cityvision (valeur default: ja)',
          type: 'reference',
          to: [
            {
              name: 'lang',
              title: 'Langue',
              type: 'lang',
            },
          ]
        },
        {
            name: 'intitule',
            title: 'Intitulé',
            description: 'Intitulé commercial officiel du service Cityvision',
            type: 'localeString',
        },
        {
            name: 'description',
            title: 'Description',
            description: 'Description commerciale officielle du service Cityvision',
            type: 'localeText',
        },
        {
            name: 'cityvisionLinkUri',
            title: 'Cityvision Link URI',
            description: 'slug du service Cityvision dans cette langue',
            type: 'slug',
        },
        {
            name: 'breadcrumb',
            title: 'Breadcrumb',
            description: "Fil d'Ariane menant la page",
            type: 'localeText',
        },
    ],
    initialValue:  async () =&gt; ({
      codeList: await client.fetch(`// groq
        *[_type == 'codeList' &amp;&amp; code match 'VT' ][0]{
            '_ref': _id,
            '_type': 'reference'
        }
        `),
    lang: await client.fetch(`// groq
      *[_type == 'lang' &amp;&amp; name match 'ja' ][0]{
        '_ref': _id,
        '_type': 'reference'
      }
      `),
    }),
    preview: {
      select: {
        title: 'codeList.title'
      }
    },
    /* preview: {
        select: {
            title: 'cityvisionLinkUri.current',
            lang: 'lang.title', // if the codeList has a lang, follow the relation and get the lang
        },
        prepare(selection) {
          const {title, lang} = selection
          return {
          title: title.split('-')[0] + '-' + title.split('-')[1],
          subtitle: `guidé en: ${lang ? lang : 'langue inconnue'}`,
          }
        }
    } */
}

Apr 25, 2020, 4:56 PM

Thanks - and

codeList

? Could you paste that too? 🙂

Apr 25, 2020, 4:59 PM

import { GoListUnordered } from 'react-icons/go'

export default {
    name: 'codeList',
    title: 'Code List',
    icon: GoListUnordered,
    type: 'document',
    fields: [
      {
        name: 'code',
        title: 'Code Excursion',
        subtitle: 'string',
        description: 'Code commercial du service Cityvision',
        type: 'string',
        hidden: true,
      },
      {
        name: 'description',
        title: 'Nom du service',
        subtitle: 'string',
        description: 'Intitulé commercial du service Cityvision',
        type: 'string',
        hidden: true,
      },
      {
        name: 'price',
        title: 'Prix',
        type: 'number',
        readOnly: true,
      },
      {
        name: 'length',
        title: 'Durée',
        description: "Durée ISO de l'excursion, 'PT10H30M' pour 10h30min",
        type: 'string',
        readOnly: true,
      },
      {
        name: 'priceValidUntil',
        title: "Prix valide jusqu'à",
        readOnly: true,
        type: 'reference',
        to: [
            {
                name: 'priceValidUntil',
                title: 'Price Valid Until',
                type: 'priceValidUntil',
            },
        ],
    },
    {
        name: 'cityvisionImage',
        title: 'Cityvision Image',
        readOnly: true,
        type: 'number',
    },
  ],
  preview: {
    select: {
      title: 'code',
      subtitle: 'description',
    },
  },
}

Apr 25, 2020, 5:01 PM

What field from

codeList

would you like to show in the preview of

codeListLang

Apr 25, 2020, 5:02 PM

code

Apr 25, 2020, 5:02 PM

Try with this snippet in that case:

preview: {
  select: {
    title: 'codeList.code'
  }
}

What this does is that it retrieves the value of the

code

field from the

codeList

document to use in the

codeListLang

preview.

Apr 25, 2020, 5:05 PM

No it does not work:it ends showing the

_ref

again

Apr 25, 2020, 5:08 PM

Sorry!!!

Apr 25, 2020, 5:09 PM

I see why 🙂

Apr 25, 2020, 5:09 PM

I made a mistake in my statement:I am asking for

codeList

service.js

.the code of it:

import { RiBusLine } from 'react-icons/ri'
import client from 'part:@sanity/base/client'
import set from 'date-fns/set'
import add from 'date-fns/add'

var event = new Date() // voir ReleaseDate
var eventAtSeven = set(event, { hours: 7, minutes: 0 })
var eventAtSevenToFourDays = add(eventAtSeven, { days: 4 }) // voir startDate

export default {
  name: 'service',
  title: 'Service',
  icon: RiBusLine,
  description: 'un service Cityvision est un événement plus une offre commerciale',
  type: 'document',
  // description: "représentation de l'affectation prévisionnelle d'un Service Cityvision pour être effectué à une date, une heure, selon un programme représenté code d'affectation en une langue donnée; la représentation elle-même a été publiée depuis une date et une heure données, depuis cette publication son actualité est décrit par un statut: événement prévu, annulé, reporté, reprogrammé, prévu pour se tenir virtuellement en ligne"
  fields: [
    {
      name: 'startDate', // ATTENTION CHANGEMENT PAR RAPPORT À GATSBY
      title: 'Date',
      description: 'Date et Heure de Départ du service Cityvision',
      type: 'datetime', // ATTENTION CHANGEMENT PAR RAPPORT À GATSBY
      options: {
        dateFormat: 'YYYY-MM-DD',
        timeFormat: 'HH:mm',
        timeStep: 15,
      },
    },
    {
      name: 'codeList',
      description: 'Code commercial du service Cityvision (valeur default: VT)',
      title: 'Code List',
      type: 'reference',
      validation: Rule =&gt; Rule.required(),
      to: [
        {
          name: 'codeList',
          title: 'Code List',
          type: 'codeList',
        },
      ],
    },
    {
      name: 'lang',
      description: 'Langue parlée durant le service Cityvision (valeur default: ja)',
      title: 'Langue',
      type: 'reference',
      validation: Rule =&gt; Rule.required(),
      to: [
        {
          name: 'lang',
          title: 'Langue',
          type: 'lang',
        },
      ],
    },
    {
      name: 'releaseDate', // ATTENTION CHANGEMENT PAR RAPPORT À GATSBY
      title: 'Date de publication',
      description: 'Date de publication du service Cityvision',
      type: 'datetime', // ATTENTION CHANGEMENT PAR RAPPORT À GATSBY
      options: {
        dateFormat: 'YYYY-MM-DD',
        timeFormat: 'HH:mm',
      },
    },
    {
      name: 'status',
      title: 'Status',
      description: 'Status de la publication du service Cityvision',
      type: 'string',
      options: {
        list: [
          {title: 'Scheduled', value: 'EventScheduled'},
          {title: 'Cancelled', value: 'EventCancelled'},
          {title: 'Postponed', value: 'EventPostponed'},
          {title: 'Rescheduled', value: 'EventRescheduled'},
          {title: 'MovedOnline', value: 'EventMovedOnline'},
        ],
        layout: 'radio',
        direction: 'vertical',
      },
    },
  ],
  initialValue: async () =&gt; ({
    startDate: eventAtSevenToFourDays.toISOString(),
    status: 'EventScheduled',
    releaseDate: event.toISOString(),
    codeList: await client.fetch(`// groq
      *[_type == 'codeList' &amp;&amp; code match 'VT' ][0]{
        '_ref': _id,
        '_type': 'reference'
      }
    `),
    lang: await client.fetch(`// groq
      *[_type == 'lang' &amp;&amp; name match 'ja' ][0]{
        '_ref': _id,
        '_type': 'reference'
      }
    `),
  }),
  preview: {
    select: {
      title: 'codeList._id',
    },
  },
  orderings: [
    {
      title: 'Start Date, New',
      name: 'startDateAsc',
      by: [
        {field: 'startDate', direction: 'asc'}
      ]
    },
  ],
};

Apr 25, 2020, 5:10 PM

OK it's working beautifully now.

Apr 25, 2020, 5:11 PM

Please forgive me of being stupid here.Thank you for offering of your precious time to help me get out of this.

Apr 25, 2020, 5:12 PM

Awesome! And I see you’ve implemented

date-fns

from your earlier discussion with (Removed Name) too 🚀 Looking forward to seeing what you’re building 🙂

Apr 25, 2020, 5:13 PM

user Y

is saying in the sanity youtube video,«see you in the virtual space!»

Apr 25, 2020, 5:13 PM

Yes of course!

user Y

has given me that excellent advice ☆ YES !

Apr 25, 2020, 5:14 PM

I am building a real-time schedule for Events.But this is for learning the different techniques.
It's my first React project.
I was planning to just have it with Gatsby, when at a certain moment, Sanity got into my eyes, as I was searching for things dedicated to localization (you would say in Sanity).
From there, I looked around a few things... and it has been a sort of illumination.
Especially, the post that

user Y

made criticising Markdown.I would like to make a completely arbitrary routing project, with a template system so that to be efficient.
Sanity will help me keeping things... Sane!
One thing: I have start my project in Gatsby with Styletron: have you heard about it?
it seems to me that everyone is on Emotion or Styled component, but Styletron is also nice...

Apr 25, 2020, 5:22 PM

Sounds like a great way to learn a bunch of different frameworks, tools and languages 👨‍💻 It’s hard to beat learning by doing 🙂
I hadn’t heard of styletron but I know there are plenty of CSS-in-JS options out there and it comes down to personal preference too. As an alternative, Tailwind also seems quite popular at the moment:
https://tailwindcss.com/

Apr 25, 2020, 5:44 PM

I'll have a look...But isn't that you're comparing apples and bananas!
Styletron is something else than a framework.
It's a:

«an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.»

styletron.org it's beautiful, simple, elegant, efficient...

Apr 25, 2020, 5:50 PM

I just had a look a Tailwind.To justify their approach not to use inline css, they write:

    Designing with constraints. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
    Responsive design. You can't use media queries in inline styles, but you can use Tailwind's responsive utilities to build fully responsive interfaces easily.
    Pseudo-classes. Inline styles can't target states like hover or focus, but Tailwind's pseudo-class variants make it easy to style those states with utility classes.

Apr 25, 2020, 6:52 PM

• Designing with constraints. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined design system , which makes it much easier to build visually consistent UIs.•
Responsive design. You can't use media queries in inline styles, but you can use Tailwind's responsive utilities to build fully responsive interfaces easily.•
Pseudo-classes. Inline styles can't target states like hover or focus, but Tailwind's pseudo-class variants make it easy to style those states with utility classes.

Apr 25, 2020, 6:53 PM

I just had a look at Tailwind.To justify not to use direct inline style, they write 3 things:

    Designing with constraints. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
    Responsive design. You can't use media queries in inline styles, but you can use Tailwind's responsive utilities to build fully responsive interfaces easily.
    Pseudo-classes. Inline styles can't target states like hover or focus, but Tailwind's pseudo-class variants make it easy to style those states with utility classes.

Except that with Styletron, each of these three points are FALSE!!!
Hahaha,
• you can have a predefined system
• you can use @media queries
• you can have pseudo class on focus and hover
in terms of weight, efficiency, Styletron is EXCEPTIONAL too.
I don't quite get why it's not more know.

Apr 25, 2020, 6:58 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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 Watch demo

Was this answer helpful?

Categorized in

Reference

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Case studies

Popular guides

How to set a preview with a reference name in a document in Slack thread.

Sanity– build remarkable experiences at scale

Was this answer helpful?

Categorized in