Appearance

Custom Fields ​

File Information ​

  • Path: pages/_workspace_id/workspace-settings/custom-fields/index.vue
  • Route: /:workspace_id/workspace-settings/custom-fields
  • Purpose: Manage custom field definitions for workspace assets

Overview ​

The Custom Fields page allows workspace administrators to create, edit, delete, and manage custom field definitions. These fields extend asset metadata beyond standard properties, enabling workspace-specific data capture and organization.

Key Features ​

  1. Field Definition Management

    • Create new field definitions
    • Edit existing field definitions
    • Delete field definitions
    • Reorder fields

  2. Field Types

    • Text fields
    • Number fields
    • Date fields
    • Select (dropdown)
    • Multi-select
    • Boolean (checkbox)
    • URL fields
    • Email fields

  3. Field Configuration

    • Field name and key
    • Field type selection
    • Required field option
    • Searchable option
    • Default values
    • Validation rules
    • Options (for select fields)

  4. Field Usage

    • View field usage statistics
    • See which assets use fields
    • Field value distribution

  5. Field Organization

    • Display order management
    • Field grouping
    • Field categories

Components Used ​

  • CustomFieldDialog - Create/edit field dialog
  • Field list components
  • Field type selectors
  • Validation rule inputs

Data Properties ​

javascript
{
  customFields: [],         // List of field definitions
  loading: false,          // Loading state
  saving: false,          // Saving state
  showDialog: false,      // Dialog visibility
  editingField: null,     // Field being edited
  fieldTypes: [           // Available field types
    'text', 'number', 'date', 'select',
    'multi_select', 'boolean', 'url', 'email'
  ]
}

Computed Properties ​

sortedFields ​

Returns fields sorted by display order

fieldUsageStats ​

Returns field usage statistics

Methods ​

loadCustomFields() ​

Loads custom field definitions:

  • Fetches fields from API
  • Updates field list
  • Handles errors

createField() ​

Opens create field dialog:

  • Resets form
  • Shows CustomFieldDialog
  • Handles field creation

editField(field) ​

Opens edit field dialog:

  • Loads field data
  • Shows CustomFieldDialog
  • Handles field update

deleteField(fieldId) ​

Deletes field definition:

  • Confirms deletion
  • Calls delete API
  • Refreshes field list
  • Shows success/error message

reorderFields(newOrder) ​

Reorders fields:

  • Updates display order
  • Saves new order via API
  • Refreshes field list

saveField(fieldData) ​

Saves field definition:

  • Validates field data
  • Creates or updates field
  • Refreshes field list
  • Closes dialog

API Endpoints ​

Get Custom Fields ​

  • Endpoint: GET /digital-assets/custom-field/list
  • Query Parameters: workspace_id
  • Response: Array of field definition objects

Create Custom Field ​

  • Endpoint: POST /digital-assets/custom-field/add
  • Request Body: Field definition data
  • Response: Created field object

Update Custom Field ​

  • Endpoint: PUT /digital-assets/custom-field/update
  • Request Body: Field definition data
  • Response: Updated field object

Delete Custom Field ​

  • Endpoint: DELETE /digital-assets/custom-field/delete
  • Query Parameters: field_id
  • Response: Success confirmation

Reorder Fields ​

  • Endpoint: PUT /digital-assets/custom-field/reorder
  • Request Body: Array of field IDs in new order
  • Response: Success confirmation

Field Definition Structure ​

javascript
{
  id: 123,
  name: "Project Name",
  field_key: "project_name",
  field_type: "text",
  is_required: false,
  is_searchable: true,
  default_value: null,
  options: [],  // For select fields
  validation_rules: {
    min_length: null,
    max_length: 100,
    pattern: null
  },
  display_order: 1,
  usage_count: 45
}

User Flow ​

  1. User navigates to Custom Fields page
  2. Page loads existing field definitions
  3. User creates new field definition
  4. User configures field properties
  5. User saves field definition
  6. Field appears in list
  7. User can edit/delete fields
  8. User can reorder fields

Integration Points ​

  • Asset Details: Fields displayed on assets
  • Search: Fields used in search filters
  • Bulk Operations: Fields applied to multiple assets
  • Asset Upload: Fields available during upload

Notes for Development ​

  • Page requires workspace admin permissions
  • Field keys must be unique
  • Deleting fields may affect existing assets
  • Field type changes require validation
  • Display order affects field appearance