Strapi plugin logo for Generic Custom Fields

Generic Custom Fields

This plugin allows you to easily add custom fields to Strapi

thumbnail for Generic Custom Fields
Logo - Strapi Plugin Generic Custom Fields

Strapi v5 - Plugin Generic Custom Fields

Powerful Strapi Plugin to easily create Custom Fields

GitHub package.json version Monthly download on NPM

UI preview

A plugin for Strapi Headless CMS that provides a powerful and easy way to add custom fields to your Strapi entities.

Features

  • Add custom fields to entities with a simple configuration.

What can it be used for?

  • Create an Enum field with labels
  • Fetch items from an API (with or without authentication)
  • Fetch items from a local source (json file, database, etc.)

Roadmap

  • Support pagination for fetching items
  • Support for different field types (text, number, date, etc.)
  • Validation rules for custom fields
  • Any idea? Open an issue

Usage

To configure the Generic Custom Fields plugin, add your custom fields configuration to the plugin settings. Each custom field should follow this structure:

1type Config = {
2  customFields: Array<{
3    name: string;         // The unique name of the custom field.
4    description?: string; // A description for the custom field.
5    icon?: string;        // One of the supported StrapiIcon names, e.g. 'Alien', 'Archive', 'ArrowDown', etc.
6    inputSize?: {
7      default: 4 | 6 | 8 | 12; // Default input size.
8      isResizable: boolean;    // Whether the input size can be changed.
9    };
10    searchable?: boolean; // Whether the custom field is searchable (calls fetchItems with query).
11    fetchItems: ({ query: string | undefined }): { items: Item[] } | Promise<{ items: Item[] }>; // Function to fetch multiple items. This function is called on server-side.
12    fetchItem: ({ value: string }): Item | Promise<Item>; // Function to fetch a single item. This function is called on server-side.
13  }>,
14}
15type Item = {
16    value: string; // Unique identifier for the item. This is used to store the value of the custom field.
17    label: string; // Label of the item.
18    icon?: {
19      src: string; // URL of the icon.
20      colorMask?: boolean; // Whether the icon should be masked with the color of the field.
21    }
22};

This configuration allows you to define custom fields that can fetch items either synchronously or asynchronously. The fetchItems function is used to retrieve a list of items based on a query string that can be empty, while the fetchItem function retrieves a single item based on its value.

Example Configuration

Check Wiki page for Example Implementations

Install now

npm install strapi-plugin-generic-custom-fields

STATS

5 GitHub stars156 weekly downloads

Last updated

8 days ago

Strapi Version

5.16.0 and above

Author

github profile image for Christophe Carvalho Vilas-Boas
Christophe Carvalho Vilas-Boas

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.