Dynamic Relational Interfaces
Short HopsSeason 2Episode 5July 26 2024Learn how to create a more intuitive user experience in Directus by implementing dynamic filters on relational interfaces. This episode teaches you to set up dependent field relationships, allowing users to see only relevant options when selecting related items.
Speaker 0: Welcome back to another episode of Short Hops. I'm your host Brian Gillespie. And in this episode, I'm gonna give you one of the coolest tips and tricks that I've probably ever shared here on Short Ops. So stick with me on this one. It's really cool.
Alright. So what are we focused on today? We're going to build a better user experience using filters on our relational interfaces. That is a mouthful, kind of underwhelming title. But let's dive into an example project and I'll show you what we've got going on.
So this is a sample Directus instance. This is my Agency OS project that we put out under the Directus Labs organization. Be sure to check that out. But I wanna show you the scenario. So I'm creating a project in here, and we've got an organization, and we could add multiple contacts to this.
So a a project belongs to an organization. Let's go with Tesla, in this case, pretty ambiguous name. And then I want to add an existing contact to this. But you could see here, here's my problem. If I take a look, I get all the contacts for this.
So, you know, I'm only wanting to be able to select contacts that are at Tesla. So this is kind of a dependency here. How do we manage something like this? So I'm just going to open the settings, we're going to go into our data model. I'm going to look for the projects collection.
And here inside organization, we've got contacts right beside it. What I'm looking for, you know, we could see the relationship tab and how all these things come together. But when I go into the interface, and this is a mini to mini collection or relationship, so you'll have to be mindful of how you've got your relationship set up. But if I want to set that up dependent upon a field that we already have, I could do something like this. Down here in my filter, you know, I could go in and and like hard code a value of, you know, show me all the contacts where the name contains Ashley.
But we want this to be dynamic, right, so I'm gonna drill into our organizations. This is a many to many relationship. And I'm gonna say organizations dot id equals, and I could do this. So I'm gonna do mustache brackets here, and I'm gonna do organization, which is the name of that other field inside our data model. Alright.
Great. So let's take a look at this and we'll go back, we'll create a new project. Right now if I click add existing, no contacts show up. How come? Right?
So what I could do here, we'll say Directus test. That's the company we wanna do this project for. And now I only see the contacts who are part of that organization. Right? Likewise, if I change this to Tesla, I open it up and I see I've got Elon Dusk here as the only option to select.
So that's it. Take a look at the filter on any of the relational interfaces that you've set up, this is a a nice little technique to use in certain scenarios like this one. That's it for this episode. Stay tuned for the next one.