Most Popular Directus Extensions

1. Computed Interface

• A Directus extension for automatically calculating the value of a field based on other fields of the same item, on the client side.
• Support templating, arithmetic operations. Concat strings, sum, subtract, multiply, modulo, convert to slug, currency, etc.
• Lightweight. No third-party libraries.
• Can be used as an alias field.

Limitations

• Calculation is performed on the client side, so it would not work if the item is created/updated via direct API calls or hooks.

Learn more -> Github Url

Example

How to use

• Go to Settings, create a new field with type string or number.
• In the Interface panel, choose Computed interface. There are 8 options:
  • Template: Similar to M2M interface, determine how the field is calculated. Learn more about syntax in the next section.
  • Field Mode: Choose how the value is displayed.
    • null: Default option. Show an input with the computed value but still allow manual editing.
    • Display Only: Show the computed value but will not save it to the database. Usually used for alias fields.
    • Read Only: Show an input with the computed value and disallow manual editing.
  • Prefix: a string to prefix the computed value.
  • Suffix: a string to suffix the computed value.
  • Custom CSS: a JSON object for inline style binding. Only works with Display Only and Read Only mode. You can use this option to customize the appearance of the computed value such as font size, color, etc. Example: {"color": "red", "font-size": "20px"}.
  • Debug Mode: Used for debugging the template. It will show an error message if the template is invalid. It will also log to console the result of each component of the template.
  • Compute If Empty: Compute the value if the field is empty. This is useful if you want a value to be computed once such as the created date or a unique ID.
  • Initial Compute: Compute the value when opening the form. This is useful if you want to compute a value based on the current date or other dynamic values.

2. Display Link

Display URLs as links

Features

• Select any field type which has input.
• Go to Display section
• Type ( Benefits )
  • URL -> open in new tab shortcut
  • Telephone -> dial phone number shortcut
  • Email -> open email shortcut
  • Copy to clipboard
• Prefix & Suffix option
  • show +91 for mobile number or https for url

Learn more -> Github Url

Example

3. Masked Interface

Input text string by template

How to use

The interface extension uses string and numeric types.

1. Create new standard field with string type.
2. For interface select Input Mask and pick a masking type.

Available masking types:

• Template - simplified templating pattern
• RegEx - uses regular expression for defining the pattern
• Presets
  • URL
  • Email
  • IP Address (IPv4 templating pattern)
  • MAC Address (MAC address template using : as separators)
  • VIN
  • SIN

Learn more -> Github Url

Example

4. Currency Interface

How to use

• Go to Settings, create a new field with type string or number.
• In the Interface panel, choose Currency interface. There are 2 options:
  • Prefix: A string that will be prepended to the formatted value.
  • Suffix: A string that will be appended to the formatted value.

Learn more -> Github Link

Example

5. API Trigger Interface

How to use

• Go to Settings, create a new field with type alias.
• In the Interface panel, choose API Trigger interface. There are 2 options:
  • Layout: Display the button list vertically or horizontally.
  • Triggers: A list of trigger.
  • Label: label of the button
  • Size: size of the button
  • Type: style of the button
  • Icon: icon of the button
  • URL: API endpoint
  • Method: Method of the API call
  • Reload: If enabled, reload the browser if call succeeded
  • Disabled Conditions: disable the button if the conditions are met.

Learn more -> Github Url

Example