1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241---
id: c773724c-cc1b-4f79-bc46-208b26e8fd7f
slug: schedule-future-content-with-directus-automate
title: Schedule Future Content with Directus Automate
authors:
- name: Bryant Gillespie
title: Growth Engineer
description: Learn how to set content to be scheduled on a future date with Directs Automate.
---
## Explanation
This guide explains how to schedule content to be published on a future date for a statically generated site (SSG).
We'll be using [Flows](/guides/automate/flows) to publish articles when the current date matches the published date.
First we'll schedule a flow to run at regular intervals.
Next we'll check the timestamps of items with our content collection. And we'll update those the status of those items
whenever the published date is less than or equal the current timestamp.
Last, we'll kick off a new deployment of your static site at your hosting provider using one of the recipes below.
- [Triggering a static site build at Netlify](/tutorials/workflows/trigger-netlify-site-builds-with-directus-automate)
- [Triggering a static site build at Vercel](/tutorials/workflows/trigger-vercel-site-builds-with-directus-automate)
## How-To Guide
::callout{icon="material-symbols:info-outline"}
You’ll need to have already created a collection for your site content like `articles` or `posts` or `pages` with a
field `status` that controls the published state.
::
### Add a Field to Control Publish Date and Time
1. Under Settings, go to Data Model.
2. Choose your content [Collection](/guides/data-model/collections).
3. [Add a new field](/guides/data-model/fields) to your content Collection.
a. Choose **Timestamp** for the Type.
b. For the Key, use something relevant like `date_published`.
c. Save the Field and your Collection.
### Add Some Content and Set a Publish Date
4. [Create or update an Item](/guides/content/editor) inside your Collection
a. Set the `status` field to `scheduled`
b. Add a date for the `date_published` field
c. Add the content for other fields and save the Item
### Create and Configure Your Flow
5. [Create a new flow](/guides/automate/flows)
Give it a memorable name and short description like `Publish Scheduled Articles`.
6. [Complete the trigger setup](/guides/automate/triggers)
a. For **Type**, Select Schedule (CRON). This will trigger this flow at regular
intervals of time.
b. Add your **Interval** in proper CRON syntax.
**Examples**
- `* */1 * * * *` - Would trigger this flow every minute
- `* */15 * * * *` – Would trigger this flow every 15 minutes
### Add an Operation to Check The Published Date and Update Data
7. [Create a new operation](/guides/automate/operations)
a. For the type of operation, select **Update Item**
b. **Name** your operation, i.e. `Update Articles` or similar.
c. Under **Collection**, choose your content collection i.e. `Articles` in our example.
d. Check **Emit Events**
::callout{icon="material-symbols:warning-outline-rounded"}
Emit events will trigger an `item.update` event in this flow. Be careful when using it in your flows to avoid
creating infinite loops where flows continuously trigger one another.
::
e. Set your **Payload**
```json
{
"status": "published"
}
```
f. Add your filter rule in the **Query** field.
```json
{
"filter": {
"_and": [
{
"status": {
"_eq": "scheduled"
}
},
{
"date_published": {
"_lte": "$NOW"
}
}
]
}
}
```
g. Save this Operation
h. Save your Flow
### Trigger a New Build for Your Static Site
In this recipe, we'll terminate the flow here because we'll use a separate flow to trigger the build or deployment
process for your site. This approach helps keep everything modular and easier to maintain.
If you haven't already, you'll want to configure one of the recipes below.
- [Triggering a static site build at Netlify](/tutorials/workflows/trigger-netlify-site-builds-with-directus-automate)
- [Triggering a static site build at Vercel](/tutorials/workflows/trigger-vercel-site-builds-with-directus-automate)
You checked Emit Events in the operation during Step 7. This will emit an `item.update` event which is a trigger for the
Flows in the recipes above.
## Final Tips
**Tips**
- Make sure to test your flow several times to ensure everything is working as expected.
- As you add other collections that are published on your static site or frontend, make sure you update this flow to
include those collections in your Trigger.
## Dynamic Sites
Scheduling content has fewer steps for a dynamic site. Since you are calling your Directus API at the time that a
visitor requests a page from your site, all you need to do is add a filter to your query.
### Check the Published Date When Calling the Directus API
- When calling the API, add a filter rule that checks the `date_published` field.
- Use the `_lte` operator to filter for dates that are less than or equal the current date/time.
- You can use the dynamic variable `$NOW` to get the current timestamp.
#### Examples
::callout{icon="material-symbols:info-outline"}
In these examples, we're using an AND logical operator to only return
records that match both conditions. This provides a little more control over your published content by ensuring only
articles that have a publish date AND have the `published` state are displayed on your site.
::
Using the [Directus JavaScript SDK](/guides/connect/sdk) (preferred)
```js
// Initialize the SDK.
import { createDirectus, rest, readItems } from '@directus/sdk';
const directus = createDirectus('https://directus.example.com').with(rest());
const articles = await directus.request(
readItems('articles', {
filter: {
_and: [
{
status: {
_eq: 'published',
},
},
{
date_published: {
_lte: '$NOW',
},
},
],
},
})
);
```
Using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) (JavaScript)
```js
const response = await fetch(
'https://yourdirectusurl.com/items/articles?' +
new URLSearchParams({
filter: {
_and: [
{
status: {
_eq: 'published',
},
},
{
date_published: {
_lte: '$NOW',
},
},
],
},
})
);
const articles = await response.json();
```
## Final Tips
**Tips**
- If you're not receiving the data you expect, double-check your filter rule syntax.
- Also be sure you have enabled the proper permissions for your content Collection.