User Guide — A Tour of Directus
The time has come. You have received your invite, or just finished setting up Directus yourself. You’re all set to get started on actually managing the most important thing of all; your data. In this article, we’ll take a non-technical tour of the Directus CMS interface.
Logging in
If you attempt to access Directus without being authenticated, you will be redirected to the login page. Once successfully logged in, you will be sent to the page you were trying to access — or to the last page you visited if you didn’t try to open a specific link directly.
Passwords
Directus securely encrypts your passwords, so no one — not even administrators — can see your actual password. Therefore, there’s no reason for anyone to ever ask you to “confirm your password” with them… ignore such requests. Since no one can remind you, if you forget your password you’ll need to reset it by entering your email address and clicking the forgot password link. Directus will send you an email with a link to reset it. Note: this email will expire after a short period of time.
Sign Out
It’s a good habit to log out of Directus when you’re not actively using it — especially on public computers/devices. The sign out button is located in the user menu, accessible when hovering over your avatar/name in the bottom-left corner of the screen. Directus will automatically log you out after you’ve been idle for a period of time.
General Interface
Navigation
The left sidebar is an easy way to access all your tables, extensions, and bookmarks. On smaller screens, this sidebar might be hidden and is accessible by clicking the “hamburger” menu in the header.
User Menu
Your name and avatar are visible in the bottom-left corner of Directus— hovering over this will open the user menu. The following are accessible from this menu:
- Admin Settings
Contains the general settings of Directus. This is where you would manage settings like permissions, project info, and modifying the database schema. - Help & Docs
Shows you general info about using the platform as well as how to use the API. - File Library
Shows all the files that have been uploaded to this Directus instance. Also allows you to update or alter them. - User Directory
Shows you all the users that have access to this Directus instance including the data they’ve decided to share with you. - Your Profile
Navigates to your profile edit page where you can update account info such as your password. - Sign Out
Signs you out of the platform
Breadcrumb
In the header is a set of links that show you the page you are on and any “parent” pages above it. Clicking on any of these breadcrumbs will take you to that page. On smaller screens, this collapses down to only show the current page.
Bookmarks
Bookmarking is an easy way to save often-used or highly customized pages for quick access. Clicking the bookmark icon to the right of the breadcrumb saves the current page with a custom name in the sidebar navigation. Bookmarks can be deleted by hovering over them and clicking the “X” icon that appears.
A bookmark saves not just the link to the current page, it also saves all view options, such as: item order, filters, and selected columns.
Item Listing
Clicking on a table in the left navigation sidebar brings you to a listing view that displays all items within the table. Several options are provided for filtering, sorting, reordering, bulk-editing, deleting, and updating item status. All view options are saved per user — so you can freely customize the view of each table to your liking.
Clicking an item within this listing brings you to the item edit page. The “+” button in the top right adds a new item.
Filtering
Use this input to quickly search all table items for simple text matches, or click the triangle on the right-side to show a more advanced filter menu. If multiple filters are added, only items that match all filters are shown. Clicking the “X” on the right-side will remove that filter.
Changing Item Status
First, start by selecting one or more items using the left-hand checkboxes. If the table has status enabled, you will now have a status dropdown available in the header.
Three common workflow options are included by default, but your administrators may have customized these:
- Published
- Draft
- Deleted (Soft)
Note: Depending on your configuration, tables may be setup to “hard-delete”. If this is the case, deleting items is permanent and should be done with care.
Sorting
Clicking column headers will sort items alphabetically by the value of that field. Clicking the column again will reverse the sort direction — clicking a third time will remove the sorting, reverting to the default order: date created. These changes are only visible to you and don’t affect the actual saved item order.
Reordering
While sorting simply changes the current view of the items, reordering actually saves the global order of each item.
If the table allows for sorting you will see drag-and-drop handles on the left-side of each item. To enable reordering, click the “double arrows” icon at the top-left of the list. Once enabled, you see all items sorted by their global order — which can be changed by dragging items up or down by their handles.
Batch Editing
If you select the multiple items at once (using their checkboxes) an orange option to “Batch Edit” will appear. Clicking this button will take you to a blank edit page where edits can be made to multiple items at once. When bulk editing, you must enable each field you wish to edit — all enabled fields will save that value for all selected items.
Note: Use this feature with care, as it’s easy to overwrite data for a large number of items at once.
Customizing the Listing View
By default, the item listing page shows a tabular view with the first few columns visible. However, alternate views and options are available by clicking the “i” icon on the right-side of the header. Core view options include:
- View Type
→ Table: Default. Rows and columns
→ Tiles: When an image field is present, shows an image grid
→ Map: When a location field is present, shows a map with pins
→ Calendar: When a date field is present, shows items as events - Spacing
From compact to cozy — this adjusts how close table items display - Columns
Which columns to display (you can reorder these too) - System
Display various additional system information, like item numbers, last edited on, revisions, comment count, and more.
Item Detail
When clicking an item from the Item Listing, you’re taken to its detail page where you can see/edit all its columns. The create, edit, and bulk edit pages are all essentially the same, except for the content within the fields. Fields may have a note/comment to further explain their purpose, or an asterisk (*) beside their label if required.
Saving
Once you’ve added or edited content, clicking the save (✓) button in the top right will save the item and return you to the Item Listing page. For additional save options you can click the “more” icon on the top of this button:
- Save (default)
Saves changes and returns you to the item listing page - Save and Stay
Saves changes and keeps you on the edit page - Save and Add
Saves changes and takes you to a blank new item page for that table — useful when repetitively adding items - Save as Copy
Saves the current item as a new item (a duplicate), the original item you opened is unchanged
Item Comments
You can leave comments on items within the right sidebar, mentioning specific users or groups with the “@” character. When mentioned in comments, users will receive a Directus notification and an accompanying email (if enabled within their preferences).
Translations
If the table has a translations interface, the item detail page will show a translations section at the bottom of the page which allows you to add in content in multiple languages.
To learn more about setting up the translations interface, checkout this step-by-step tutorial (Multilingual Content Setup in Directus (i18n)).
File Library
This page provides a listing of all files uploaded into the Directus platform as well as any videos or embeds (eg: YouTube, Vimeo) that have been linked. Full-featured and intuitive, this page performs the role of digital asset management.
Uploading New Files
If your user has uploading enabled, you can upload files to the library in several different ways:
- Drag-and-Drop to page
Simply dragging them from your computer onto the File Library page - Upload button
Click the “+” button in the File Library header - URL
You can include files from other sources by pasting the URL of the resource - Item Interfaces
Any files uploaded to an item will also appear in the File Library
Swapping Files
If you have added a file to many items throughout the system and need to change it globally, you can swap the asset. This maintains all relationships and metadata — but swaps the file itself.
Thumbnails
Directus saves a single thumbnail (200x200) for system purposes. Beyond this default size, Directus has a powerful thumbnailing system for creating custom sizes, qualities, and crops. If you want to know more about how this thumbnailer works, checkout this Medium article on the subject (Directus Dynamic Thumbnailer).
User Directory
This page provides a listing of all Directus users on the platform. Clicking on a user’s avatar or name from anywhere within the platform will open a modal window with their public info (eg: name, email, and location). Other information is private and can only be seen by that user and Administrators (eg: token, encrypted password). No one has the ability to see your actual password, not even Administrators.
Messages
Directus includes a simple messaging system where you can send messages to individual users or entire groups and have the option to include attachments. This page also aggregates any comment @mentions you receive so there’s a single place for all project communication. And if you’d like, you can have Directus forward all messages to your email so you don’t miss anything important.
Sending New Messages
- Click the “+” button in the Messages header to open a compose window
- Enter a Subject for the message
- Choose who should receive the message — either users or groups
- Enter your message in the Body field
- Add any file attachments (Optional)
- Click the “Send” button in the compose header
As mentioned in the intro, this was quite the general overview of the Directus interface. If you’d like to know more about the more advanced (read: technical) subjects, keep an eye on our Medium publication.
Happy coding!
Your friends at Directus
🐰
