How to add an automatic slug base on the title for a collection content?

johnmadrigal_

8 months ago

4

• 

  jesschow

  Payload Team

  8 months ago

  Absolutely - you could achieve this with a field hook and a function to format your title to a slug.

  
  
  

  For example:

  
  

  {
    name: 'slug',
    type: 'text',
    hooks: {
      beforeValidate: [
        formatSlug('title'),
      ],
    },
  }

  
  
  

  const formatSlug = (): FieldHook => ({ value }) => {
    const slugify = (val: string): string => val.replace(/ /g, '-').replace(/[^\w-]+/g, '').toLowerCase();
  
    if (typeof value === 'string') {
      return slugify(value);
    }
  };

• 

  adroit1

  6 months ago

  I just tried this, thanks!

  
  

  but i'm getting

  Expected 0 arguments, but got 1

  on formatSlug('title'). Is the type declaration for formatSlug correct?

• 

  jesschow

  Payload Team

  6 months ago

  Ah looking at it now the

  formatSlug

  function is incomplete, that part will slugify any value you manually type in but to automatically populate it with another field we need to add more:

  
  
  

  const formatSlug = (fallback: string): FieldHook => ({ operation, data, originalDoc, value }) => {
    const slugify = (val: string): string => val.replace(/ /g, '-').replace(/[^\w-]+/g, '').toLowerCase();
  
    if (typeof value === 'string') {
      return slugify(value);
    }
  
    if (operation === 'create') {
      const fallbackData = data?.[fallback] || originalDoc?.[fallback];
  
      if (fallbackData && typeof fallbackData === 'string') {
        return slugify(fallbackData);
      }
    }
  };

  
  
  

  That will use the field you pass through but also allow you to manually enter a value (see screen recording) also this will take care of your error.

  Screen_Recording_2023-03-12_at_10.58.25_PM.mov
• 

  face44

  3 months ago

  @jesschow it doesn't seem to be working with my

  drafts

  enabled.

  
  
  

  On Publish, I get a required field validation error

  
  

  On Save Draft, it generates the slug and saves the doc

  
  
  

  This is my field

  
  

  {
        name: 'slug',
        type: 'text',
        required: true,
        unique: true,
        admin: {
          position: 'sidebar',
          readOnly: true,
        },
        hooks: {
          beforeValidate: [formatSlug('title')],
        },
      },

  
  
  

  Any quick tips on how I can make it work please? 😦