Directus Internal Form Panel

A Directus panel extension that allows you to create and update collection records directly from the dashboard. This extension integrates seamlessly with relationship variable panels and provides an intuitive form interface for data management.

Features

  • Create New Records: Add new items to any collection directly from a dashboard panel
  • Update Existing Records: Edit existing records by providing an item ID
  • Dynamic Form Fields: Configure which fields to display in the form
  • Responsive Design: Adapts to different panel sizes (small/large layouts)
  • Permission Aware: Respects Directus user permissions for collection access
  • Custom Response Format: Configure how successful submissions are displayed
  • Loading States: Visual feedback during form submission and data loading
  • Scrollable Content: Handles large forms with repeater fields and code editors

Installation

  1. Copy the extension to your Directus extensions directory:

    /extensions/panels/internal-form/

  2. Build the extension:

    npm run build

  3. Restart your Directus instance

Configuration

When adding the panel to your dashboard, you can configure:

Panel Options

  • Collection: The target collection for creating/updating records
  • Fields: Array of field names to include in the form
  • Item ID: (Optional) ID of an existing item to edit. Leave empty to create new records
  • Response Format: Template string for displaying successful submission results
  • Show Header: Toggle panel header visibility

Example Configuration

{
  "collection": "tasks",
  "fields": ["name", "description", "status", "assigned_to"],
  "itemId": "{{ $route.params.id }}",
  "responseFormat": "{{ name }} - {{ status }}",
  "showHeader": true
}

Usage

Creating New Records

  1. Configure the panel with your target collection and desired fields
  2. Leave the “Item ID” field empty
  3. Fill out the form fields
  4. Click “Save” to create the new record

Updating Existing Records

  1. Configure the panel with your target collection and desired fields
  2. Set the “Item ID” to the ID of the record you want to edit
  3. The form will automatically load the existing data
  4. Modify the fields as needed
  5. Click “Update” to save changes

Integration with Variables

The extension works great with Directus variables. For example, you can use route parameters or other dashboard variables:

  • {{ $route.params.id }} - Use the current route’s ID parameter
  • {{ $filters.client_id }} - Use a dashboard filter value

Field Types Supported

The extension supports all standard Directus field types including:

  • Text and textarea fields
  • Number fields
  • Date and datetime fields
  • Boolean toggles
  • Select dropdowns
  • Relationship fields
  • Repeater fields (with scrollable content)
  • Code editor fields
  • File and image uploads

Permissions

The extension respects Directus permissions. Users must have:

  • Create permission for the collection to add new records
  • Update permission for the collection to edit existing records
  • Read permission to view and populate form fields

Development

Build Commands

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

Requirements

  • Directus ^10.10.0
  • Vue ^3.5.16
  • TypeScript ^5.8.3

License

MIT License - see LICENSE file for details

Support

For issues, questions, or contributions, please visit the project repository or contact the maintainer.