Learn how to conditionally show and hide fields inside of Directus Editor.
Speaker 0: Hi. Welcome back to another episode of Short Hops where I give you a couple of my best directest tips and tricks. I'm your host, Brian Gillespie, and today we are talking about conditional fields. This is one of my favorite features. I know I say that a lot, but, as a a pet peeve of mine, I hate presenting information or or fields for somebody to fill out that aren't relevant or aren't necessary.
And the conditional fields inside Directus allow you to create a better user experience for your content editors, your marketers, anybody who's using the actual Directus app. And typically, that could be nontechnical folks, and they will thank you if you build a great experience using these conditional fields. So let's take a look at a pretty common scenario. You know, we've got posts on our site. These could be resources, whatever.
We've got different types of posts. And depending on the type of post, we may not need things like a video URL or, if we're doing a case study, we probably wanna have company name or contact name, company URL. But in all other scenarios, it's not necessary to present this. So let's control this. We'll go into our data model and for our posts, let's just create a new radio button called post type.
We'll give a couple choices. Right? We have a blog or an article. We have video. We have a case study.
Great. Okay. So it's for score study. Perfect. Okay.
So now I hit Save and we have a post type. Maybe we sort this out. Cool. Great job, Bryant. Let's pat you on the back.
And we pick blog or video, post type, case study. None of this actually changes. Right? So this is where our custom fields come into play. This video URL, let's go in and go to the field settings.
We're gonna hide this on the detail view. We don't need it, until we do. So let's show when type equals video. So the name here is just adding some additional context to this condition, and we're gonna set up a rule for this. So when the post type equals video, then we are going to unhide that.
So we're gonna make sure hidden on detail is unchecked. And just like that, we can go in and now for our blog post, you can see that video field is hidden, but if I change it to the post type to video, now we can see we've got that field for video URL. Some other ways that I use this, you can see I have a group of fields here. We could go in and add a detail detail group for this. So let's just call this case study details.
Right? And if I go into the conditions for this, maybe we'll we'll hide this by default and show when type equals case study. So give it a name just so we have that. Again we'll set this condition or the rule for this when the post type equals case study, we are going to show this item inside the form. And then last but not least, I'll just drag my items into the actual form.
So if I use this grouping, I I don't necessarily have to add the conditions to these individual fields because they're part of that group. So now if I scroll and for any blog posts, you see that we just have content image for a video now that video URL pops up, but for a case study, I now have this collapsible case study details section. One other quick way that I use this. A common scenario is that we need to disable editing after a particular item is created inside a collection. So if I had some fields that I wanted to prevent the user from editing after I created an item, I could do the conditional fields for that.
So let's just say I wanted to prevent the user from, let's add a field for date published. That'll be a good example. Date published, cool, and let's just pretend that if there is a this has already been published or there's a date published, I want to prevent people from editing the slug of this particular item. So I can go into our conditions and if date published, do not allow editing. So I can go in and set date published where is that new field that we just created.
If date value isn't null, we are going to disable editing this value. Alright. So let's save that, And on this post now we have a date published, but if I go in and choose a date published, you could see that now I cannot edit that slug, which, you know, could help prevent, any 404 errors in the future. That's just one of the ways that you can use conditional fields. I hope this is tremendously helpful for you.
Keep the questions coming. I love seeing these pop up in the community. Stay tuned for the next episode.