Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion on locking input and slug generation in Sanity.io

10 replies
Last updated: Jan 20, 2022
A couple of questions as I couldn't find anything using the docs search, is it possible to lock an input? For example the slug field, once generated I don't want the editor to change it. I thought it was demoed in the last open house but I couldn't find anything. My second question along the same lines, when I have a title like 
VMI's RB staying for an extra year
, the slug will be something like 
vmi-s-rb-staying-for-an-extra-year
. Is there a way to tell sanity that if a word has an 
'
, don't put a hyphen? So something like 
vmis-rb-staying-for-an-extra-year
?
Jan 18, 2022, 3:47 PM
In the Slug schema type docs it looks like the readOnly can take a conditional callback (wherein my thinking would be, is it empty? If so, don't let them touch it again), and the slugify option (maybe?) takes a callback to let you override its functionality. Or is that inaccurate?
Jan 18, 2022, 4:47 PM
Ah ok, I would still just need to update the 
replace()
as it still takes 
VMI's
and makes it 
vmi-s
instead of 
vmis
. It just looks weird having 
vmi-s-rb
🤷
Jan 18, 2022, 7:47 PM
.replace(/[^\w\-]+/g, '')
should handle that.
Jan 18, 2022, 7:48 PM
All I did was click 
generate
with
{
      name: "slug",
      title: "Slug",
      description:
        "Press generate to generate the slug automatically, do not manually input slug",
      type: "slug",
      readOnly: ({ document }) => document?.slug,
      slugify: (input) =>
        input
          .toLowerCase()
          .trim()
          .replace(/\s+/g, "-")
          .replace(/[^\w\-]+/g, "")
          .replace(/\-\-+/g, "-"),
      options: {
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    },

Jan 18, 2022, 7:51 PM
Also, is it possible to make it ready only once it has been published? Kind of sucks if you are doing everything in order and then bam you need to change the title 😅
Jan 18, 2022, 7:52 PM
Sorry James—I’m not sure what the issue might be. I just tested that exact slugify function and it game me 
vmis-rb-staying-for-an-extra-year
. Maybe try a hard refresh of your browser or restarting your studio process in the terminal?
For your latest question, you could look at using a
document action to set the slug to read-only before publishing. This code might give a starting point or some inspiration, as well. Depending on how much leeway you want to give your editors, you could build in a boolean or other logic to make the slug field writable again. For example, if the title is deleted this would let you set the slug again:

readOnly: ({ document }) => document?.title && document?.slug,
Jan 18, 2022, 8:12 PM
Yeah I am still getting the issue 😕 I restarted the studio, I even opened the studio in a browser I haven't been using to run the studio in. I have now tried in both Safari and Chrome with no luck. Not sure what I am doing wrong... Because even when deploying the studio, it still adds the 
-

{
      name: "slug",
      title: "Slug",
      description:
        "Press generate to generate the slug automatically, do not manually input slug",
      type: "slug",
      readOnly: ({ document }) => document?.title && document?.slug,
      slugify: (input) =>
        input
          .toLowerCase()
          .trim()
          .replace(/\s+/g, "-")
          .replace(/[^\w\-]+/g, "")
          .replace(/\-\-+/g, "-"),
      options: {
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    },
Jan 19, 2022, 4:14 PM
Yeah I am still getting the issue 😕 I restarted the studio, I even opened the studio in a browser I haven't been using to run the studio in. I have now tried in both Safari and Chrome with no luck. Not sure what I am doing wrong... Because even when deploying the studio, it still adds the 
-

{
      name: "slug",
      title: "Slug",
      description:
        "Press generate to generate the slug automatically, do not manually input slug",
      type: "slug",
      readOnly: ({ document }) => document?.title && document?.slug,
      slugify: (input) =>
        input
          .toLowerCase()
          .trim()
          .replace(/\s+/g, "-")
          .replace(/[^\w\-]+/g, "")
          .replace(/\-\-+/g, "-"),
      options: {
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    },
Jan 19, 2022, 4:14 PM
Sorry… I didn’t pay close enough attention. The 
slugify
function needs to be inside of the 
options
object.
Jan 19, 2022, 7:36 PM
🤦 now it is working 😅
Jan 20, 2022, 3:28 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.

Get started for freeExplore the demo

Was this answer helpful?