mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
* items semi complete
* updated items page to use snippet toggler and migrated endpoint docs to use it
* updated files page to use snippet toggler and migrated REST and GraphQL endpoint docs to it
* updated activity page to use snippet toggler and migrated REST and GraphQL endpoint doc to it
* updated collections page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* updated dashboards page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated extensions page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated fields page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated flows page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated folders page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated notifications page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated operations page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated panels page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated permissions page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated presets page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated relations page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated revisions page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated roles page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Made headlines consistant with the rest of the doc pages
* Updated server page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated settings page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated shares page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated translations page to use snippet togglers and migrated REST endpoint docs to them
* Updated users page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated utilities page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated webhooks page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated authentication page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* Updated Global Parameters page to use snippet togglers where there are adjacent REST and GraphQL Examples
* Added SDK code snippets to items page and made generic variables consistant
* Added SDK code snippets to files page and made generic variables consistant
* Few lang changes for files page
* Added SDK code snippets to activity page and made generic variables consistant
* Added SDK code snippets to collections page and made generic variables consistant
* Added SDK code snippets to dashboards page and made generic variables consistant
* removed query word from query parameter objects
* Added SDK code snippets to fields page and made generic variables consistant
* SnippetToggler border
* Used dynamic border color for snippettoggler heading
* Spacing top and bottom of snippet toggler in docs
* Removed extra HRs
* Remove manual TOC in query reference
* Small code styling change in items page
* Updated users page to use snippet togglers and migrated REST and GraphQL endpoint docs to them
* dashboards fixed up property names
* Small copy update on extensions page
* Updated keys in delete mult notifications REST
* Updated keys in operations
* Update keys in panel delete many
* Update keys in permissions
* Added quotes around generic example ID strings
* Added code formatting to final example in share public info
* Format files
* Refined sidebar
* Insert newline before ending template tags
* Fixed extra closing tags, causing an error, un users ref
* Text Formatting Users
* Put GQL related notes inside toggler
* Added SDK code snippets to flows page and made generic variables consistant
* Added SDK code snippets to folder page and made generic variables consistant
* fixing whitepsace for flows and folders page
* Consistent newlines in SnippetToggler usages
* Run prettier
* Fix 'alwaysDark' definition
* Home page snippet toggler style fixes
* Fix snippet toggler lang hover color in light mode
* Introduce different code theme for light mode
* Added SDK code snippets to notifications page and made generic variables consistant
* Switch to 'material-theme-lighter'
* Format file
* Fix tip
* Fix tip in sdk ref
* Consistent spacing for custom containers
* Added SDK code snippets to operations page and made generic variables consistant
* Lint & format code blocks
* Lint & format operations
* Added SDK code snippets to panels page and made generic variables consistant
* Added SDK code snippets to permissions page and made generic variables consistant
* Added SDK code snippets to presets page and made generic variables consistant
* Added SDK code snippets to relations page and made generic variables consistant
* Added SDK code snippets to revisions page and made generic variables consistant
* Added SDK code snippets to roles page and made generic variables consistant
* Added SDK code snippets to server page and made generic variables consistant
* Added SDK code snippets to settings page and made generic variables consistant
* app_url -> directus_project_url
* Omitted auth details in delete multiple files
* Added quotes to values in roles
* Upload a file snippets
* Pluralization for upload/import files
* More files functions typos
* Added SDK code snippets to shares page (still missing createShare(s) as endpoint not functioning currently) and made generic variables consistant
* Added SDK code snippets to translations page (missing delete endponts because not working) and made generic variables consistant
* Added SDK code snippets to users page and made generic variables consistant
* Added SDK code snippets to webhooks page and made generic variables consistant
* Added SDK code snippets to utilites page (except cleaning cache, will be tested and added in later commit) and made generic variables consistant
* Added SDK code snippets to auth page (not login, refresh, and logout though due to errors)
* Added SDK code snippets for utilsExport and clearCache
* added github username be7DOTis to contributors
* Omit auth commands in updateComment
* utilsImport
* rename app_url generic value
* changed instances of updated*operation* to update*Operation*
* missed some 'updated' changse
* Added SDK Snippets to Query Parameters page
* Add section on file security
* added create(s)Shares SDK snippet to shares page
* added console.log to create snippets
* Added delete(s)Webhook SDK snippet to webhooks page
* Added SDK snippets to extensions page
* Added create/updateSingleton section to items page
* Links in files security
* Added SDK Snippets to Schema page
* Added GQL Generic examples to snippet togglers and removed snippet toggler from Login Using SSO Providers
* Added create(s)Presets SDK Snippets to presets page
* replaced fields query in generics snippets for a more generic
* replaced fields query in generics snippets for a more generic
* Use storage value only if valid choice
* Sync snippet togglers across page
* Update docs/reference/system/activity.md
* Update docs/reference/system/activity.md
* Update docs/reference/system/extensions.md
* Update docs/reference/system/revisions.md
* Update docs/reference/system/settings.md
* Update docs/reference/system/revisions.md
* Update docs/reference/system/settings.md
* Update docs/reference/system/activity.md
* Update docs/reference/system/roles.md
* Update docs/reference/system/roles.md
* Update docs/reference/system/roles.md
* Update docs/reference/system/roles.md
* Update docs/reference/system/schema.md
* Update docs/reference/system/server.md
* Update docs/reference/system/shares.md
* Replace all directus_project_url placeholders
* Revert "Sync snippet togglers across page"
This reverts commit 8b36f0d778.
* Update docs/reference/system/shares.md
* Update docs/reference/system/webhooks.md
* Clarify singleton section
* Consistent newlines between SnippetToggler templates
* Format files
* Remove console.log(result) statements from snippet
* Add examples for shares & users
Co-authored-by: Brainslug <tim@brainslug.nl>
* Fix hash GraphQL example
* Clarify update singleton section
* Add auth examples
Co-authored-by: Brainslug <tim@brainslug.nl>
* Final run on consistent newlines between SnippetToggler
* Switch to github themes
* The "Last One"
Co-authored-by: Brainslug <tim@brainslug.nl>
* The "Big One"
* Fix dead links
---------
Co-authored-by: Bevis Halsey-Perry <hi@be7.is>
Co-authored-by: Kevin Lewis <kvn@lws.io>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Brainslug <br41nslug@users.noreply.github.com>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
Co-authored-by: Brainslug <tim@brainslug.nl>
188 lines
9.6 KiB
Markdown
188 lines
9.6 KiB
Markdown
# Fields
|
|
|
|
> Fields are database columns. Fields also enable you to manage the backend logic _(such as conditional display logic,
|
|
> input verification rules, etc.)_ and frontend design used to display its data _(e.g., whether data will display in a
|
|
> table or on a map)_.
|
|
|
|
## Overview
|
|
|
|
<video title="Fields Overview" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/data-model-20220805/fields-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
To access a collection's fields, navigate to **Settings > Data Model > [Collection]**. From here, you can click a field
|
|
to access its **Configuration Drawer** and make advanced configurations. You also have the following controls for each
|
|
field.
|
|
|
|
**Fields and Layout** — Create, view, and configure a collection's fields as well as adjust how they are displayed and
|
|
ordered on the [Item Details Page](/user-guide/content-module/content/collections#item-page). This section also provides
|
|
access to the **Field Context Menu** and **Field Configuration Drawer**, described below.
|
|
|
|
**Field Context Menu <span mi icon>more_vert</span>** — Contains the following controls:
|
|
|
|
- [<span mi icon>edit</span> Edit Field](#configure-a-field) — Opens the **Field Configuration Drawer**.
|
|
- [<span mi icon>content_copy</span> Duplicate Field](#duplicate-a-field) — Duplicates a field along with all of its
|
|
configuration options.
|
|
- [<span mi icon>visibility_off</span> Hide Field on Detail](#toggle-field-visibility-for-admins) — Toggle field
|
|
visibility on the Item Detail Page for Admin Users.
|
|
- [Width](#adjust-field-width) — Fields have three different width options:
|
|
- <span mi icon>border_vertical</span> Half Width — The field input is shown at half the form width.
|
|
- <span mi icon>border_right</span> Full Width — The default. The field input is shown at the full form width.
|
|
- <span mi icon>aspect_ratio</span> Fill Width — The field input is shown filling the full width of the page area.
|
|
|
|
**The Field Configuration Drawer** — Provides all [field configuration](#configure-a-field) options.
|
|
|
|
## Create a Field (Standard)
|
|
|
|
<video title="Create a Field (Standard)" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/create-a-field-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
To make field configuration as intuitive and easy as possible, a template wizard is provided so that you can create
|
|
fields pre-configured for common use-cases. When you create a field this way, you will still have full power to
|
|
[configure the field](#configure-a-field) as desired.
|
|
|
|
1. Navigate to **Settings > Data Model > [Collection]**.
|
|
2. Under **Fields & Layout**, click the **Create Field** button.\
|
|
A side drawer will open, with various pre-configured Interfaces to choose from.
|
|
3. Click to select the desired field and a basic configuration menu will open.
|
|
4. Add a **Field Key**, _which is also used as the default field name_.\
|
|
Optional: Configure the other field details as desired.\
|
|
Optional: Click [Continue in Advanced Field Creation Mode](#create-a-field-advanced).
|
|
5. When you are ready, click **Save** to confirm.
|
|
|
|
## Create a Field (Advanced)
|
|
|
|
<video title="Create a Field (Advanced)" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/create-a-field-advanced-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
This field creation method opens the **Field Configuration Drawer** so you can customize every field detail from the
|
|
start. To create a field in advanced mode, follow these steps.
|
|
|
|
1. Navigate to **Settings > Data Model > [Collection Name]**.
|
|
2. Under **Fields & Layout**, click the **Create Field in Advanced Mode** button.\
|
|
A dropdown menu will appear with various field types to choose from.
|
|
3. Click to choose the field type and the **Field Configuration Drawer** will open.
|
|
4. Configure your field as desired.
|
|
5. Click <span mi btn>check</span> to confirm.
|
|
|
|
::: tip Database Columns
|
|
|
|
Remember, a field is a database column. Therefore, you can create a column directly in the database and it will
|
|
automatically appear within Directus. You can then enhance the experience further by configuring it as desired.
|
|
|
|
:::
|
|
|
|
## Configure a Field
|
|
|
|
<video title="Configure a Field" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/configure-a-field-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
Fields are configured in the **Field Configuration Drawer**, which is composed of eight sections. These provide
|
|
extensive customization options, from the database column's details, to how it is displayed and interacted with, and
|
|
even custom input validation and conditional display logic. To configure a field, follow these steps.
|
|
|
|
1. Navigate to **Settings > Data Model > [Collection Name]**.
|
|
2. Under **Fields & Layout**, click the field you want to update.\
|
|
The **Field Configuration Drawer** will open.
|
|
3. Navigate to one of these sections and configure the field as desired:
|
|
- **Schema** — Defines the database column schema for the field.
|
|
- **Relationship** — Controls _and only appears when configuring relational_ field details.
|
|
- **Translations** — Controls _and only appears when configuring translation_ field details.
|
|
- **Field** — Sets details for the field input, which is displayed on the
|
|
[item page](/user-guide/content-module/content/items).
|
|
- **Interface** — Configures how you interact with the field's values.
|
|
- **Display** — Configures how field values are displayed in the Data Studio.
|
|
- **Validation** — Creates a filter to determine valid user input.
|
|
- **Conditions** — Alters the current field's setup based on the values of other fields.
|
|
4. Click <span mi btn>check</span> to confirm.
|
|
|
|
::: tip Fields in System Collections
|
|
|
|
While all out-of-the-box fields within system collections are locked from configuration or deletion, you are able to
|
|
create new fields within system collections.
|
|
|
|
:::
|
|
|
|
## Duplicate a Field
|
|
|
|
<video title="Duplicate a Field" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/duplicate-a-field-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
To duplicate a field, follow these steps.
|
|
|
|
1. Navigate to **Settings > Data Model > [Collection Name]**.
|
|
2. Click the <span mi icon>more_vert</span> icon for the field you want to duplicate.
|
|
3. Click the <span mi icon>content_copy</span> **Duplicate Field** option.
|
|
4. Choose the collection you'd like to create the field in and set the Field Name.
|
|
|
|
::: warning Relational and Primary Key Fields
|
|
|
|
Currently, it is not possible to duplicate relational fields or a collection's primary key.
|
|
|
|
:::
|
|
|
|
::: tip Duplicates Configurations Only
|
|
|
|
When you duplicate a field, all of its configuration settings will be copied as well. However, values stored within that
|
|
field will not be copied.
|
|
|
|
:::
|
|
|
|
## Toggle Field Visibility (for Admins)
|
|
|
|
<video title="Toggle Field Visibility (for Admins)" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/toggle-field-visibility-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
For users with any _non-admin_ role, a field's visibility can be adjusted via
|
|
[access permissions](/user-guide/user-management/users-roles-permissions). However, you may want to hide certain fields
|
|
for admins as well. This is handy if the field is distracting or has no need to be seen on the item details page.
|
|
|
|
## Adjust Field Width
|
|
|
|
<video title="Group and Sort Field" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/adjust-field-width-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
Adjusting the field width in **Fields and Layout** will change field width on the
|
|
[Item Detail Page](/user-guide/content-module/content#item-page). To adjust field width, follow these steps.
|
|
|
|
1. Click <span mi icon>more_vert</span> to open the field's context menu.
|
|
1. Choose one of the following:
|
|
- <span mi icon>border_vertical</span> **Half Width** — The field is shown at half the form width.
|
|
- <span mi icon>border_right</span> **Full Width** — The default. The field is shown at the full form width.
|
|
- <span mi icon>aspect_ratio</span> **Fill Width** — The field is shown filling the full width of the page area.
|
|
|
|
## Manually Sort Fields
|
|
|
|
<video title="Group and Sort Field" autoplay muted loop controls playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/manually-sort-fields-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
Adjusting the field order in **Fields and Layout** will change its order on the
|
|
[Item Page](/user-guide/content-module/content/collections#item-page). To manually sort fields, click
|
|
<span mi icon>drag_indicator</span> to drag and drop the field as desired.
|
|
|
|
## Delete a Field
|
|
|
|
<video autoplay muted loop controls title="" playsinline>
|
|
<source src="https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/delete-a-field-20220805A.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
To permanently delete a field and all its stored values, follow these steps.
|
|
|
|
1. Navigate to **Settings > Data Model > [Collection Name]**.
|
|
2. Click the <span mi icon>more_vert</span> icon for the field you want to delete.
|
|
3. Click the <span mi icon dngr>delete</span> **Delete Field** option.
|
|
4. Confirm this decision by clicking **Delete** in the dialog.
|
|
|
|
::: danger Irreversible Change
|
|
|
|
This action is permanent and cannot be undone. Please proceed with caution.
|
|
|
|
:::
|