Get help on Discord

Show published/unpublished status icon in Sanity document list

14 replies
Last updated: Jul 6, 2021
Another question about published/unpublished documents. Is there a way to signal to the users that a given document is un/published? It would be really helpful to include an icon for that in the document list.
AI Update

Yes, you can definitely show published/unpublished status in document lists! The best way to do this is by using preview configuration in your schema with the prepare function to customize how documents appear in lists.

Here's a practical example that shows a document's published status:

defineType({
  name: 'post',
  type: 'document',
  fields: [
    // your fields here
  ],
  preview: {
    select: {
      title: 'title',
      media: 'image',
      // The _id field is always available
      id: '_id'
    },
    prepare({title, media, id}) {
      // Documents without _id starting with "drafts." are published
      const isPublished = !id?.startsWith('drafts.')
      
      return {
        title: title,
        subtitle: isPublished ? '✅ Published' : '📝 Draft',
        media: media
      }
    }
  }
})

For a more visual approach, you can also conditionally change the media/icon based on status:

import { PublishIcon, EditIcon } from '@sanity/icons'

preview: {
  select: {
    title: 'title',
    media: 'image',
    id: '_id'
  },
  prepare({title, media, id}) {
    const isPublished = !id?.startsWith('drafts.')
    
    return {
      title: title,
      subtitle: isPublished ? 'Published' : 'Draft',
      media: media ?? (isPublished ? PublishIcon : EditIcon)
    }
  }
}

Important note about the API perspective change: As of API version 2025-02-19, the default perspective changed from raw to published. This means by default you'll only see published documents in your queries. If you need to see both drafts and published documents in your custom document lists, you may need to adjust your GROQ filters accordingly.

You can also combine this with the Structure Builder to create separate lists for published and draft documents:

S.list()
  .title('Content')
  .items([
    S.listItem()
      .title('Published Posts')
      .child(
        S.documentList()
          .title('Published Posts')
          .filter('_type == "post" && !(_id in path("drafts.**"))')
      ),
    S.listItem()
      .title('Draft Posts')
      .child(
        S.documentList()
          .title('Draft Posts')
          .filter('_type == "post" && _id in path("drafts.**")')
      )
  ])

This gives your editors a clear visual indicator of document status right in the list view, making it much easier to manage content workflow!

Show original thread
14 replies
About halfway down this page it shows one way you can do that: https://www.sanity.io/docs/previews-list-views
Cool, but this is not specifically for un/published statuses right?
The 
_id
of a document begins with 
drafts
if it is not published. So, this works:
preview: {
        select: {
            title: 'title',
            theId: '_id'
        },
        prepare(selection) {
            const {title, theId} = selection
            const isDraft = theId.substring(0,5) == 'draft' ? '👷' : '✅'
            return {
                title: title,
                media: <span style={{fontSize: '1.5rem'}}>{isDraft}</span>
            }
        }
    }
which renders:
Cool! I’ll try it, thanks
Where do did you get the icons from?
So technically, a “draft” state can mean three things: 1. you have modified an existing document (that still can be “live”), 2. you have created a new one or 3. you have unpublished it, correct?
A document, identified by 
_id
is either in a published or unpublished state. If it's not published the 
_id
will start with `drafts.`(and it won't be exposed in api)
What is immediately visible in the document editor (and exposed in API if published) is identified by the 
_id
and a revision, under 
_rev
. As you change among various historical versions of your document, the 
_rev
changes for each.
Oh so if you start and modify an already published document, that document will be unpublished automatically?
No, but you will start a new revision.
There are two places you can click to see this in action...go to a document and fiddle around - publish, unpublish, edit, go up to "current version" and choose a prior revision. As you do so, go each time to "inspect" and you can see the 
_rev
and 
_id
values changing
Ok, I see. So there is no direct property to check for only published/unpublished
Not that I know of...but I'm not an authority on the matter!
Yep, gotcha
But I think that's the case since in the docs:

Drafts are not available to the public API, but can be accessed using an authenticated client or using an access token. Sometimes you therefore might need to filter drafts from your queries. You can do this by adding the following filter:
*[!(_id in path('drafts.**'))] // _id matches anything that is *not* in the drafts-path

https://www.sanity.io/docs/drafts

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?