Auto-filling fields in Sanity schemas and the complexity of implementing it.

38 replies
Last updated: Feb 1, 2022
Help, I would like to know if I can auto-fill another field in the same schema, for example, from title to subtitle:
{
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title',
    },
    {
      name: 'subtitle',
      title: 'SubTitle (Recommended)',
      type: 'string',
    },
  ]
}
is it possible?
Jan 31, 2022, 7:22 PM
Oh!, I will look at it 😄 looks like it could do what I need.
Jan 31, 2022, 8:15 PM
thanks.
Jan 31, 2022, 8:15 PM
You're welcome!
Jan 31, 2022, 8:17 PM
user M
by the way, do you know if it could work on sibling schemas? Let’s say, I have one schema called
post
which has a title property and then the post also have a field called
meta
which it also contains a title, so my idea is to extract the title from post into the meta… Is that possible with this approach?
Jan 31, 2022, 8:24 PM
I think that I could do it with
isUnique
taking a look…
Jan 31, 2022, 8:25 PM
If they're exactly the same I wouldn't set a separate field in your schema for it. I'd just handle setting the meta title using the post title on your frontend.
Jan 31, 2022, 8:26 PM
No, they have some differences, for example:
TITLE | SITENAME
Jan 31, 2022, 8:28 PM
No, they have some differences, for example:
TITLE | SITENAME
Jan 31, 2022, 8:28 PM
If that's the case I'd use a slug field again. If the built in slugify function doesn't achieve what you need for that field you can override it by providing a function to your schema's
options.slugify
. Pretty handy!
Jan 31, 2022, 8:30 PM
Nice!
Jan 31, 2022, 8:45 PM
user M
sorry for bothering you again 🙂, but do you know how to make it reactive? I mean listening to the title to automatically fill the slug type?
Jan 31, 2022, 8:46 PM
is that possible?
Jan 31, 2022, 8:46 PM
One thing that we don’t want is to press the button to generate the slug, and if possible, also hide the button.
Jan 31, 2022, 8:48 PM
It is! But you would need to create a custom document action that updates the
slug
field before publishing. Similar to this action .
Jan 31, 2022, 8:53 PM
Let me know if you're having trouble getting it set up and I can walk you through it.
Jan 31, 2022, 9:07 PM
Let me know if you're having trouble getting it set up and I can walk you through it.
Jan 31, 2022, 9:07 PM
😬 looks a bit complicated to me, and I think it goes away of what I need, the idea is that when I type something in a title field the meta title also gets filled with the same data, it’s basically fill to inputs using only the first one, but with document actions, it looks like I will not get it because it requires user interaction on the button.
Jan 31, 2022, 9:17 PM
Similar: <https://www.section.io/engineering-education/data-binding-with-angular /two-way-binding.gif>
Jan 31, 2022, 9:20 PM
without the button
Jan 31, 2022, 9:21 PM
As I said, a document action it the only way you can automatically set a field based off of the input in another field. It won't require any other input from an editor besides publishing the document.
Jan 31, 2022, 9:24 PM
Thanks 🙂
Jan 31, 2022, 9:47 PM
You are overcomplicating things. If you want to have title and metaTitle, where metaTitle by default should use value from title but with the option for the author to overwrite it just add a description to the field: “If left empty the title will be used”.
And then in your app just check simple condition metaTitle || title. That’s it job done. Simple solutions are the best
Jan 31, 2022, 10:02 PM
user H
Speaking as someone who overthinks everything, the benefit of a simple solution is you can always overcomplicate it later 😃
Jan 31, 2022, 10:23 PM
user H
I would love to say this to the client, it will not want to have not an overcomplicated solution of course, but something simple, the SEO section with its fields are at the end of the post creation page, they don’t want to fill almost the same thing twice. I know that another thing is to
hide
that section of SEO and handle it from the client side, but that will need to be discussed with the client.
Jan 31, 2022, 10:27 PM
Client/business is not always right and developers are not only to implement solutions but be a voice of sense. They do not understand technology, we do
Jan 31, 2022, 10:29 PM
Imagine a situation when you fill the metaTitle automatically based on title. But then the business wants to overwrite it to sometjing different. Imagine now they changed the title again. Should the metatitle overwrite automatically again? How would you mark which filed was changed and which not?
Jan 31, 2022, 10:30 PM
I agree with this, sadly 🙃
Jan 31, 2022, 10:30 PM
Imagine a situation when you fill the metaTitle automatically based on title. But then the business wants to overwrite it to sometjing different. Imagine now they changed the title again. Should the metatitle overwrite automatically again? How would you mark which filed was changed and which not?
Jan 31, 2022, 10:30 PM
If metaTitle is empty it means the title will be used instead/ If there is a value it means it was overwritten and that value will be used. Simple, cheap, what else could you possible want?
Jan 31, 2022, 10:32 PM
As a developer I could make it possible, and I think everyone here also knows how to do it, but I am new in Sanity and I don’t know too much about it, so I expected it would be a bit straightforward.I appreciate your input by the way, don’t get me wrong. I will talk with the client tomorrow about this requirement.
Jan 31, 2022, 10:35 PM
If metaTitle is empty it means the title will be used instead
The thing is that the client wants to see this in our cms, in the client will be okay, but he wants it on the cms.
Jan 31, 2022, 10:36 PM
sure thing, the point is it doesn’t matter if that’s possible or not, it’s too complex, and the complexity doesn’t bring any value, quite opposite it just makes authoring complex and unclear
Jan 31, 2022, 10:37 PM
To be fair,
user M
, I use this method and it's one of the most complicated pieces for developers new to Sanity. It really IS a lot of code just for one thing. I've also used a listener, too.
Jan 31, 2022, 11:42 PM
To be fair,
user M
, I use this method and it's one of the most complicated pieces for developers new to Sanity. It really IS a lot of code just for one thing. I've also used a listener, too.
Jan 31, 2022, 11:42 PM
user L
, yep, it's up there with custom input components in terms of difficulty grasping for new Sanity folks. Hence, my offer to help set it up!
Jan 31, 2022, 11:49 PM
user M
thank you for your help, I appreciated, I finally followed your suggestions and it’s working now.The thing is that I didn’t know how Sanity works, I read more the docs and finally using custom components made it.


