Introduction to Directus Flows for Headless CMS
Hi, Brian here for Directus and in this video, we're diving deeper into workflow automation using Directus flows. This video is just one in a series of videos where we'll teach you how to recreate some of the most common use cases for Directus flows, step by step.
In this video we're gonna cover headless CMS. Directus makes an excellent headless CMS for websites and other digital experiences. The Data Studio makes it super easy for users to manage and update content, and you can layer Directus Flows on top to create a truly powerful and automated publishing workflow.
So enough talk. Let's dive right into our first use case.
Use Case 1: Triggering a Static Site Build
So the first use case we're gonna cover is simply a statically generated website. Maybe you've got a Jamstack site hosted at Netlify or Vercel, and whenever you add a new page or update a page inside your Directus instance, You want to trigger a new build of your website at Netlify.
I'm in the flows page from the settings and we're going to create a flow on the top right hand side. We'll give this a name, just 'pages published, deploy site', and the status is going to be active. We'll go ahead and add a description just so that everybody else that looks at this will know what is going on. Next, we'll add an icon and a color just to keep things nice and tidy. And where it says 'Activity and Logs tracking', we're just gonna keep that at 'track activity and logs'.
Next, let's move on to our trigger. There are many different triggers, but for this one, we're gonna use event hook. For the type, I'm going to use non-blocking action. And then we'll add our scope. So what events do we want to trigger this based on? And we're gonna use items.create and items.update. After that, we will choose our collection. So in this case, we're just gonna keep this simple and trigger based on the page, but if you had multiple collections for content, you would probably add all of those here. I'll just check 'pages' here and then we'll save this flow.
That will take us directly to our workflow builder. So we've created our trigger. Now we need to add an operation. To do that, I just look for the plus icon to the right of the checkbox. So we'll give this operation a name, and you want to pay special attention to the key because that's how you access data from that operation. So we're gonna go to the Webhook / Request URL operation, and next I am going to hop over to Netlify and find my build URL. So I would go to the 'Build & deploy' part of the settings for my site. And I'm gonna scroll down to Build hooks. So here, this just gives you a unique URL you could call to generate a build. We'll save this and copy that URL.
So now that we have that, I'll hop back into Directus and we're gonna change the method here to POST and just paste our URL. That's all we need to do here. I don't need to set any headers or request body, and I'll just save this operation. So now we've got our trigger, we've got our first operation. Let's save this and test it out to see if it's actually going to work. So from here I'm gonna go to our content, go to our pages collection, and I'm just gonna edit some content in one of the pages and save it to see if it will automatically trigger the build for us.
So I save that, I open up my Netlify deploy section of this site and I could see that this is actually building.
Refining the Build Trigger with a Condition
I don't want to trigger a build on every single update. So I'm gonna go back to this flow and we'll edit it to make it a bit smarter. What we wanna do is add a condition that checks to make sure that the page is published. So I'll just remove the link to that current operation and we'll create a new operation and just call it 'if published'. Now we're going to add a condition that we're going to look for the page status equals published. And then only then are we actually going to deploy this.
You can use the template condition that Directus gives you. That's what I'm gonna use. And on our trigger, the data that we're looking for is inside the trigger payload object, and that's going to be the status. And I'm just gonna change that to equal to published and save this. So now that we have our condition operation, I'm just gonna link this back to our 'deploy site' operation. So if this is true, we're going to deploy the site, and next I'm going to set up an else condition so that if the page is not published, we're just gonna log that to the console. And just say, 'status was not published', just so we can make sure that we complete this workflow.
So now we've got our entire flow created. We can go ahead and save this and test it out one more time just to make sure that we're not deploying on pages that aren't actually published. We'll click save and let's go back into our pages and test this out. So I'll open one of our example pages. I'm gonna change this to 'in review', we'll click save. And I can go back to that flow and look for the log section on the right hand side and see all the events that have happened inside this flow. So here I could see that instead of deploying the site, we logged to the console that the status was not published, and I don't see any deploys happening inside Netlify.
Now, likewise, if I change this to published inside our example page and save, we can go back and see again the logs for this specific flow, and we could see that that flow has actually triggered a deployment. And again, if I open up Netlify, there we go. I see the build being triggered. So that is it for our first use case. Let's take a look at the next one.
Use Case 2: Creating a Content Approval Workflow
So for our second use case, we're gonna build a content approval workflow. Whenever someone adds new content to the site, we wanted to go through a review process. Maybe a content manager. So you could see we have an 'in review' status for our pages. And anytime a page is in review, we want to notify our content manager and send that for their approval.
Let's go back to our flows and create a new flow. So we'll just call this 'page approval flow'. Give this a description and add an icon and color to keep it nice and tidy onto our trigger setup. So again, we are going to use the event hook. Whenever an item is updated or created, we wanna fire that. We're gonna use the non-blocking action and for our scopes, we're gonna choose items.create, items.update. So whenever a page is created, we're going to update... and oops, I accidentally forgot to check our collections here. So be very careful about that. We'll go back and add our pages.
Next, let's add our first operation. I'm gonna set this up to be a condition, so you saw me create the condition earlier in the video. We're just gonna call this 'if in review', and all I wanna do here is make sure that that page that's updated or created, the status is equal to 'in review'. And if that is true, we're going to notify the content manager. So I'm gonna use the Directus template condition here, and I'm gonna adjust this a little bit. We are looking for the trigger.payload object, and within that we're gonna find where the status is equal to 'in review'. So now that we've got our condition set up, let's save that and then we'll go in and add our next operation, which is actually going to be to email the content manager. So we'll just call this 'email content manager' and use the Send Email operation. We'll go ahead and add the email address for the content manager here. Make sure that you press enter to save the email address.
Next we'll enter in a subject. Very simple, and I'm gonna change the type here just to WYSIWYG instead of markdown. But you could use either or here. So I have a templated email. I'm just gonna copy paste here. 'Hello team. The following article has been submitted for review. Please log in and...' I'm gonna go ahead and copy this and add a link as well. So here I've got the trigger. These are the keys that we're triggering on, and I'm just gonna pick the first value from that array and hit save. So now we've got our operation. This looks great. Let's go ahead and save this and test it out.
So we'll just hop over to our pages. We are going to change the status for this to be 'in review'. Now let's check to see if this actually worked. We'll go back to our flow. We'll just open up our logs and I can see here's the payload. So there's the key of the page that triggered this. Did it pass? Yes, it did, because I can see that the email was sent and if I open up that email, we could see here it is, and I click on this and it takes me to that specific page inside Directus.
Preparing for Content Scheduling
That launches us right into our third and final use case for this video, scheduling content to be published at a future date. Let's say I'm the content manager. I've reviewed this content. It looks great. I want to set a publish date for three weeks from now or two weeks from now, how do we achieve that?
Well, first we've got a status for scheduled, but we also need to add a date to our content model for date published. Let's go to our settings. We'll just discard this for now and we'll go to our data model. I'm looking for our pages and let's create a new field, a date time field, and we'll just call it 'date published'. Great. Okay, so I'm gonna hit save and maybe I move this up just a little bit so it's at the front.
Now I'm gonna go back to our pages and assuming that this page is approved, we're gonna move it from 'in review' to 'scheduled', and then we're gonna set a published date. So if I wanna do this next week, I could do that and just set the 25th for now. I'm just gonna pick right now so that we can take a look at this. So I'll save this. Now we've got the status is scheduled, we've set a published date. Let's go and build a flow to get this done.
Use Case 3: Building the Content Scheduling Flow
So we'll go into our flows. We'll create a new flow and let's call this 'publish scheduled articles'. Super simple. And then we'll also add a description, an icon and a color, again, just to keep everything organized and tidy. Next, let's move on to our trigger. So in this case we're gonna use the scheduled cron trigger, and here we've got a specific syntax that we have to follow. I would probably recommend doing this every 15 or 30 minutes, but I am gonna run this every 15 seconds for now just so we can speed up that process.
So we've got our cron trigger, let's create our operation. We're just gonna call this 'update articles' and we're gonna use the Update Data operation. We'll pick the pages collection, and here I'm also gonna make sure that I check the box for 'Emit Events' because we want to make sure that this will trigger the items.update event that we're gonna use to publish our articles in the other flow that we created.
Emit events can be somewhat dangerous, so make sure that you avoid creating an infinite loop and do not emit an event that triggers its own flow. For the payload, we're just gonna set this to 'status is equal to published'. And our query is what's going to allow us to choose the records or the items that we want to update within our pages collection. Here I'm going to use an AND group to filter based on two conditions: status of the page is equal to scheduled, and the published date is less than or equal to the current time.
With that, this operation looks good. We'll go ahead and save the operation and then we can save the entire flow as well. So now that this flow is active, we can wait around for 15 seconds based on that trigger that I set, and we'll refresh the page to check our logs. So I open up the logs and we could see there's the payload of the page that was updated. There's the details, and if I switch over to our pages, we could see that the example page is published and we could see that a build was indeed completed just recently inside Netlify.
Conclusion and Next Steps
That's it for the third and final use case in this video on using Directus flows for headless CMS. Make sure you check out all the other videos in this Flows series. And do not forget to sign up for the Directus newsletter and go ahead and hit like and subscribe on our YouTube channel.
