May 2025

Speaker 0: Alright. Hello, everyone. I hope you're all having a wonderful day. Welcome to the May changelog. And if you are joining us live or you're watching later on, hi.

Hello. Thank you for joining us. I'm Beth, and I'm gonna be taking you through today's show. We have a lot of Brian today. It's very exciting.

I, however, am gonna be kicking you off by taking you to Carmen with the product

Speaker 1: updates. Thanks, Beth. And hey, everybody. Carmen here to tell you about what we've shipped in the last month or so with Directus eleven point seven point o through to eleven point seven point two. Now we've launched a couple of exciting new features, some bug fixes, and just one potential breaking change that you should know about.

Now let's start with some potential breaking changes. As of Directus 11.7 o, we will no longer be supporting MySQL 5.7 in the API, so keep an eye out for that. One of the biggest improvements we've made is in the UX and UI of the visual editor module, so go check it out. Lastly, we've published the Directus schema builder package for mocking database schemas. So that's an overview of what we've been working on over the last month.

Be sure to check out further details of the visual editor module improvements later on.

Speaker 2: Hey. What's up? Brian here. I'm gonna tell you about some updates to, one of our more popular extensions that we've released to the Directus Labs program, the superheader. So the superheader is, basically a powerful header component that gives you a couple different pieces inside one box.

So you get a a a title that uses dynamic values. You get a subtitle, so you can add things like published and, you know, additional metadata. You get contextual help, and you get an action bar where you can add links or you can run flows right from the form instead of opening in the right sidebar. So this has been pretty popular since we launched it, but we also got a slew of feedback from you guys. So keep the feedback coming.

Love it. We have fixed, quite a few of the bugs that are were happening on opening different modal windows within modals. So that is resolved. And let's take a look at the new functionality. So one of the pieces that is brand new is the ability to open the help content in a modal instead of inline, as a like an accordion type experience.

For me, I think this is a better experience, but we still support the inline help if you prefer that as well. Next, we have fixed some of the issues with, like, loading internal links. So you can see here, I can open this up in

Speaker 3: the visual

Speaker 2: editor. That does not have to spin up the app or open in a new window, so we've solved that. And then when opening flows or running flows, now we have the capability to, properly manage the overlay so that if you open something else inside your flow, which you can do let's take a look at this, where we wanna pick up the direct Us users. This is no longer showing behind that. So, just quality of life improvements.

Now, onto the two biggest improvements. Right? The ability to translate the help content, which was a huge one for, anybody outside The US. And, initially, I wasn't super sure there was an easy way to get the this done, but we managed to do that. So here is how you enable translation support within the superheader.

So we're here inside the data model. We go into our interface, and we scroll down, and now we have this enable help translations. So the help translations here, this uses the custom translation strings, and you'll have to set these up just like you would anywhere else, that you're leveraging those for fields. And what this will do, whatever you set for these translation strings will override whatever the the help content is here. So let's just take a look at what that experience looks like.

I'm gonna go in. And if I look at my custom translations, you could see I've got two different values for this key. I've got one in English, and this is just HTML content. That still works just fine. And then I have the same thing in French.

So now go to the home page. We could see, okay, this is English. If I go to my specific user, we just change the default language to French, and we go back. You know? So we see some of this content.

Obviously, it doesn't have translation strings set up for it. It. But if we load our help, now we've got that help content localized for our user. So that just works out of the box with the standard setup. Now I'll go back in, just quickly set this back.

And then the last piece of the puzzle is relational item support. So when we first launched this, we could not, fetch relationships. Now you can. So if you have, like, a site set up where I've got a site that this belongs to. We wanna show the name of the site or even inside, like, our actions where we want to leverage a, a domain from another collection or a field from a many to one relationship, we can do that now, which is great.

I know some of you have multi tenant setups, and this enables that workflow. So now I can go in. I could see the site name. This is linked to Bryant's site if we open that up or Bryant's front end. And then if I hit view on website, that will load that link for me.

So that is the update for the superheader. Hope you guys enjoy this. Super powerful. Got an update for you on our SEO plugin. So this was a a plug in that we launched not too long ago.

