Files
directus/docs/guides/collections.md
Nicola Krumschmidt 1961dc188b Port the app to Vue 3 (#5339)
* Fix linting errors

* Fix remaining catch all routes

* Fix directive registration regression

* Replace $router global with composition function

* Fix v-bind overwrite order in nested-draggable

* Migrate vuedraggable

* Fix building with empty translation files

* Add comment regarding array equality check

* Fix markdown-it plugins import

* Fix newly introduced wrong store usage

* Fix v-button-group model

* Fix v-fancy-select model

* Fix v-field-template model

* Fix v-input model

* Fix v-item-group model

* Fix v-menu model

* Fix v-select model

* Fix v-tabs model

* Fix v-tabs-items model

* Fix v-textarea model

* Fix v-checkbox model

* Fix v-dialog model

* Fix v-drawer model

* Fix v-form model

* Fix v-list model

* Fix v-table model

* Fix v-detail model

* Fix v-radio model

* Fix v-switch model

* Fix files-navigation model

* Fix replace-file model

* Fix bookmark-add model

* Fix bookmark-edit model

* Fix drawer-batch model

* Fix drawer-item model

* Fix file-lightbox model

* Fix image-editor model

* Fix notifications-preview model

* Fix users-invite model

* Lowercase editor component name

* Fix collections-filter model

* Fix filter-input model

* Fix filter-sidebar-detail model

* Fix folder-picker model

* Fix interface-checkboxes model

* Fix interface-code model

* Fix interface-icon model

* Fix interface-repeater model

* Fix refresh-sidebar-detail model

* Fix search-input model

* Fix interface/display component option v-model usage

* Replace calling listener through $attrs with $emit and add emits option

* Add comment regarding useCustomSelection emits

* Fix context menu activation

* Fix collectionsStore access

* Fix popperjs

* Hotfix useGroupable

* Fix notifications-preview old prop name

* Fix module bar tooltip translation

* Fix useSync type signature

* Fix update:layoutOptions emit name

* Fix usePermissions missing imports regression

* Revert changes to docs vuepress instance

* Fix module-relative-resolve vite plugin when serving

* Fix docs

* Fix refresh on first load

* Fix creating new collection

* Fix loading of collection route

* Fix v-dialog/v-menu appear transition

* Access props directly

* Fix v-table clickable

* Fix v-drawer cancelable

* Fix v-icon clickable

* Fix v-input clickable

* Fix v-list-group clickable

* Fix v-list-item clickable

* Fix v-overlay clickable

* Fix header-bar primary button

* Fix v-table item.* slot

* Fix vue warning regarding exposed variables starting with _ or $

* Fix usePermissions

* Add package-lock.json

* Fix v-form unset regression

* Fix vue shims

* Fix useCustomSelection emit

* Make extensions arrays shallow

* Move teleport targets out of the vue app

* Fix v-field-select model

* Fix v-slider model

* Fix v-pagination model

* Fix card model

* Fix v-select item-value prop usage

* Fix layout-sidebar-detail model

* Fix form-field model

* Fix form-field-menu model

* Fix form-field-interface model

* Fix v-form model

* Use kebab-case for modelValue

* Update package-lock.json

* Add missing dependency

* Replace $t with i18n composable

* Replace remaining usages of $t

* Replace $te with i18n composable

* Replace $n with i18n composable

* Disable global injection in vue-i18n

* Replace i18n.global.t usage where composable is already imported

* Replace remaining i18n.global.t usage with composable

* Replace remaining i18n.global usages with composable

* Fix uploadFile emitter regression

* Remove inheritAttrs: false from file-info-sidebar-detail

* Hotfix v-input

* Update .eslintrc.js

* Fix use-preview

* Fix eslint issues

* Remove unused imports

* Fix extension getter type

* Refactor layout structure and fix tabular layout

* Fix build

* Fix cards layout

* Hotfix vuedraggable

* Dev is true again

* Register export-sidebar-detail globally

* Deconstruct layout state

* Fix calendar layout

* Fix cards/calendar layouts

* Fix layout options when switching layout

* Replace marked usage with md util

* Use useLayout everywhere

* Fix type issue

* Fix codemirror dynamic imports

* Fix data-fns dynamic import

* Fix useLayout selection

* Fix v-avatar scoped styling

* Remove unused v-button-group component

* Remove v-deep from v-card-actions

* Replace v-deep in v-dialog

* Use correct pseudoclasses for vue3

* Fix v-deep in v-field-template

* Replace v-deep in v-list-item-content

* Replace v-deep in v-list-item

* v-deep in v-list

* v-deep in v-notice

* Replace breakpoint mixin

* Replace v-deep in v-button

* Enforce empty line before block

* v-deep in v-pagination

* No white lines on the inner brackets of a block please

* Replace v-deep in v-select

* Fix stylelint rule

* Replace v-deep in v-table

* Replace v-deep in v-tabs

* Replace v-deep in rich text input

* Replace v-deep

* Replace v-deep elsewhere

* Needs more stylelint tweaks, but v-deep is done

* Fix translations interface

* Fix date layout

* Fix npm install

* Fix router catch all routes

* Fix layout options

* Remove call to next in router guards

* Remove vue router in-component guards

* Refactor module route registration

* Fix collections module navigation

* Fix settings module navigation

* Fix router-passthrough in devtools

* Refactor docs export and docs route registration

* Import docs routes using exported function

* Remove moduleRelativeResolve vite hack

* Re-add dev scripts

* Fix deprecated hljs usage

* Use activateContextMenu without parens

* Re-add readme/license/editorconfig

* Fix groupable

* Fix initial docs navigation

* Move global app css to app component

* Fix collection navigation icon color

* Fix field setup style

* Fix divider icon style

* Fix optional v-input slots

* Use $slots direct property access

* Fix docs font style

* Fix docs v-deep

* Fix docs add missing styles

* Remove docs style margin

* Fix save options color

* Fix nested v-slotted usage

* Fix v-button exact prop

* Fix v-list-item exact prop

* Fix package-lock.json

* Improve useSync type

* Fix route type error

* Fix bookmark router links

* Add redirect to route with bookmark

* Fix files module folder route

* Fix users module role route

* Add redirect routes to files and roles sub-routes

* Fix users module role active state

* Replace routerPassthrough function with object

* Nest file routes

* Improve module bar hidden check

* Remove slash from module router link

* Fix files and folder navigation

* Revert users route nesting

* Fix buttons in list

* Don't make nav item mandatory in left sidebar

* Fix infinite loop in box open

* Fix interactivity in v-list items

* Fix docs menu jumps

* Fix right click positioning

* Fix missing translations

* Fix close/open alignment of color interface

* Fix code editor interfaces

* Fix relation access in cards layout

* Remove template ref from collection-or-item

* Revert jest-environment-jsdom package update

* Fix package-lock.json

* Resolve vue3 TODO comments

* Fix layout presets

* Remove reactivity fix

* Remove Todo3 comment

* Fix icon color override

* Add error message to useLayoutState

* Add composable to properly transition dialog routes

* Fix new collection transition

* Fix add new role transition

* Fix add new file transition

* Fix activity item transition

* Fix error type in useItems

* Fix collection error dialog transition

* Fix field detail transition

* Fix permissions detail transition

* Fix store getters types

* Update package-lock

* Fix preview icon color

* Fix reference to selections

* Fix linter warnings

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
2021-06-08 15:59:55 -04:00

6.5 KiB

Collections

Collections are containers for specific groupings of Items. Each collection represents a table in your database. Learn more about Collections.

Creating a Collection

  1. Navigate to Settings > Data Model
  2. Click the Create Collection action button in the header
  3. Enter a unique Collection Name, keeping in mind that this is entered as a key that determines the database table name, and is then presented in the App using the internal Title Formatter.
  4. Optional: Configure the collection's Primary Key name and type.
    • Auto-Incremented Integer
    • Generated UUID
    • Manually Entered String
  5. Optional: Enable and rename any desired System Fields.
    • Status
    • Sort
    • Created On
    • Created By
    • Updated On
    • Updated By
  6. Click the Finish Setup button

::: danger Immutable Keys

The collection name, primary key name/type, and system field names can not be modified after the collection is created.

:::

::: tip Database Tables

Keep in mind that a Directus Collection is just a database table. Therefore you can import or create a table directly in the database, and it will automatically appear within Directus. The first time you manage that table, a directus_collections record will be created with default values.

:::

Configuring a Collection

  1. Navigate to Settings > Data Model > [Collection Name]
  2. Configure the following settings:
    • Collection Name — This is the key for the collection. It can not be modified, but you can override it with Translations (see field below).
    • Icon — The icon used throughout the App when referencing this collection
    • Note — A helpful note that explains the collection's purpose
    • Display Template — A Field Template that creates dynamic titles for the collection's items
    • Hidden — Toggles if the collection should be globally hidden. Keep in mind that Admin roles can always see all collections.
    • Singleton — For collections that will only contain a single item (eg: an "About Us" form), the Collection Detail will be bypassed, and users are taken directly to the Item Detail page.
    • Translation — Allows translating the collection name into different languages. These Schema Translations are important for multilingual projects. You can also "translate" a collection name into the default language — helpful for renaming technical table names.
  3. Create and configure any fields within this Collection.
  4. Optional: Configure the Archive and Sort options below.

Archive

The archive feature allows you to enable the collection with a custom soft-delete option. Soft-delete allows users to remove items from the App, but maintains the actual database record for easy recovery.

  • Archive Field — The field that holds the archive value
  • Archive App Filter — Allows users to view archived items
  • Archive Value — The value saved in the Archive Field when archived
  • Unarchive Value — The value saved in the Archive Field when unarchived

::: warning API Responses

Items that have been archived are still returned normally via the API. It is up to you to filter them out as needed.

:::

::: tip Automatic Setup

When creating a new Collection, you have the option of creating an optional "Status" field. If you choose to include this field, the collection's archive settings will automatically be configured for you.

:::

Sort

The sort feature enables manual drag-and-drop item reordering within the Directus App. This is typically shown on the Collection Detail page/modal, and can also be used for sorting items within a Junction Table.

To configure manual sorting for a collection:

  1. Navigate to Settings > Data Model > [Collection Name]
  2. Create a field with the Integer type
    • Optional: Set the field to be Hidden
  3. Select the field you just created in the Sort Field dropdown

::: tip Automatic Setup

When creating a new Collection, you have the option of creating an optional "Sort" field. If you choose to include this field, the collection's sort settings will automatically be configured for you.

:::

::: tip Interface Sorting

To configure manual sorting within an Interface (eg: M2M, O2M, or M2A), configure as above, but also set the Sort Field on the field's Relationship pane.

:::

Renaming a Collection

While you can not change the Key of a collection via Directus (as of now), you can change its Name and translations.

  1. Navigate to Settings > Data Model > [Collection Name]
  2. Click the Add New button under Collection Name Translations
  3. Choose the desired Language (your primary language for "renaming")
  4. Enter a Translation
  5. Click the Save button

::: tip Special Casing

If you are trying to update the specific casing (uppercase/lowercase) for a word (eg: Dna to DNA) you will want to add the edge-case to the Format Title package. If you feel the case passes our 80/20 rule you should submit a Pull Request to the codebase, otherwise you can update this in your instance.

:::

Deleting a Collection

  1. Navigate to Settings > Data Model > [Collection Name]
  2. Click the red Delete Collection action button in the header
  3. Confirm this decision by clicking Delete in the dialog

::: danger Irreversible Change

This action is permanent and can not be undone. Please proceed with caution.

:::

Adjusting a Collection Layout

  1. Navigate to Collections > [Collection Name]
  2. Click "Layout Options" in the Page Sidebar
  3. Configure the Layout Options as desired

::: tip User Preferences

Any changes made to the Collection Layout Options, page filters, search queries, and advanced filters, are instantly saved to your user preferences. This means that your experience will be the same when logging later, even if using a different device.

:::