Add a slug to your documents
When building a CMS, it is common to want to generate slugs for your documents based on a specific field, such as the title. This is useful for creating SEO-friendly URLs and improving the discoverability of your content.
In this tutorial, we will show you how to automatically generate slugs for your documents using FireCMS. It is very straightforward to add a callback that will be executed before saving your document, allowing you to generate the slug based on the title field.
Declare your collection
For illustrative purposes, let's create two simple pages
collection, with just a title field, that we will
be adding a slug to:
import { buildCollection } from "@firecms/core";
export type Page = {
title: string;
slug: string;
}
export const pagesCollection = buildCollection<Page>({
name: "Pages",
id: "pages",
path: "pages",
properties: {
title: {
name: "Title",
validation: { required: true },
dataType: "string"
},
slug: {
name: "Slug",
dataType: "string",
readOnly: true,
}
}
});
Add the pre-save callback
To add a slug to your documents, you can use the onPreSave
callback provided by FireCMS.
This callback will be executed before saving the document, allowing you to modify the document before
it is written to the database.
import { EntityCallbacks, slugify } from "@firecms/core";
const callbacks: EntityCallbacks = {
onPreSave: ({
collection,
path,
entityId,
values,
status,
context
}) => {
const updatedSlug = slugify(values.title);
values.slug = updatedSlug;
return values;
}
};
Complete code
Here is the complete code for this example:
import { buildCollection, slugify } from "@firecms/core";
export type Page = {
title: string;
slug: string;
}
export const pagesCollection = buildCollection<Page>({
name: "Pages",
id: "pages",
path: "pages",
callbacks: {
onPreSave: ({
values,
}) => {
const updatedSlug = slugify(values.title);
values.slug = updatedSlug;
return values;
}
},
properties: {
title: {
name: "Title",
validation: { required: true },
dataType: "string"
},
slug: {
name: "Slug",
dataType: "string",
readOnly: true,
}
}
});