Update Data Based on Relation - Directus Interface Extension

This is a Directus interface extension that automatically updates a field in the current record based on data from a related record. When a user selects a value in a many-to-one (M2O) relationship field, this extension can automatically populate another field with data from the selected related record.

Features

• Automatically fills target fields when a related record is selected
• Configurable source lookup field, source field, and target field
• Real-time updates when the lookup value changes

How it Works

1. Configure a source lookup field (M2O relationship)
2. Select which field from the related record to copy (source field)
3. Choose which field in the current record to update (target field)
4. When users select a value in the lookup field, the extension automatically fetches the related data and updates the target field

Use Cases

• Auto-populate customer details when selecting a customer
• Fill in product information when choosing a product
• Set default values based on category selection
• Copy reference data from master records

Development

To run the extension in development mode with hot reloading:

npm run dev

This will build the extension in watch mode without minification, allowing for faster development cycles with automatic rebuilds when files change.

Building

To build the extension for production:

npm run build

The built extension will be output to the dist directory and can be deployed to your Directus instance.

Installation

1. Copy the dist folder to your Directus extensions directory (typically extensions/)
2. Restart your Directus instance
3. The "Update data based on a relation" interface will be available in your field configuration options

Configuration

When adding this interface to a field in Directus:

1. Source lookup: Select the M2O relationship field that triggers the update
2. Source field: Choose which field from the related record to copy
3. Target field: Select the field in the current record that will be updated

Configuration Example

If you have:

• A customers collection with fields like name, email
• An orders collection with a customer_id M2O field pointing to customers

You could configure:

• Source lookup: customer_id
• Source field: email (from customers)
• Target field: customer_email (in orders)

Now when someone selects a customer, the customer's email will automatically populate the customer_email field.

Development Scripts

• npm run build - Build for production
• npm run dev - Build in watch mode for development
• npm run link - Link extension for local development
• npm run validate - Validate extension structure