user H
thanks for your input.
Feb 1, 2022, 12:08 PM
user M
thank you for your help, I appreciated, I finally followed your suggestions and it’s working now.The thing is that I didn’t know how Sanity works, I read more the docs and finally using custom components made it.


import React from 'react';
import {FormField} from '@sanity/base/components';
import {TextInput} from '@sanity/ui';
import { useId } from '@reach/auto-id';
import PatchEvent, {set, unset} from '@sanity/form-builder/PatchEvent';
import {withDocument} from 'part:@sanity/form-builder';

const MetaTitleTextField = React.forwardRef((props, ref) =&gt; {
  const inputId = useId();

  const handleChange = React.useCallback((event) =&gt; {
    const inputValue = event.currentTarget.value;
    props.onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()));
  }, [props.onChange]);

  const customValue = props.value || `${props.document.title} | COMPANY TITLE`;

  return (
    &lt;FormField
      title={props.type.title}
      description={props.type.description}
      __unstable_markers={props.markers}
      __unstable_presence={props.presence}
      compareValue={props.compareValue}
      inputId={inputId}
    &gt;
      &lt;TextInput
        id={inputId}
        onChange={handleChange}
        value={customValue}
        readOnly={props.readOnly}
        placeholder={props.placeholder}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        ref={ref}
      /&gt;
    &lt;/FormField&gt;
  );
});

export default withDocument(MetaTitleTextField);

user H
thanks for your input.
Feb 1, 2022, 12:08 PM
user T
for sure, and as
user L
said, it's hard to tell what's going on there. Glad you got it working!
Feb 1, 2022, 3:54 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.

Was this answer helpful?