Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
johnmadrigal_2 years ago
4

For example I have News Collection and it has a content with the title "Content Sample".



Is it possible to have a automatic slug from its api that has a value "content-sample"?

  • default discord avatar
    jessrynkar2 years 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);
      }
    };
  • default discord avatar
    adroit12 years 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?

  • default discord avatar
    jessrynkar2 years 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.

  • default discord avatar
    face44last year
    @854377910689202256

    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? 😦

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.