Strapi Plugin: Relation View

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

Package Moved

The package has moved from strapi-plugin-relation-view to @xbstracts/strapi-plugin-relation-view. Please use the new package name for future installs and updates.

Compatibility

This plugin supports Strapi v5 with the peer dependency range @strapi/strapi >=5.0.0 <6.0.0. Its frontend peer ranges mirror Strapi v5's admin peer surface: React/React DOM ^17.0.0 || ^18.0.0, React Router DOM ^6.0.0, and styled-components ^6.0.0.

✨ 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

Install the package from npm:

npm install @xbstracts/strapi-plugin-relation-view

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

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

For local development from src/plugins/relation-view, add the local resolve path:

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

2. Build the Strapi admin:

npm run build

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