Join us for The Changelog, taking you through the month’s Directus updates including product updates, new content and community contribution highlights.
Speaker 0: Alright. Hello, everyone. Welcome to July's version of the changelog from Directus. I'm Beth, and I'm gonna be taking you through what we've got in store for you today. Whether you are joining us live or you're catching up to this later, hi.
Hello. Thank you for joining us. Welcome. Welcome if you are new. Thanks for joining us again if you are returning.
If If you are joining us live and you've got any questions, do pop them in the chat. And if you are on YouTube or anything else like that, we will catch up with them later on. But for now, I am gonna kick us off by starting with the product updates.
Speaker 1: Let's talk through some of the highlights for our most recent release, directors 11.9. There's some potential breaking changes to be aware of. We've added support for LDAP login and enhanced parameter consistency for refresh and logout commands. There's allowed overriding the mode in refresh and logout commands to be inline with login, and the login method now accepts a payload object instead of separate email and password parameters. We've added anonymous project ID for improved telemetry.
We've also added backlink query parameter to exclude back relations when expanding queried fields. You can see the full release notes on GitHub.
Speaker 0: Alright. Something else that's new is collaborative editing. So we've got Bryant talking you through that next.
Speaker 2: It's officially time to stop, collaborate, and collaborate? Brian here from Directus. And today, super excited to show you collaborative editing, which has been one of the most requested features since I've been here at Directus. And it's big on the hit list. It's awesome.
Let's take a look. So you could see I've got, two different browsers side by side, and I'm logged in, as myself over here and as, dramatic chipmunk over here on the right. And I'm just gonna open up one of my pages here, the home page. So I'm gonna start editing my home page. You know, maybe I wanna change the permalink.
And, of course, I could see my own user avatar here, but, as dramatic chipmunk logs into this page, we could see now, I could see he is editing this, and, he's locked out of editing any fields that I'm working on. And likewise, on this side of it, I am locked out of editing any fields that he is working on. All these changes are happening in real time, and it does support relationships. So this is the best part. Right?
Directus allows you to create relationships super easily, and then, you know, the relationships like many to any page builder are great for dynamic pages. So now I can work on a landing page collaboratively with my teammates. So you could see here any changes I make are reflected over here. And likewise, any changes you make are reflected there. Now that is collaborative editing.
Super simple, super smooth. How do we actually enable this? This is an extension, so make sure you follow the instructions in the docs, download, and install the extension into your Directus instance. The next thing that you'll do is go to your settings. So I'm gonna go over here.
Let's just go back to full screen. We're gonna go to the project settings. Go to the module bar. Once you have that extension installed, make sure that real time collaboration is checked, and that will add a new icon to the navigation. And you can enable this globally, which is the default.
It's the easiest way to do it. It will work in the file library or in the user directory. Or if you prefer a more selective approach, maybe you've got some sensitive data that you don't want to, work collaboratively on, what you can do is go into the individual data model. So pick a collection and just search for the collaboration interface. You add that to the specific collection that you want, and then collaboration will only be enabled for that specific collection or collections that you enable it for.
So that's it for collaborative editing. That's it for me. This thing is awesome. I hope you'll find it as awesome as I do. Kudos to our team and thank you for watching.
Speaker 0: Alright. And if you wanna hear more or you've got any questions, we have a post on community.directors.io from Matt with lots of other info and some links which I will drop in the chat as well. Speaking of the community platform, the next segment is a community hotline.
Speaker 2: And welcome back to the community hotline. I'm your host Brian Gillespie from Directus. Today, we are answering a question from Directus community member, Daryl Morley. Daryl, how are you, sir? Welcome to the community.
Happy to have you. I'm gonna answer your question today in detail. Alright. So the question from Daryl. I'm integrating Directus with Lightspeed retail API.
Not heard Lightspeed name in a long time. That's awesome though. Would like to use, for example, the category ID from Lightspeed as the primary key in my categories collection within Directus. Here's the flow I'm aiming for. One, a the first step, a user creates a new category from the Directus admin UI.
A before create hook fires that's not actually what it's called in Directus, but I got you. It creates a category inside Lightspeed via their API. We receive the category ID back from Lightspeed, and it sets that ID as the primary key of the new Directus record. The issue I'm running into is if the ID field is not auto generated, Directus requires you to provide an ID. Yeah.
You gotta have that primary key for sure. But I can't know the ID until I call the Lightspeed API inside the hook. Prevents me from using the Lightspeed category ID as a Directus primary key. I could potentially store Lightspeed ID in a separate external category ID field, also an option. But then I run into difficulties linking my items to categories as, the directus only supports relationships using the primary key.
You could establish relationships on that that other field as well, but I totally understand where you're coming from with this. And Daryl's pleading. Because anyone successfully implemented a setup like this or found a clean workaround, keeps everything in sync. Alright. So we are going to dive into this, Daryl.
We are gonna solve this problem together right now. Alright. So I've got a blank direct us instance. We're gonna go in and let's create a new collection. I use plurals.
We're gonna call it categories. Now every collection has to have a primary key. Typically, I just leave this set to ID for simplicity's sake, and usually I go with a generated UUID. We automatically generate that. In this case, where we want that to come from a third party, we are going to use a manually entered string.
Now optional fields, I usually add these a 100% of the time. Not gonna do that here. I'm just gonna click finish setup, and what we're gonna do is just hit name. Let's add one more field for the name of this category, and this is our categories. Right?
So now the challenge is if I go in, and this is a new category, just as you said, if I try to save this using command s or just hitting the save button here, requires a value. Well, that sucks. That's not what I wanna do. So how do we fix this? There's two ways I can solve this.
I'm gonna show you flows first, and then we'll talk about hooks. Underneath the hood, they use the same event system. But, one way to do this inside the studio without writing much code or creating a custom extension that you've got to bundle and deploy, you could just do this in a flow. And if the logic is simple enough, it's it's easy to maintain. So we're gonna call this create category is the name of this flow, cool, in external API.
Now I'm not actually gonna use the light speed API here just to keep this high level, but, yeah, you'll you'll figure that part of it out. Got faith in you. Got confidence. Alright. So we can trigger these flows a variety of different ways.
Well, the one we're looking for is event hook, and then we're immediately asked the type of event hook. So there's two, obviously, that's on the screen. There's filter, which is, they said we say blocking here because it blocks that event from actually performing. This is the one that we want because we get a chance to it runs before the item gets saved in the database or before the item gets updated. We'll talk about that in a moment.
Actions happen after the event is settled, so after the category has been created. In this case, we want to intercept that category as it's being created and before it's saved into the database, and we're gonna alter the payload. So that's what we're doing here. The scope, we just want items create. Right?
Updated items should already have an ID, and we don't wanna complicate this. The response body is going to be our altered payload with this. So this is the payload that we're gonna save to the database. Now you can choose between all data or the data of the last operation. In this case, I'm just gonna keep this simple and choose data of the last operation to remove as many potential issues.
Alright. So now we've got our trigger. The next thing that we wanna do is call the external API. Now, I could go in and just choose webhook request URL. I'm gonna hit call external API here.
This is our step. In this case, it's gonna be a post. And I've just set up, like, a a mock endpoint, from some online free service that when we send this request, it should just send us an ID back. Cool. Alright.
And now the last step, you know, and probably, like, that stuff you're getting back from Lightspeed, you're gonna wanna transform that payload. There's two ways to do that. And let's just call this payload. Right? I could use the run script operation where I've got the full power of JavaScript.
Now you can import anything from NPM or use any libraries here, but you you've got, you know, the standard JavaScript library available to you here, and you can run, you know, just basic little functions there. Actually, you don't have the standard JavaScript library. This runs in an isolate, but you got all the basic JavaScript stuff that you're gonna need to transform a payload. The other way to do this is via the transform payload operation, which basically just allows you to adjust what is gonna come out of this thing. And you'll see we're using mustache syntax here for a reason.
Every operation in a flow appends its data to a key that you can then access. So there's two that are special, which are accountability and dot trigger. That's why they have or I'm sorry, dollar sign trigger. That's why they have that dollar sign in front of them. But the rest of them, we could just do like this.
So it'll be call external API, that's the key, and then we're just gonna get the ID. Right? Cool. Hit save. This is our flow.
Super complicated, super messy. No. It's not. It's easy. And then we're gonna go in, and now we're gonna create a new category.
So we hit new category. And oh, undefined. That's not good. What is happening here? Call external API.
That's my key. Did we get some records back? Okay. Yep. So that's the issue.
Right? Now I incorrectly formatted this. The thing that we're looking for is dot data dot ID. Alright. Always gotta do a bit of troubleshooting.
I was hoping I was just gonna one shot that without any AI assistance, but, hey, it happens. And I also saw that we're missing the name. So in this case, you know, I'm just going to call the name. So we'll do trigger dot payload dot name. I think that's gonna be correct.
Now, again, this is probably where you might wanna use something like JavaScript. But we can see here in our trigger, we have a payload. We have a name for the payload. Awesome. Alright.
So now, fingers crossed, this should work or it's gonna error out because we can't have two categories with undefined. This is new category. Hit save, and voila, we've got an ID that has come from the ether. Now the other approach to do this, you know, if you prefer to express your logic as code and you wanna, you know, check that into Git, what you can do is just build an extension that does the same thing. Right?
How do I do that? Well, go to our extension docs. So just go to guides, go to extensions, go to quick start, copy this code. I'm just gonna open up my terminal. We are going to put this here, APX direct us extension latest, and we're just gonna write a custom hook.
And I'm going to even cheat and just use something that I've got in, another project. Alright. Choose a name for the extension. External ID, maybe. Sounds good.
Cool. We're gonna use TypeScript, auto installer dependencies, and now I've got this external ID extension. It actually needs to be in my extensions folder here inside Directus. So, let's just blow this whole thing up and do that. My Directus project CD extensions slash external ID.
Why does that not work? CD extensions. What is my directory? Oh, somehow I'm inside Directus. I could do that.
CD extensions, external ID. Okay. And if I open this up, it's just an index dot ts file whenever the item is created. Let's pull up just something from my clipboard. Where are you?
Okay. Cool. So this is a pattern that I've used quite a bit before. We're just gonna call this categories. Right?
And we're gonna erase nano ID. We don't really need that. Cool. And we'll say, what, fetch? We could do a fetch call in here.
Alright. Constant ID. You know what? Let's just let's keep it simple. Nano ID.
Cool. So what this does, right, we define this hook, and we'll go into we see this filter that's on items dot create, and then we're passing in the payload, our schema from the direct us. And, we've got our accountability object, which we're not using at all here. But then we've got this constant that says, okay. These collections have to have a public ID.
And in this case, I could just change it to ID. And all we're doing here is updating the payload and returning the payload. Payload has no ID. Alright. I'm gonna hit NPM build.
Directus CD extensions. External ID. Cool. There we go. PMPM build.
Build my extension. I just wanna show you one way that can get this done. And then I've got my directus instance. We're gonna need to restart that bad boy. So we'll hit restart.
It should pick up that new extension. And fingers crossed. If we go to extensions, we could see that extension. And then I can deactivate. Let's not delete it entirely.
So we'll just deactivate this flow, change the status to inactive. Cool. Got it. And now if I do this again, say test category. Fingers crossed.
I know this is not gonna work. Oh, it does work. There we go. Test category. I was gonna say, I don't think I have Nano ID in installed, but maybe we're using that somewhere inside Directus itself.
Cool. There it is. Couple different ways to achieve it. Hope this answers your question. Daryl, my man, thanks for joining the community.
Appreciate you. Keep the questions coming. Keep the feedback coming. We love it. I'll see you next time on the community hotline.
Hey, guys. Brian here for Directus. And in this video, I'm gonna show you how to use the Directus Content MCP server to organize and manage all of your assets inside your CMS. Now, this is a huge problem for any CMS, all the way back to the before WordPress times. Right?
We've got a bunch of images that somebody uploads. I'll just copy paste this one in. And to beat it all, I'm just gonna rename this one image dot JPEG. Right? We're gonna download a nice little bunny that we're gonna paste in here.
So we'll throw our bunny in there. Cool. Got the bunny. And let's do one more, maybe some ice cream. My kids are into ice cream, so that's what we'll do.
And, again, like, one of the other nice things about Directus, I can always import from a URL instead of a, actually, a file. So there we go, right? And here in lies the problem with every asset management inside of CMS is we end up with a bunch of stuff that makes no sense, has no metadata, basically impossible to search. So q, the direct as content MCP server, and Claude. So I am going to use my prompt here, and it says add from Directus.
And I'm gonna click this one that says organize images. So these prompts basically allow us to add additional details, that gets replaced using variables. And then I'm just gonna say, please organize the assets in the needs organized folder. Sorry for the slow typing. So I hit add prompt, and basically, this has just generated this.
It has added my prompt here that I gave it at the end, and we've got some instructions for it already. And we'll just hit go. So what is Claude going to do? It should pull the schema from Directus. It should look at the system prompt, and then it should analyze these files, actually.
So it has the ability because of the ClaudeSonic model has vision capability. It can analyze these raw images and actually analyze the content. So you could see it here. It's making a request with the raw true. That's gonna download the file.
It should analyze that. And now it should go in and update the metadata for each one of these images. Now somewhere, someone in Anthropic is screaming about all of the calls that are happening here, but this is truly awesome. Right? So we could see it is updating all the metadata for me.
I haven't had to go through and classify these. Now moving forward, as I just refresh the screen here and we could see what it's done for us, I've got a full title, I've got a description, I've got tags for all of these. This is gonna be easy to find this content moving forward versus just a bunch of image dot JPEG or image dot PNG or random strings of characters inside our assets. Amazing. So this is just one workflow that is possible with the direct to content MCP.
Stay tuned for more.
Speaker 1: We want to take a moment towards the end of the changelog for thanking our amazing community contributors who give their time to improve the director's project. Since last month, there have been three A huge thank you to Jonas for fixing logging of invalid URL in isurlallowed, to SunGroll for adding support for non array group claims in OpenID and OAuth2, and to ABDON for updating the extensions SDK to Rollup v4. Thank you again. You can see the 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 June, who kindly financially contribute to Directus' development.
A huge thank you to Wayfan, Entle, Mike, Fergus, Omar, Marcus, Mission Control, Utomic, Steven, James, Nonlinear, Andreas, John, Jamiluddin, Birb, Adam, Jason, Yuya, Vincent, CK, Valentino, Jens, and Wayne. 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.
Speaker 0: Alright. And that is everything we have for you this month. If you are still here, thank you so much for taking the time to join us. We really appreciate it. If you've got any feedback on anything you'd like to see or any questions you have, community.directors.io, and we'll hope to see you next month.
Thanks so much for joining. Have a good one, everyone. Bye.