Get help on Discord

How to show createdAt field in Sanity Studio

19 replies
Last updated: Apr 13, 2022
might be a dumb question but is there a way to show the 
createdAt
field of a document in the studio
AI Update

Not a dumb question at all! Yes, there are several ways to show the _createdAt field in Sanity Studio.

Quick Option: Show in Preview

The simplest approach is to display it in the document preview using the preview section of your schema:

preview: {
  select: {
    title: "title",
    created: "_createdAt",
  },
  prepare({ title, created }) {
    return {
      title: title,
      subtitle: created
    }
  }
}

Display as a Field in the Document

If you want to show _createdAt as an actual field inside the document form, you'll need to create a custom input component. Here's a working solution from this community answer:

1. Create the custom component:

import React from 'react';
import { Card, Text } from '@sanity/ui';
import { withDocument } from 'part:@sanity/form-builder';

const CreatedAt = React.forwardRef((props, ref) => {
  return (
    <Card padding={[3, 3, 4]} radius={2} shadow={1} tone='positive'>
      <Text align='center' size={[2, 2, 3]}>
        Created at {props.document._createdAt}
      </Text>
    </Card>
  );
});

export default withDocument(CreatedAt);

2. Add it to your schema:

{
  name: 'createdAtDisplay',
  title: 'Created At Display',
  type: 'string',
  inputComponent: CreatedAt
}

This field won't actually store any data (since there's no input), but it will display the _createdAt value from the document. You can also format the date, add styling, or even run GROQ queries within the component using useEffect if you need more complex functionality.

Note: If you're using Studio v3, the import paths and approach would be slightly different - you'd use @sanity/ui and the new component API instead of part:@sanity/form-builder.

Alternative: Check Document History

You can also simply check the document's version history in Studio to see when it was created and last edited, though this is less visible than the above options.

Show original thread
19 replies
If you want to show it in the preview, you could use the 
_createdAt
inside the preview section of the schema.

preview: {
  select: {
   title: "title"
   created: "_createdAt",
  },
  prepare({ title, created }) {
   return {
    title: title
    subtitle: created
   }
  }
},
I usually just check the version history to see when it was created/last edited
user J
thanks for this. is there a way to display it as a field in the doc tho as well?
we use the 
createdAt
as a submission date as well
Technically yes, but you may need to create a custom component in order to query the document and get the _createdAt date within the document
I’m not sure if there is a way to query the current document values inside an 
initialValue
function, but if there is that could work by setting the initial value on a datetime field when the doc is created
Something like this will show your 
_createdAt
field:
import React from 'react';
import { Card, Text } from '@sanity/ui';
import { withDocument } from 'part:@sanity/form-builder';

const CreatedAt = React.forwardRef((props, ref) => {

  return (
    <Card padding={[3, 3, 4]} radius={2} shadow={1} tone='positive'>
      <Text align='center' size={[2, 2, 3]}>
        Created at {props.document._createdAt}
      </Text>
    </Card>
  );
});

export default withDocument(CreatedAt);
user M
ohhh i like this! would this be a custom component?
Exactly. You'd have to import it and set up a field in your schema.
{
  name: 'createdAtDisplay',
  title: 'Created At Display',
  type: 'string',
  inputComponent: CreatedAt
}
You wouldn't actually be able to write anything to the field since there are no inputs in the component, so the field would never actually show up in your data.
Works great
oh nice!
user M
Is it possible to do a groq query in this component?
I tried
import sanityClient from 'part:@sanity/base/client'

export const client = sanityClient.withConfig({
  apiVersion: '2022-03-28',
})
const CreatedAt = React.forwardRef( async (props, ref) => {

  const result = await client.fetch(`*[_type == 'page'] {...}`)

  console.log(result)
but the async inside forwardRef seems to make Studio angry
user M
this works like a charm
user J
I'll plop my queries inside of a 
useEffect
. I just found a component I'm using that does it:
  useEffect(() => {
    const getSections = async () => {
      await studioClient
        .fetch(`*[_id == $id][0].sections[].title`, {
          id: parent.page._ref || '',
        })
        .then(setListItems);
    };

    getSections();
  }, []);
Amazing, this is great, thank you
user M
!
You're welcome!
The only downside is the slight delay in the data loading from the groq query causing it to be blank then populate, but otherwise works great
True. And if you continue to add a bunch of components into your page it will significantly increase the load time of the document. It's unlikely you'll use enough to make it noticeable, but I store all of my custom inputs in an example document for ease of use when working in the community and it is a beast to load.

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?