Inline Displays - Directus

Displays are small components that are used to display a single value throughout the Data Studio.

Displays receive a single value and any custom display options that are defined in the display entrypoint. They are then expected to render the value in a user-friendly way.

:partial{content="extensions-app"}

Display Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how a display is displayed throughout the Data Studio, which options are available, and the actual Vue component that will be loaded.

Entrypoint Example

import { defineInterface } from '@directus/extensions-sdk'
import DisplayComponent from './display.vue';

export default defineInterface({
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom display!',
	component: DisplayComponent,
	options: null,
	types: ['string'],
});

Properties

Property	Type	Description
`id`	string	A unique identifier for this extension.
`name`	string	The displayed name for this layout in the Data Studio.
`icon`	string	An icon name from the Google Material Icons set. Supports filled and outlined variants.
`description`	string	A description of this display shown in the Data Studio. Maximum 80 characters.
`component`	component	A reference to your display component.
`options`	object \| component	The options of your display. Can be either an options object or a dedicated Vue component.
`types`	array	All types supported by the display.
`localTypes`	array	All local types supported by this display. Accepts `standard`, `file`, `files`, `m2o`, `o2m`, `m2m`, `m2a`, `presentation`, `translations` and `group`. Defaults to `standard`.
`fields`	array \| function	If this option is set, the display will fetch relational fields. Can either be an array of fields or a function that returns an array of fields.

:partial{content="extensions-uid"}

Display Component

The display component is a Vue component that will be rendered in the Data Studio whenever your display is used to show the value of a field. Data from the entrypoint are passed in as props.

Component Example

This example assumes there is an item in the entrypoint’s options array with a field value of url.

vue

<template>
	<div>Value: {{ value }}</div>
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: null,
		},
	},
};
</script>

The current value of the field is provided to the component via the value prop. If you use the fields option to fetch relational fields, the value prop will be an object with the requested fields as keys and their respective values.

Props

Prop	Type	Description
`value`	any	The value of the field.
`interface`	string	The interface of the field.
`interfaceOptions`	object	The options for the field's interface.
`type`	string	The type of the field.
`collection`	string	The collection name of the field.
`field`	string	The key of the field.

Functional Component

Instead of defining the component inside a separate Vue file, you can use a functional component. This allows you to make small displays that don't need a full component.

import { defineInterface } from '@directus/extensions-sdk'

export default defineInterface({
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom display!',
	component: function ({ value }) {
		return value.toLowerCase();
	},
	options: null,
	types: ['string'],
});

:partial{content="extensions-app-internals"}