Strapi Plugin Dynamic Custom Fields

A powerful Strapi 5 plugin that provides dynamic custom fields that adapt based on content context. Perfect for creating intelligent forms that respond to user input in real-time.

✨ Features

🎯 Count Analyzer Select Field

A smart dropdown field that dynamically changes its available options based on the count of items in a repeatable component.

Real-world Example:

• Blog Post with Featured Images (repeatable component)
• Layout Field (Count Analyzer) adapts options based on image count:
  • 1 image → ["Full Width", "Centered"]
  • 2 images → ["Side by Side", "Stacked"]
  • 3+ images → ["Grid", "Carousel", "Masonry"]

🔄 Real-time Updates

• Options update instantly when adding/removing repeatable component items
• No page refresh required
• Works with custom field labels set in admin panel

🎨 Smart Label Detection

• Automatically detects custom field labels from Strapi admin
• Works with renamed components in the UI
• Fallback to schema names when needed

📦 Installation

npm install strapi-plugin-dynamic-custom-fields

Enable the Plugin

Add the plugin to your config/plugins.js (or config/plugins.ts):

module.exports = {
  // ... other plugins
  'dynamic-custom-fields': {
    enabled: true,
  },
};

TypeScript version:

export default {
  // ... other plugins
  'dynamic-custom-fields': {
    enabled: true,
  },
};

Restart Strapi

npm run develop

🚀 Quick Start

Step 1: Add Count Analyzer Field

1. Open Content-Type Builder
2. Select your Collection Type or Single Type
3. Click "Add another field"
4. Go to "Custom Fields" tab
5. Select "Count Analyzer Select"
6. Enter field name (e.g., "layout")

Step 2: Configure the Field

Basic Settings

• Field Name: layout (or your preferred name)
• Display Name: Layout Options (optional)

Component Configuration

• Repeatable Component Name: Enter the exact field name of your repeatable component
  • Example: If you have a repeatable component field called "featured_images", enter: featured_images

Count Options (JSON)

Define what options appear for different counts:

[
  {
    "count": 1,
    "options": ["full-width", "centered"]
  },
  {
    "count": 2,
    "options": ["side-by-side", "stacked"]
  },
  {
    "count": 3,
    "options": ["grid", "carousel", "masonry"]
  }
]

Step 3: Save and Test

1. Save the content type
2. Go to Content Manager
3. Create/edit an entry
4. Add items to your repeatable component
5. Watch the Count Analyzer field options update automatically! ✨

💡 How It Works

🔍 Detection Process

1. Server-side Count: Uses Strapi's document service to get accurate component counts
2. Custom Label Resolution: Accesses Content Manager metadata to get custom field labels
3. Real-time DOM Updates: Monitors DOM changes for instant option updates
4. Fallback Mechanisms: Multiple detection methods ensure reliability

🎯 Smart Matching

• Exact Count Match: Shows options for the exact component count
• Fallback Logic: If no exact match, shows closest available options
• Empty State: Shows no options when no matching configuration exists

📋 Complete Example

Scenario: Blog Post with Dynamic Image Layouts

Content Type: Blog Post Repeatable Component: featured_images (contains image + caption) Count Analyzer Field: image_layout

1. Content Type Structure

Blog Post
├── title (Text)
├── content (Rich Text)
├── featured_images (Component - Repeatable) ← Monitor this
│   ├── image (Media)
│   └── caption (Text)
└── image_layout (Count Analyzer Select) ← Dynamic field

2. Count Analyzer Configuration

[
  {
    "count": 0,
    "options": ["no-images"]
  },
  {
    "count": 1,
    "options": ["hero-banner", "inline-left", "inline-right"]
  },
  {
    "count": 2,
    "options": ["side-by-side", "before-after", "comparison"]
  },
  {
    "count": 3,
    "options": ["three-column", "hero-plus-two", "carousel"]
  },
  {
    "count": 4,
    "options": ["grid-2x2", "masonry", "slideshow"]
  }
]

3. User Experience

• No images: Layout shows "no-images"
• Add 1 image: Options become "hero-banner", "inline-left", "inline-right"
• Add 2nd image: Options change to "side-by-side", "before-after", "comparison"
• Add 3rd image: Options update to "three-column", "hero-plus-two", "carousel"
• Add 4th image: Options become "grid-2x2", "masonry", "slideshow"

⚙️ Configuration Options

Field Settings

| Setting | Type | Required | Description | |---------|------|----------|-------------| | Repeatable Component Name | String | ✅ | Exact field name of the repeatable component to monitor | | Count Options | JSON Array | ✅ | Configuration mapping counts to available options |

Count Options Schema

interface CountOption {
  count: number;        // Number of component items
  options: string[];    // Available dropdown options for this count
}

type CountOptions = CountOption[];

🔧 Technical Architecture

Server-Side Components

• Custom Field Registration: Registers the Count Analyzer field type
• API Endpoint: /api/dynamic-custom-fields-plugin/component-count
• Document Service Integration: Uses Strapi 5's document service for data access
• Metadata Resolution: Accesses Content Manager configuration for custom labels

Client-Side Components

• React Input Component: Custom field UI with real-time updates
• DOM Mutation Observer: Monitors form changes for instant feedback
• Strapi Design System: Native Strapi UI components for consistency

Data Flow

1. Initial Load: Server provides component count and custom label
2. Option Mapping: Client matches count to configuration options
3. Real-time Updates: DOM observer detects component changes
4. Option Refresh: New count triggers option recalculation

🐛 Troubleshooting

Plugin Not Appearing

Problem: Count Analyzer field not visible in Content-Type Builder

Solutions:

1. ✅ Verify plugin is installed: npm list strapi-plugin-dynamic-custom-fields
2. ✅ Check config/plugins.js includes the plugin configuration
3. ✅ Restart Strapi: npm run develop
4. ✅ Clear browser cache and refresh admin panel

Count Detection Issues

Problem: Field shows wrong count or doesn't update

Solutions:

1. ✅ Exact Field Name: Ensure "Repeatable Component Name" matches exactly

   Schema field name: "featured_images"
   Configuration: "featured_images" ✅
   Configuration: "Featured Images" ❌

2. ✅ Check Browser Console: Look for API errors or detection warnings
3. ✅ Verify Component Type: Ensure target field is actually repeatable
4. ✅ Test with New Entry: Try creating a fresh entry to test detection

Options Not Updating

Problem: Dropdown options don't change when adding/removing components

Solutions:

1. ✅ Validate JSON: Use a JSON validator to check your configuration

   // ✅ Valid
   [{"count": 1, "options": ["option1"]}]
      
   // ❌ Invalid (missing quotes)
   [{count: 1, options: [option1]}]

2. ✅ Check Network Tab: Verify API calls to /api/dynamic-custom-fields-plugin/component-count
3. ✅ Custom Labels: If you renamed the component in admin, the plugin auto-detects the custom label

Common Configuration Mistakes

| ❌ Wrong | ✅ Correct | Issue | |----------|------------|-------| | "Featured Images" | "featured_images" | Use schema field name, not display name | | [{"count": "1"}] | [{"count": 1}] | Count must be number, not string | | {"count": 1} | [{"count": 1, "options": []}] | Must be array with options property |

🔄 API Reference

Component Count Endpoint

GET /api/dynamic-custom-fields-plugin/component-count

Query Parameters:

• contentType (string): Content type UID (e.g., "api::blog-post.blog-post")
• documentId (string): Document ID for existing entries
• componentName (string): Field name of repeatable component

Response:

{
  "count": 3,
  "labelName": "Featured Images",
  "componentName": "featured_images"
}