🐰 Directus extension: Text action display & interface

💡 A directus interface + display adding copy to clipboard and link actions to your values.

The actions can be performed by a button next to the items or by clicking on the value.

↑ Add copy-to-clipboard and link functions to your data

Modified

prefix support: return \https://www.google.com/${id}\``. Right now only work interface

✨ Supports

📋 Copy action

Each value can be copied by a custom button. If enabled it's also possible to copy a value by just clickung on it (click-action)

➡️ Links

When using the link-option it supports ➡️ HTTP-, 📧 mail-, and 📞 phone- links. Each link can be opened by the custom button. If enabled it's also possible to open the link by just clicking on the value (click-action).

Note: The extensions currently won't parse invalid links into valid ones!

🖱 Click-Action

Displays and disabled interfaces (== readonly) support a custom click-action. This can be one of:

default action (does nothing custom)
Copy-action (copied the value)
Link-action (openes the link in a new tab)

⚙ Settings

Icon position

The icons can be placed before or after the content
The setting can be set for the interface and display, as well as the copy and link button indipendently
Example in the screenshots below

Custom prefix

You can set custom prefixes for copy-/ and link-actions.
Prefixes can be entered manually or use a defined variable (Project URL setting)
The setting can be set for the interface and display, as well as the copy and link button indipendently
Example in the screenshots below

Link target

Set the link-target to the same, or a new tab

Hide field value (display only)

Hides the field value for a button only mode
Mostly to be used in combinaiton with button labels

Button labels (display only)

Add custom labels to the copy-/ and link icons for the display
Mostly to be used in combinaiton with the "Hide field value" option for a button only mode

⚙️ Installation (npm)

npm i directus-extension-field-actions

pnpm i directus-extension-field-actions

⚙️ Installation (manually)

Download the app.js, api.js and package.json from the latest release
Create a folder named directus-extension-field-actions in your extension folder (e.g /extensions/directus-extension-field-actions) and a /dist folder inside.
Move the package.json to the created extension folder and the app.js and api.js into the /dist folder.
Restart directus

The result should look like this:

├── extensions
│   ├── directus-extension-field-actions
│   │   ├── dist
│   │   │   ├── app.js
│   │   │   ├── api.js
│   │   ├── package.json

🖼 Screenshots

↑ Copy values from table views directly by clicking on them or an icon (configurable)

↑ Copy field-values by clicking on it (only for readonly-fields and displays)

↑ Add link- and copy-to-clipboard buttons to each field

↑ Interfaces settings

↑ Displays settings

ywzhaiqi/directus-extension-field-actions