Introduction to Directus Layouts
Hi, Bryant here for Directus. In this video, we're gonna give you a guided tour of all the powerful ways you can view your data with our layouts feature.
Layouts are just the different ways that you can browse, manage and visualize your data, within the Directus data studio. Directus comes with five super configurable layouts that cover a variety of common use: Table, cards, calendar, maps, and the cloud exclusive Kanban layout.
Let's cover each one in detail.
The Table Layout
The table layout shows your data in rows and columns. Big surprise. I know it is the default layout for all your collections, until you decide to change it from the right sidebar.
There are many ways to customize the table layout. To add a currently hidden field to the table, just click the add field button on the right hand side of the layout, and then choose the field you want to display.
Then it's just a quick drag and drop to rearrange your column order, resize your individual column widths by hovering over the separator between columns and then using a click and drag. And make sure you try changing the sort order, updating the cell alignment, or even hiding fields by hovering over a column header and choosing an item from the dropdown.
Give your data a little more room to breathe by adjusting the spacing from the layout options section of the information sidebar. You can also edit or delete items in bulk. Just click the check boxes beside the items you want to update and then use the edit or delete buttons on the top right hand side.
The Cards Layout
Now let's jump into the cards layout. The cards layout is perfect for items with media files like images and PDFs. It is the default layout for both the user directory and the file library.
Adjust the size of each card by clicking the card size buttons. There are four options. And change the sort field and sort order by clicking the field name and then the sort button to the right to change the order.
The cards layout has a few more options you can configure under the layout options section of the information sidebar. You've got control over the image source, the titles and subtitles that display below images. And under the advanced section, you can even control how the image fits within the square card.
You can also do bulk edits, just like in the table layout. You just simply hover and click over the left hand side of each card to go into selection mode. Then you click the action that you want to perform on the top right hand side.
The Calendar Layout
Next up is the calendar layout. The calendar layout is great for visualizing any items with date and time. Some use cases here could be start and end dates for projects, due dates for tasks, a publishing schedule for blog and social media posts.
To get started, make sure you update the layout options from the information sidebar. The display template controls the event title on your calendar. You can add any fields from this collection, including relational data. You'll need to choose a start date field before any items will be visible on the calendar, but the end date field is completely optional.
There are four different views for your calendar: month, week, day, and list. On the month, week and day views, you can drag and drop items to update the date. And I also like the list view because it gives you an easy to read agenda of all dates and times.
The Maps Layout
Let's move on to the maps layout. The maps layout gives you a clean world map for all your geospatial data. You can show single points on your map using latitude and longitude. That's great for location data, points of interest, customer addresses, or you can even show more complex geometry like polygons or lines for things like political boundaries, flight patterns, submarine cables and more.
You can obviously zoom, pan, and do all the standard map stuff that you're used to. But there's one really cool feature I wanna show you. Let's pretend I need to assign all customers within a certain geographic region to a new account manager. The select control gives you the ability to select many different points on a map with a simple click and drag.
You can then edit those items in bulk by clicking the edit on the top right hand side and adjusting the data. Setting up the map layout is easy. Just choose your base map, the field that contains your geospatial data, and set up your display template by adding a field from the collection. For single point data, you can also keep things tidy by using the cluster nearby data checkbox to group points together at different zoom levels.
The Kanban Layout (Cloud Exclusive)
Now let's cover the cloud exclusive Kanban layout. If you're a fan of Trello, then the Kanban layout is for you. It works great for lists of items like task todos or any other data that progresses through stages or statuses.
Your data is grouped into lists of cards that you can then drag and drop to a different list to change the status, or within the same list to update the sort order or priority. The Kanban layout is really flexible and there's a lot of options you can configure. The group title field serves as the title on each item. The card text is displayed right below the title.
And if I open the advanced section, I see more options like the card tags, which shows up below the text. I've got the card date, which shows at the bottom left hand side of the card. I can add an optional card image and I can also control how that image fits within the card. The card user field will display that user's avatar in the bottom right hand side. The last option, show ungrouped, will show records that do not have a status.
Universal Layout Features: Search, Filter & Bookmarks
Those are the current Directus layouts. There's a great layout for almost all use cases, but if you need something more advanced, you can create your own custom layouts using the Directus extension SDK. Check out our documentation to learn more about that.
There are several other noteworthy features of each layout that you'll want to try. Layouts included advanced search and filter capabilities that make it effortless to find the data that you're looking for. Click the search icon to expand the search bar and simply start typing. It's important to know that the search only looks through the string and text type fields within a collection. It doesn't search through the related items, just the root level fields.
For more powerful data finding abilities, reach for the filters. You can create complex and/or filter groups, use detailed rules to find the right criteria, and filter items based on related fields from other collections. And now for the best part, once you've got your layout configured with all the right filters and layout options, just hit the create bookmark button to save this configuration for later, or for other members of your team to use.
Universal Layout Features: Auto-Refresh & Data Export
If you are spending a lot of time in one specific layout, try setting the auto-refresh interval. It will automatically refresh the data for you on whatever schedule you set, so you don't have to keep mashing the reload button in your browser.
Each layout also gives you the ability to import and export data via CSV or JSON formats. For specific details on how to import data, be sure to review our documentation, but for exporting data, there's a helpful wizard that opens once you click the export items button. Choose a sort field, configure any filters and add all the fields that you want to include and then download your data. Super simple.
Conclusion
That's the layouts overview. Now that you're officially a Directus layout pro, opening up your project and start customizing how you view your data. And be sure to watch our other helpful videos on all the other amazing features within Directus.