We've added, a lot of nice updates to it. So, if you've already used it before, this should look familiar to you. The plug in is all about managing your SEO metadata in a simple, easy to use interface. So, out of the box, you kinda get page titles and meta descriptions, which is basically the the bare minimum that you want on the SEO side. We show you a a quick little search preview of what that would look like.

You could populate this with a template from the page title, and we give you just some contextual help of, you know, how many characters you should have for the page title or the meta description. And if I go over those, you could see that that's gonna be truncated in our search preview. We've also added a preview for your social media links or OG images. So here, I can, upload my social images or my OG image and actually get a quick preview of what it's gonna look like if it's shared on different platforms, and what that link will actually look like. Just, again, helpful little context.

But now we have added even more powerful features to this, based on feedback that we received. So, we can enable an advanced controls like search engine for, like, no index, no follow so that it doesn't follow links or this particular page doesn't get indexed. You can add site map controls if you want to change the frequency, which the crawlers look at your site, or the SEO fields. Those were, like, custom SEO fields where I can define, like, canonical URLs or basically any other metadata that I want to pass to my front end. But the new thing here is our focus key phrase.

So we can actually analyze your content. So I'm gonna go into our pages collection, and let's set up the SEO plug in for our blog posts. So So I'm just gonna add this focus key phrase, and when I enable that, it asks me for a slug field and content fields. So where are we actually keeping the content that we're gonna render on the page? Now if you've ever u if you're coming from WordPress, this is very similar to something like Yoast or or some of those other SEO tools where the it's just static analysis of our content.

So if I pull this up, we go over to our SEO tab, and here we've got the option to add our main key phrase. So if I add CMS as our main key phrase, you could see this analysis will happen almost immediately. It says, hey. Your focus key phrase does not appear in the content. So this keyword isn't showing up in my content.

You know, maybe bunny would be a better one for this. Cool. And then it shows us, hey. Your subheadings, like your h ones, h twos, h threes, those do not contain that focus key phrase. So it gives us improvements, good results.

Just a quick, nice little check on your content before you publish to know that you're covering your SEO basics. So that is the update for the SEO plugin. I I hope you'll find this helpful. Keep the feedback coming, please. We love it.

Speaker 1: So what's new in content this month? We've been hard at work and published eight new articles all about CMSs or content management systems. Be sure to check them out. We've got articles on how to create a CMS and how to generate dynamic pages for CMSs in Astro, Nuxt, Next. Js, and SvelteKit.

Don't miss them.

Speaker 0: Alright. And as a reminder, you can find the extensions in github.com/directors-labs/extensions and also the tutorials on directors.i0/docs/tutorials. Next up, we have more of Brian. I told you we were super lucky today. He is gonna be talking us through the visual editor updates.

Speaker 2: Super excited for this one. This is a huge feature release for us. Visual editing. It's here. It's real.

It's freaking awesome. And, yeah, I don't get excite well, I get very excited about a lot of things, but I'm super excited about this one, and you should be too. This is gonna change the game. Right? The problem with most headless CMS experiences, great for us as developers, we love the structured data.

Structured data is great for LLMs and AI. But, when you go headless, you kinda miss that that standard see what I'm editing experience. Right? You're relying on the front end to interpret a lot of that. So in the past, we've had live preview.

That works great. But what if we take this a step further and I just allow my content editors not to have to do this in a form, but as they're browsing the page and they could see the edits they're making right in line. That is visual editing. It's here. Let's take a look at it.

So I'm just gonna open this page up. This is our super header extension, but I'm just gonna open this page in our visual editor. So here I could see, we've got our content, and you'll notice as I start mousing over things, because I've enabled visual editor and it's, visual editor is two pieces. Right? There's a module inside Directus, and then there's a front end library that you install on your website.

Works with any of your favorite frameworks. So Nuxt, Next, Astro, Svelte. We've actually got starter kits for you. % ready to go with this integrated, so you don't really have to do a lot of work to get started with this, but super powerful. Right up here at the top, we'll see our different URLs that are available to navigate to.

