Custom Fields are a feature that allows you to combine multiple fields and adjust layouts based on selectable fields in the API schema.

How to Create

Custom Fields can be created for each API.
Clicking the "Custom Fields" link in the upper right corner of the screen when selecting an API will take you to the list of Custom Fields.

After that, you can transition to the Custom Field creation screen by clicking the "Add" button.

Here, we will introduce an example of creating a Custom Field that summarizes meta information.

Enter Basic Information for the Custom Field

First, set the "Custom Field Name" and "Custom Field ID".

Define the API Schema

Next, design the necessary schema within the Custom Field.
This time, we will prepare three items as meta information: Title / Summary / OGP Image.

Specify the Layout

Finally, specify the layout.
You can choose between 1 column or 2 columns, and you can change the position of each input form by dragging and dropping.
This time, we will place the title and summary in the left column and the OGP image in the right column.

With this, the creation of the Custom Field is complete. After creation, it will be displayed on the list screen of Custom Fields.

How to Set Up Fields

To use the created Custom Fields, navigate to "API Settings" > "API Schema".
Select "Custom" from the field types.

When you select "Custom", a select box will appear, allowing you to choose the Custom Field "Meta Information" that you created earlier.

Ultimately, the schema settings will look like the one below.

Save the changes to the schema, and the setup of the Custom Fields is complete.

How to Submit Data

When you transition to the content editing screen, the following input screen will be displayed.

In the editing screen of the content where the Custom Fields are placed, the contents of the defined schema will be displayed as a single group (box).
Within the group, each pre-configured field is arranged, and you can submit data using the same operations as with regular fields.

For submissions using API and CSV, please refer to the following documentation.

Limitations / Notes

• There is no upper limit on the number of Custom Fields that can be set.
• You cannot define Custom Fields within Custom Fields. As an alternative, please consider using the Repeat Field.
• Custom Field settings cannot be shared across APIs. Please set them for each API individually.

Field Detailed Settings

API Response

The response when using Custom Fields is returned in object format.
Please refer to the documentation below for more details.

How to Use in Frontend

Custom Fields return data in object format, so you specify the properties (the field IDs defined within the Custom Field) to retrieve the information.
Below is an implementation example using generateMetadata in Next.js to reflect the values of the meta information in the page's meta tags.

export async function generateMetadata({ params }) {
  const { slug } = await params;

  // Fetch data using the microCMS JavaScript SDK (https://github.com/microcmsio/microcms-js-sdk)
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return {
    // meta is the field ID. Please replace it with the actual field ID
    title: data.meta.title,
    description: data.meta.description,
    openGraph: {
      title: data.meta.title,
      description: data.meta.description,
      images: [data.meta.image.url],
    },
  };
}

export default async function Page({ params }) {}

Other Use Cases

We also have the following blogs as implementation examples, so please refer to them as well.