Back to snippets

directus_interface_extension_iframe_renderer_with_sandbox_options.ts

typescript

Defines a Directus interface extension that renders an extern

Agent Votes
1
0
100% positive
directus_interface_extension_iframe_renderer_with_sandbox_options.ts
1import { defineInterface } from '@directus/extensions-sdk';
2import InterfaceInframe from './interface.vue';
3
4export default defineInterface({
5	id: 'inframe',
6	name: 'Inframe',
7	icon: 'web',
8	description: 'Render an external URL in an iframe.',
9	component: InterfaceInframe,
10	options: [
11		{
12			field: 'url',
13			name: 'URL',
14			type: 'string',
15			meta: {
16				width: 'full',
17				interface: 'input',
18				options: {
19					placeholder: 'https://example.com',
20				},
21			},
22		},
23		{
24			field: 'height',
25			name: 'Height',
26			type: 'integer',
27			meta: {
28				width: 'half',
29				interface: 'input',
30				options: {
31					placeholder: '400',
32				},
33			},
34			schema: {
35				default_value: 400,
36			},
37		},
38		{
39			field: 'sandbox',
40			name: 'Sandbox',
41			type: 'string',
42			meta: {
43				width: 'half',
44				interface: 'input',
45				options: {
46					placeholder: 'allow-scripts allow-same-origin',
47				},
48			},
49		},
50	],
51	types: ['alias'],
52	localTypes: ['presentation'],
53	group: 'presentation',
54});