Panels ​

Panels are modular units of data visualization that exist within the Insights module. Each panel exists within a Dashboard and can be positioned and resized as needed.

Learn more about Panels.

The Panel Object ​

id uuid
Primary key of the panel.

dashboard many-to-one
Dashboard where this panel is visible. Many-to-one to dashboards.

name string
Name of the panel.

icon string
Material design icon for the panel.

color string
Accent color of the panel.

show_header boolean
Whether or not the header should be rendered for this panel.

note string
Description for the panel.

type string
The panel type used for this panel.

position_x integer
The X position on the workspace grid.

position_y integer
The Y position on the workspace grid.

width integer
Width of the panel in number of workspace dots.

height integer
Height of the panel in number of workspace dots.

options JSON
Arbitrary options for the panel. Differs per panel type.

date_created Date
When the panel was created

user_created many-to-one
User that created the panel. Many-to-one to users.

{
	"id": "22640672-eef0-4ee9-ab04-591f3afb2883",
	"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e2697",
	"name": "30-day sales",
	"icon": "paid",
	"color": "#6B8068",
	"show_header": true,
	"note": "Overview of the sales numbers in the last 30 days",
	"type": "time-series",
	"position_x": 1,
	"position_y": 1,
	"width": 8,
	"height": 6,
	"options": {},
	"date_created": "2023-01-05T19:05:51.884Z",
	"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}

List Panels ​

List all panels that exist in Directus.

Query Parameters ​

Supports all global query parameters.

Returns ​

An array of up to limit panel objects. If no items are available, data will be an empty array.

REST API ​

GET /panels
SEARCH /panels

Learn more about SEARCH ->

GraphQL ​

POST /graphql/system

type Query {
	panels: [directus_panels]
}

Example ​

query {
	panels {
		id
		name
	}
}

Retrieve a Panel ​

List an existing panel by primary key.

Query Parameters ​

Supports all global query parameters.

Returns ​

Returns the requested panel object.

REST API ​

GET /panels/:id

Example ​

GET /panels/2fc325fb-299b-4d20-a9e7-a34349dee8b2

GraphQL ​

POST /graphql/system

type Query {
	panels_by_id(id: ID!): directus_panels
}

Example ​

query {
	panels_by_id(id: "2fc325fb-299b-4d20-a9e7-a34349dee8b2") {
		id
		name
	}
}

Create a Panel ​

Create a new panel.

Query Parameters ​

Supports all global query parameters.

Request Body ​

A partial panel object.

Returns ​

Returns the panel object for the created panel.

REST API ​

POST /panels

Example ​

// POST /panels

{
	"name": "My Panel",
	"icon": "architecture"
}

GraphQL ​

POST /graphql/system

type Mutation {
	create_panels_item(data: create_directus_panels_input!): directus_panels
}

Example ​

mutation {
	create_panels_item(data: { name: "My Panel", icon: "panels" }) {
		id
		name
	}
}

Create Multiple Panels ​

Create multiple new panels.

Query Parameters ​

Supports all global query parameters.

Request Body ​

An array of partial panel objects.

Returns ​

Returns the panel object for the created panel.

REST API ​

POST /panels

Example ​

// POST /panels

[
	{
		"name": "My Panel",
		"icon": "architecture"
	},
	{
		"name": "Another Panel",
		"icon": "person"
	}
]

GraphQL ​

POST /graphql/system

type Mutation {
	create_panels_items(data: [create_directus_panels_input!]!): [directus_panels]
}

Example ​

mutation {
	create_panels_items(
		data: [
			{
				"name": "My Panel",
				"icon": "architecture"
			},
			{
				"name": "Another Panel",
				"icon": "person"
			}
		]
	) {
		id
		name
	}
}

Update a Panel ​

Update an existing panel.

Query Parameters ​

Supports all global query parameters.

Request Body ​

A partial panel object.

Returns ​

Returns the panel object for the updated panel.

REST API ​

PATCH /panels/:id

Example ​

// PATCH /panels/2fc325fb-299b-4d20-a9e7-a34349dee8b2

{
	"name": "My Updated Panel"
}

GraphQL ​

POST /graphql/system

type Mutation {
	update_panels_item(id: ID!, data: update_directus_panels_input): directus_panels
}

Example ​

mutation {
	update_panels_item(id: "2fc325fb-299b-4d20-a9e7-a34349dee8b2", data: { name: "My Updated Panel" }) {
		id
		name
	}
}

Update Multiple Panels ​

Update multiple existing panels.

Query Parameters ​

Supports all global query parameters.

Request Body ​

keys Required
Array of primary keys of the panels you'd like to update.

data Required
Any of the panel's properties.

Returns ​

Returns the panel objects for the updated panels.

REST API ​

PATCH /panels

Example ​

// PATCH /panels

{
	"keys": ["3f2facab-7f05-4ee8-a7a3-d8b9c634a1fc", "7259bfa8-3786-45c6-8c08-cc688e7ba229"],
	"data": {
		"color": "#6644FF"
	}
}

GraphQL ​

POST /graphql/system

type Mutation {
	update_panels_items(ids: [ID!]!, data: update_directus_panels_input): [directus_panels]
}

Example ​

mutation {
	update_panels_items(
		ids: ["3f2facab-7f05-4ee8-a7a3-d8b9c634a1fc", "7259bfa8-3786-45c6-8c08-cc688e7ba229"]
		data: { "color": "#6644FF" }
	) {
		id
		name
	}
}

Delete a Panel ​

Delete an existing panel.

Returns ​

Empty body.

REST API ​

DELETE /panels/:id

Example ​

DELETE /panels/12204ee2-2c82-4d9a-b044-2f4842a11dba

GraphQL ​

POST /graphql/system

type Mutation {
	delete_panels_item(id: ID!): delete_one
}

Example ​

mutation {
	delete_panels_item(id: "12204ee2-2c82-4d9a-b044-2f4842a11dba") {
		id
	}
}

Delete Multiple Panels ​

Delete multiple existing panels.

Request Body ​

An array of panels primary keys

Returns ​

Empty body.

REST API ​

DELETE /panels

Example ​

// DELETE /panels
["25821236-8c2a-4f89-8fdc-c7d01f35877d", "02b9486e-4273-4fd5-b94b-e18fd923d1ed", "7d62f1e9-a83f-407b-84f8-1c184f014501"]

GraphQL ​

POST /graphql/system

type Mutation {
	delete_panels_items(ids: [ID!]!): delete_many
}

Example ​

mutation {
	delete_panels_items(
		ids: [
			"25821236-8c2a-4f89-8fdc-c7d01f35877d"
			"02b9486e-4273-4fd5-b94b-e18fd923d1ed"
			"7d62f1e9-a83f-407b-84f8-1c184f014501"
		]
	) {
		ids
	}
}