Strapi Plugin: Relation View

Customize how relation entries are displayed in the Strapi admin panel by configuring custom display patterns.

✨ Features

• 🎨 Customizable Display Patterns - Define how relation entries appear using attribute placeholders
• ⚙️ UI Configuration - Easy-to-use settings page in Strapi admin
• 🔍 Content Type Aware - Configure different patterns for different content types and relation fields
• 🚀 Zero Impact - Keeps Strapi's relation mechanism and database structure intact
• 📋 Dynamic Attributes - Shows available attributes from target content types

📦 Installation

This plugin is already installed in your project at src/plugins/relation-view.

1. Enable the plugin in config/plugins.ts:

export default ({ env }) => ({
  // ... other plugins
  'relation-view': {
    enabled: true,
    resolve: 'src/plugins/relation-view',
  },
});

2. Build the plugin:

npm run build
# or during development
cd src/plugins/relation-view
npm run watch

3. Restart Strapi

🎯 Usage

1. Access Settings

Go to Settings → Relation View in your Strapi admin panel.

2. Add a Relation Configuration

Click "Add Relation Config" button.

3. Configure Display Pattern

1. Select Content Type - Choose the content type that has the relation field

   • Example: api::blog.blog

2. Select Relation Field - Choose which relation field to customize

   • Example: productBrands

3. Define Display Pattern - Create a pattern using attribute placeholders

   • Click on attribute badges to insert them
   • Example patterns:
     • {id}: {name} → "1: SimSon"
     • {name} - {status} → "SimSon - Active"
     • [{id}] {name} ({locale}) → "[1] SimSon (en)"

4. Save Configuration

Click "Save Configuration" to apply your changes.

5. See Results

Open the Content Manager and edit any entry with the configured relation field. The dropdown and selected entries will now display using your custom pattern!

📝 Example Configuration

Scenario: Blog with Product Brands

Content Type: api::blog.blog
Relation Field: productBrands
Target: api::brand.brand
Available Attributes: id, name, slug, description, locale, publishedAt

Pattern:

{id}: {name}

Result:

• Before: "SimSon"
• After: "1: SimSon"

📄 License

MIT