I can also do this where I just toggle the navigation and hide that. And basically from here, it is like a full on browsing experience. I can jump between different pages and I can hover over an element, go in and edit that. Edit this form. Great.

All the keyboard shortcuts that you would expect are here. So I can hit command save to save that if I'm opening this up. I can hit escape to close. So it's a very nice experience. Up at the top, I can also toggle all the editable elements.

So I can see everything that I can edit in one one go. Super easy. Right? I can go in and update all of my navigation items. I could add new items to my navigation.

And, basically, this is, all just using the data model that you've got set up in Directus. On the front end, you're enabling these fields and the behavior that you want through data attributes. Couldn't be simpler to integrate, works with any deployment target, whether that's Netlify or Vercel, just a regular node, long running server. Whatever you've got, you can make this work. And this is baked into core as well, which, you know, it's not hidden behind some enterprise plan, which is huge.

So I'll I'll just go in and let's navigate to our page at the bottom here. This is integrated into our front end where you can see I can now just drag and drop these blocks. And instead of doing this in a form and hitting save and waiting for the changes to happen, now I can see this happen directly in line. So this is content editing, and this is freaking awesome. So number one, your content editors are going to love this.

You know, definitely check this out. I'm gonna show you inside our docs where this is located. First and foremost, like I said, we've got starters ready to go for you. There's a command that you can just copy here, n p x directus dash template dash cli at latest init. Copy this.

Run this. It will pull down a example of our CMS template that you see here, and then it will also prompt you to install your favorite front end framework, which, again, we've got it all set up. But if you go to our docs, go to the guide section, and under content, look for the visual editor. So this is a a quick preview of what it looks like. We've got documentation on the front end library.

Again, that works through data attributes. You just install this, do a little bit of config, and boom. Your content editors will love you. They'll be 10 times more efficient, 10 times more productive, and I this is just an amazing feature all around. I I'm super excited about it.

I hope you are too.

Speaker 0: Alright. Thank you for those updates, Brian. If you are regular here at the changelog, first of all, thank you. You are my favorite people. And secondly, you will know that the community showcase is my all time favorite part of this show, and we are back, and I'm so excited for it.

So we have Jochem talking through his currency extension next.

Speaker 4: Hello, everybody. My name is Jochem Gourdes, and I'm a software developer from The Netherlands. In my day to day job, I have a lot of focus on building software for the app, mainly in the front end space. My go to back end to use with my front end applications and the one that I really enjoy using is Directus. And one of the things I really like about Directus is the extensibility via custom extensions.

And that's also the topic of my video today. I recently built and released an extension called simple currency fields. The main goal of this extension is to provide a custom editor interface and an inline display for the Data Studio to enter and view currency values the same convenient way as we're used to in the Director Studio. And why currency values? Well, for example, to store prices for products in an ecommerce store.

The reason I wanted to build this extension was because the default input field field for the decimal type didn't give me enough flexibility for safely handling user inputs and correctly displaying a currency value. And as a technical side note, I did want to extend upon the decimal type for the fields because of its accuracy in the database. So the extension will actually only work with fields that have decimal as their type. I've prepared a tiny demo within a local direct instance on my computer and they'll be using a custom product collection I've prepared. So let's have a look.

So let's have a look at our product collection. As you can see, we have a couple of pretty common, fields, status, image, name, and price fields. Interface size, also price, and a couple of other fields fields which are not important for this demo. For the inputs, for the interface side, we have a euro symbol. And for our display portion, we also have a euro symbol.

And if we are going to our product data model, we can see that price field is configured as a decimal field with precision 19 and scale of two, which means we can store pretty big, numbers in our database for these fields. And in the interface tab, you can see how I configured the euro sign as icons for the in for the interface and euro sign as prefix that's being used by the display. I've also enabled auto formatting for this field, and I think this is a pretty common way how you normally would configure currency fields in directors. So what I want to do next is change my system settings, my language settings to Dutch. Let's do that.

