Did you know you can modify the fields in system collections? đŸ˜±

Tips & Tricks
1

While working with Directus, I ran into a challenge: I needed to adjust the fields inside system collections (like directus_users, directus_files, etc.) to better match our workflow UX.

At first, I wasn’t sure it was even possible — and I know it sounds a bit hacky :sweat_smile: — but it turns out you can customize them! :tada:

Since I couldn’t find a clear example, I decided to write my own guide. This also happens to be my very first article about Directus, so I hope it becomes a helpful reference for anyone facing the same challenge.

:backhand_index_pointing_right: Check it out here: Customizing Directus Default Fields

I’d love to hear if you’ve tried customizing system collections before — what’s your experience? Did you take a different approach? Do you see any concerns or risks with this method?

3 Likes
2

I did try to change the default folder upload for avatar, and it worked but then the field moved at the bottom and it was no longer a system field

3

Hey @ahmad_quvor, glad you gave it a try! What you’re seeing is expected behavior, since the avatar field is no longer a system field, it has moved to the end of the fields—just like any time you create a new field.

If you want to move it back to its original place, you have two options:

  1. If you use the same workaround for your other fields, you can fully control their order and organize all fields exactly as you like on the page, but I see that’s a lot of work for your case.
  2. Alternatively, you can use an extension like Classified Group. It lets you add a class to the avatar field and easily enforce its order (for example, order: -1). to position the field at the top of the page.
1 Like
4

Thanks for this!

It inspired me to find an even easier solution to hide any field of your choice with css. Without depending on data-primary which is not specific to a field. Here’s how you’d hide tags and description fields for example :


/* Hide specific fileds */
.field[data-collection=“directus_users”][data-field=“tags”],
.field[data-collection=“directus_users”][data-field=“description”]{
display: none !important;
}