M2A Field Selector Extension

A Directus interface extension that allows selecting items from multiple collections with custom field output.

Features

• Multi-Collection Selection: Select items from multiple collections in a single interface
• Custom Field Output: Specify which field to use as output for each collection
• Multiple Display Modes: Choose between button, drag, and direct display modes
• Search Functionality: Built-in search across all configured collections
• Drag and Drop Reordering: Reorder selected items in drag mode
• Flexible Output Formats: Choose from detailed, simple, or IDs-only output formats
• Validation: Built-in validation for selected items
• Customizable: Configurable placeholders and display options

Installation

From NPM (Recommended)

npm install directus-extension-m2a-field-selector

Manual Installation

1. Download or clone this repository
2. Install dependencies with npm install
3. Build the extension with npm run build
4. Move the built extension to your Directus extensions folder

Configuration

The interface has the following configuration options:

Collections

Add one or more collections and specify which field should be used as the output value for each collection.

Format:

[
  {
    "collection": "articles",
    "outputField": "title"
  },
  {
    "collection": "categories", 
    "outputField": "name"
  }
]

Display Mode

Choose how the interface should be displayed:

• Button: Opens a drawer with the selection interface (default)
• Drag: Shows selected items in a draggable list for reordering
• Direct: Shows the selection interface directly in the field

Output Format

Choose how the selected items should be formatted in the data:

• Detailed: Returns a standard Directus M2A relationship format

  {
    "categories": [
      {
        "collection": "category",
        "field": "title",
        "value": "Camps",
        "id": 94426642
      },
      {
        "collection": "category",
        "field": "title", 
        "value": "Film",
        "id": 3143044
      }
    ]
  }
  

• Simple: Returns an array of output field values

  ["Item 1", "Item 2", "Item 3"]
  

• IDs only: Returns an array of item IDs

  [1, 2, 3]
  

Placeholder

Customize the placeholder text shown in the selector.

Usage

1. Field Setup:

   • Create a field with type json or alias
   • Select “M2A Field Selector” as the interface
   • Configure the collections and output fields

2. Configuration:

   • Add collections you want to select from
   • Specify the output field for each collection
   • Choose your preferred display mode and output format

3. Selection Process:

   • Users can search across all configured collections
   • Select items from any collection
   • Reorder items if using drag mode
   • Items are automatically formatted according to your output format

Example Configuration

// Interface configuration
{
  collections: [
    {
      collection: 'articles',
      outputField: 'title'
    },
    {
      collection: 'categories',
      outputField: 'name'
    }
  ],
  displayMode: 'button',
  outputFormat: 'detailed',
  placeholder: 'Choose items...'
}

Advanced Usage

Custom Output Formats

You can extend the output formats by modifying the interface:

// Custom output format example
const customFormat = (items) => {
  return items.map(item => ({
    id: item.id,
    collection: item.collection,
    label: item.value,
    url: `/admin/content/${item.collection}/${item.id}`
  }));
};

Integration with Other Extensions

This extension works well with other Directus extensions:

• Slug Generator: Use with slug generator for URL-friendly identifiers
• File Manager: Select files from the file collection
• User Management: Select users for assignments or permissions

Compatibility

• Directus 10.x and later
• Field types: json, alias
• Node.js >= 16.0.0

Development

Project Setup

The project requires @directus/extensions-sdk to be installed as a development dependency:

npm install --save-dev @directus/extensions-sdk

Build Commands

# Build for production
npm run build

# Build for development (watch mode)
npm run dev

# Prepare for publishing
npm run prepublishOnly

Project Structure

src/
├── components/          # Vue components
├── interface.vue        # Main interface component
├── index.ts            # Extension entry point
├── types.ts            # TypeScript type definitions
├── utils.ts            # Utility functions
└── LimitSelector.vue   # Limit selector component

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.