And let's go back to our product collection. And one of the problems I was talking about should become visible now because the way the price is presented here is not common for, the Dutch language. For instance, it should be using a comma as a decimal separator, but instead it's still showing a dot for it. If we now go into one of the products and edit it as we and edit it, we can see the dot here as well. Important to note here though is that users should also use a document changing the value here.

And this is probably not convenient for a lot of users and maybe even worse if I copy a valid ditch price into the fields, that will just change it into a comma here, we will get a very crisp and clear error message. At least I hope so. Well, not really. Most technical users would be able to figure out what's going on here, but most probably would not. So these are a couple of the things I want to solve with the extension.

A simple way to input and view currency values preferably in the local of the user handling the content. So let's solve that. For this, we can go to our extensions and we can see that we have no extensions installed yet. And if you go to the marketplace, we can search for the simple fields, simple currency field, extension. We can install it.

We have to reload the page and then we can go back to our collection to the price fields. And let's start with the display, now with the interface. And let's change the input to currency. And let's configure our currency to euro. Save it.

And if we go back to our product listing and to a product, we can now see properly formatted currency value. In fact, I can type whatever I want Unless it's a number, it will not accept it as input. What's also need to show here is that as soon as you leave the field, the field will automatically be formatted into the correct logo for the user. So it also supports rounding. So if I add a six, it should be become 96, and that will also work.

But you can also add in bigger numbers to get a thousand separator like this. And if you leave the field, it will automatically, probably format it. If you save it to the same thing and you can also, copy in numbers with a thousand separator in it. Like this, for instance, as an example. If I copy that into the fields, it will automatically use the proper inputting format.

And as soon as I leave it, it will use the proper display formatting. And yeah. Let's also enable it for the display. So if you go back to our collection, go to the display settings, remove the configured version and pick currency. Save that.

The currency symbol is automatically derived from the interface settings. Let's go back to our collection and we can see it's properly formatting here as well. One last thing to show here, I think, is that, instead of changing, current fields, you can also easily add new currency fields to any of your collections. For instance, let's imagine we need a subtotal field in our product collection. We can easily do so by selecting the currency, field here, which is just a placeholder for the input field with types at two decimal.

Let's name that subtotal. Let's also give that the same, currency symbol. And let's go to the advanced, options in order to set precision and scale to be the same as the price field. Save it. Move it and let's go back to our collection.

And here you can see now that we can use the field with the with the extension. So that was my demo. With this extension, I hope to make handling currency values in Directus not only easier, but also more intuitive and user friendly, especially for those working in different logos. If you would like to try this extension yourself, you can find it on the Directus marketplace and on my GitHub profile. You can also find me on Directus Discord server if you want to chat.

And if you have any feedback, suggestions, or ideas for improvements, feel free to reach out. I'm always open for to suggestions and collaboration. Thank you for watching this demo, and I look forward to see how the community makes use of the simple currency field extension. Have a great day. Bye.

Speaker 0: Alright. And there's actually since Yohum very kindly, recorded that video, there is a new post on our new community platform, which I will link here as well. And that brings us to our next section, which is that Ryke and I had a little chat about just that. Welcome. We have Raik with us who is do you want to introduce yourself in case people don't know?

Maybe they're finding this on a different platform.

Speaker 3: Yes, please. I'm the CTO and cofounder

Speaker 0: And you're here with exciting news, which you may have already heard if you are in our Discord. But what is the exciting news, Royce?

Speaker 3: We have a new community platform that is very exciting news.

Speaker 0: What is the new platform? Where is it?

Speaker 3: New platform is community.directors.ao, and it's a discourse forum.

Speaker 0: Are we about to battle it out between Discord and discourse right now?

Speaker 3: I think we should. Shouldn't we?

Speaker 0: I think we should. I think we should. So we're moving from Discord to Discourse. Why? Why are we why are we doing that?

Speaker 3: Right. So we've been on Discord for, gosh, years now. Right? We started it as an open community server, and it kinda turned into a bit of a, you know, q and a type of thing, a chat with contributors. But over time, we realized as that community grew, we just hit a couple of roadblocks, really.

