Panels
List panels
List all panels that exist in Directus.
Query Parameters
Control what fields are being returned in the object.
A limit on the number of objects that are returned.
How many items to skip when fetching data.
What metadata to return in the response.
How to sort the returned items. sort is a CSV of fields used to sort the fetched items. Sorting defaults to ascending (ASC) order but a minus sign (-) can be used to reverse this to descending (DESC) order. Fields are prioritized by their order in the CSV. You can also use a ? to sort randomly.
Select items in collection by given conditions.
Filter by items that contain the given search query in one of their fields.
Cursor for use in pagination. Often used in combination with limit.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
Description for the panel.
When the panel was created
User that created the panel. Many-to-one to users.
Returns the total item count of the collection you're querying.
Returns the item count of the collection you're querying, taking the current filter/search parameters into account.
GET /panels
import { createDirectus, rest, readPanels } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(readPanels(query_object));
type Query {
panels: [directus_panels]
}
{
"data": [
{
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
],
"meta": {}
}
Create Multiple panels
Create multiple new panels.
Query Parameters
Control what fields are being returned in the object.
A limit on the number of objects that are returned.
What metadata to return in the response.
How many items to skip when fetching data.
How to sort the returned items. sort is a CSV of fields used to sort the fetched items. Sorting defaults to ascending (ASC) order but a minus sign (-) can be used to reverse this to descending (DESC) order. Fields are prioritized by their order in the CSV. You can also use a ? to sort randomly.
Select items in collection by given conditions.
Filter by items that contain the given search query in one of their fields.
Request Body
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
Description for the panel.
When the panel was created
User that created the panel. Many-to-one to users.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
Description for the panel.
When the panel was created
User that created the panel. Many-to-one to users.
Returns the total item count of the collection you're querying.
Returns the item count of the collection you're querying, taking the current filter/search parameters into account.
POST /panels
import { createDirectus, rest, createPanel } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(createPanels(panel_object_array));
type Mutation {
create_panels_items(data: [create_directus_panels_input!]!): [directus_panels]
}
{
"data": [
{
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
],
"meta": {}
}
Delete Multiple panels
Delete multiple existing panels.
Responses
DELETE /panels
import { createDirectus, rest, deletePanels } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(deletePanels(panel_id_array));
type Mutation {
delete_panels_items(ids: [ID!]!): delete_many
}
Update Multiple panels
Update multiple panels at the same time.
Query Parameters
Control what fields are being returned in the object.
A limit on the number of objects that are returned.
What metadata to return in the response.
How many items to skip when fetching data.
How to sort the returned items. sort is a CSV of fields used to sort the fetched items. Sorting defaults to ascending (ASC) order but a minus sign (-) can be used to reverse this to descending (DESC) order. Fields are prioritized by their order in the CSV. You can also use a ? to sort randomly.
Select items in collection by given conditions.
Filter by items that contain the given search query in one of their fields.
Request Body
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
Description for the panel.
When the panel was created
User that created the panel. Many-to-one to users.
Returns the total item count of the collection you're querying.
Returns the item count of the collection you're querying, taking the current filter/search parameters into account.
PATCH /panels
import { createDirectus, rest, updatePanels } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(updatePanels(panel_id_array, partial_panel_object));
type Mutation {
update_panels_items(ids: [ID!]!, data: update_directus_panels_input): [directus_panels]
}
{
"data": [
{
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
],
"meta": {}
}
Create a panel
Create a new panel.
Query Parameters
Control what fields are being returned in the object.
What metadata to return in the response.
Request Body
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
POST /panels
import { createDirectus, rest, createPanel } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(createpanel(panel_object));
type Mutation {
create_panels_item(data: create_directus_panels_input!): directus_panels
}
{
"data": {
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
}
Retrieve a panel
List an existing panel by primary key.
Query Parameters
Unique identifier of the panel.
Control what fields are being returned in the object.
What metadata to return in the response.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
GET /panels/{id}
import { createDirectus, rest, readPanel } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(readPanel(panel_id, query_object));
type Query {
panels_by_id(id: ID!): directus_panels
}
{
"data": {
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
}
Delete an panel
Delete an existing panel.
Query Parameters
Unique identifier of the panel.
Responses
DELETE /panels/{id}
import { createDirectus, rest, deletePanel } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(deletePanel(panel_id));
type Mutation {
delete_panels_item(id: ID!): delete_one
}
Update a panel
Update an existing panel.
Query Parameters
Unique identifier of the panel.
Control what fields are being returned in the object.
What metadata to return in the response.
Request Body
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
Responses
Primary key of the panel.
Dashboard where this panel is visible. Many-to-one to dashboards.
Name of the panel.
Material design icon for the panel.
Accent color of the panel.
Whether or not the header should be rendered for this panel.
Description for the panel.
The panel type used for this panel.
The X position on the workspace grid.
The Y position on the workspace grid.
Width of the panel in number of workspace dots.
Height of the panel in number of workspace dots.
When the panel was created
User that created the panel. Many-to-one to users.
PATCH /panels/{id}
import { createDirectus, rest, updatePanel } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(updatePanel(panel_id, partial_panel_object));
type Mutation {
update_panels_item(id: ID!, data: update_directus_panels_input): directus_panels
}
{
"data": {
"id": "22640672-eef0-4ee9-ab04-591f3afb288",
"dashboard": "a79bd1b2-beb2-49fc-8a26-0b3eec0e269",
"name": "30-day sales",
"icon": "paid",
"color": null,
"show_header": true,
"note": "Overview of the sales numbers in the last 30 day",
"type": "time-series",
"position_x": 1,
"position_y": 1,
"width": 1,
"height": 1,
"options": {},
"date_created": "2023-01-05T19:05:51.884Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473"
}
}