It's like the search kinda didn't work, so people have they have to ask the same question multiple times. You know, the the questions don't show up on the Internet. So if you Google for stuff, you're not gonna find any of the questions that were asked on Discord. And generally speaking, you know, it it started to you know, there's some cracks showed up. There were some cracks at that skill for sure.

So the the main points that we realized we wanted to solve is a, just that findability. Right? Make it accessible, make it accessible to the Internet, make it accessible and therefore and then and then the second part is make sure that it's in a in a structured format that is a little bit of QA rather than just check messages that are all, you know, intertwined like that. So, yeah, we we chose Discourse as sort of the tool for the job, and that's now accessible.

Speaker 0: Yes. It is. So you can view it without a, an account or you can make an account and you can start posting and liking things. What's happening to the current Discord? Was is it completely going?

Are we are we shutting it down? Oh, no.

Speaker 3: No. No. No. No. No.

So what Discord is really good for is active chatting, obviously. I mean, it's a chat platform. Right? So we're gonna keep it around for chatting with the community and just talking to each other, talking with contributors, talking to, you know, folks in the community in general. But we are explicitly saying, hey.

Discourse is just the better tool for the job when it comes to q and a. So if you have any questions around Directus or how to use it or you're running into something, Discourse is gonna be the place to go. Right? Community.directus.ao. And for everything else, if you just, you know, wanna chat, wanna hang out, Discord is gonna stick around.

Speaker 0: I'm gonna give you a very quick tour of the new community platform. If you head over to community.directors.io, you'll land here, which has all of the top posts. You can also filter from all time, year, quarter, month, week or on today. There's also the ability to see the latest activity on posts. You can also filter with tags or in categories.

So for example, if you want to see the showcases, here you go. You have the ability to sign up with your Google, your GitHub, your Discord or your email address. Once you've signed in 'here I am is definitely not Beth' you'll be able to post topics, so you can pick whichever category is the right one for your post and any tags that relate to it as well as a title and a body of text. You can also interact with other people's posts by liking, you've got a few choice of different emojis, as well as replying. If you've got any questions about the new platform or what's happening with Discord or anything else, let us know.

The general chat in Discord is still available or make a new topic on our community platform.

Speaker 2: 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 Hops. So stick with me on this one. It's really cool.

Alright. So what are we focused on today? We're gonna 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 a dependency here. How do we manage something like this? So I'm just gonna open the settings. We're gonna go into our data model.

I'm gonna 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, hold on, and 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 contact show up. How come? Right? So what I could do here, we'll say direct us 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 Musk 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.

Speaker 0: We want to take a moment towards the end of the change log for thanking our amazing community contributors who give their time to improve the director's project. Since last month, there have been three contributors. A huge thank you to Osman for fixing duplicate values for is one off filter, Gevelium for ensuring that the context menu of a field in the data model settings appear at full height, and to Ziles for adding data collection and field name attributes to parent wrapper for all form elements. Thank you again. You can see their specific pull requests inside of the full release notes on GitHub.

Lastly, we also want to take the time to thank our GitHub Sponsors of April who financially contribute to their Exodus development. A huge thank you to Weifan, Entel, Mike, Fergus, Omar, Marcus, Mission Control, Peter, Utomic, Steven, James, Nonlinear, Andreas, Khan, John, Jamiluddin, Burb, Adam, Jason, Birka, Yuya, Vincent, CK, Valentino, Jens, Wayne, and Yannis. The money we are given from our GitHub sponsors goes straight back to community members who build tooling and extensions for the director's ecosystem. Thank you again for being part of that. Alright.

That is everything for this month's changelog. Thank you so much. If you've made it to this point, you are incredible, and I appreciate you spending the time with us. I hope to see you next month. In the meantime, do go check out the new community platform.

And if you've got any questions, you've got two choices now. You can either go into the Discord or you can be top tier and go to our new community platform. So please go see you over there and let go and check out more of what's been going on. Have a great rest of your day, your week, and your month, everyone, and I will see you again shortly.