<p>This course is just a collection of tips and tricks for Directus 9 platform.</p>

Directus 9

Viewer named Robert commented on one of the videos asking how to create a multilevel navigation in Directus 9 so that you can consume it through the API and that way create a navigation on the frontend. 

Unfortunately I wasn’t able to find a perfect no code way of doing this, so I don’t think that Robert will be very pleased with the result, since he already knows about this method. Sorry Robert.

However I think this is a good enough way to create multilevel navigation, it’s not perfect by any means, but it is good enough if your site or app does not heavily depend on multilevel navigations with a lot of levels. 

But if you need a way to allow users of your backend to create navigations, like Main navigation, Footer navigation, maybe navigation on a sidebar, with 2 or 3 levels - this way of doing things is going to be more than adequate. 

Let me show you how.

### Setup

For this demo I’m using Directus version 9.14.5, but I guess this method should work on any version that supports Repeater fields.

First of all I will create a collection called Menus.

This collection is going to have only two fields - one is going to be called title, so that we can name our menus and so that we can filter them by name on the frontend.

The other field is going to be a repeater field and that is where we are going to define our menu items. 

Let’s create repeater field, give it a name of `menu_items` 

Next let’s create two fields for the repeater - they are going to be called `label` and `url` and both are going to be just strings with input interface.

And by just doing this we created a system for single level navigation. 

However we want a multilevel navigation. So let’s create one more field, and this one is going to be of type JSON and with the repeater interface. We are going to call it  `submenu` and it is also going to consist of two fields called `label` and `url` .

And I think you can now see where I’m going with this. If you need three levels you would add one more repeater here and so on.

Of course if you need unlimited levels and you depend on that functionality, then maybe it’s best to try to find a code based solution for this problem. 

But from my experience two or three levels are going to be enough for at least 90% of cases. 

Ok, let’s save this and test it out.

### Create Menu

We go to Menus, create new add a title of “Main navigation”. 

And then on “Menu Items” you click “Create new” and start creating your menu items.

The first one is “Home” and it’s going to be only single level.

The second one is “About” and here we are going to add a few subitems. 

And let’s create one more, called “Contact” which is going to be single level item.

And that is it.

### API response

Let’s see how this is going to look when we try to get the menus from the API. 

First we go to “Roles and Permissions” . Click on “Public” and allow everyone to be able to see our navigations. 

Now go to `/items/menus`. And here we can see how this looks in JSON format that we can consume on our frontend.

One nice thing is that we can rearrange the menus in the backed, and that will reflect on our data. 

So now we have “Home”, “Contact” and “About”. 

You can do the same thing with submenu items.

Nice.

In this video I'm going to show you how to create multilevel navigation in Directus 9, without any code.

How To Create Multilevel Navigation In Directus 9 (NO CODE)

Flows are a huge concept and allow us to do large number of automation tasks. Because I can't cover everything in one video, we are going to focus on sending emails when something happens in our application.

Be sure to let me know down in the comments what other Flows you would like to see on this channel. 

### What are flows

Flows are a low code way of setting up automation tasks in Directus. They consist of triggers and operations.

Triggers are actions or events that are happening inside your Directus app like when something is created, when there is an incoming webhook, when the cron job has started and so on.

An operation is an action or process performed within the flow. These enable you to manage data: send off emails, push in-app notifications, send webhooks and more. 

In this video we are going to send an email to the admin, when new user is created

### Mailgun

First we need to setup our email provider - something to send our emails with. In Directus you can use your own SMTP server, sendmail or Mailgun.

For this video we are going to use Mailgun because it is the easiest to setup, and has a free tier. Of course for production websites you would either have to pay for Mailgun or use some other method, like sendmail which should be available on most Linux systems. 

First signup to Mailgun and login into their dashboard. Here you will see your sending domain. Click on it. And then select API. Here you can see your API key and your domain name, which we will need to setup in Directus. 

But first note that sandbox domains are restricted to authorised recipients only. So add your email address here. I will use the one from temp-mail.org.

You will now get an email to verify that address. Verify it. 

Now in the `.env` file of your Directus app add the API key, and Mailgun domain. That is the last part of the "API base URL" in your Mailgun dashboard.

Also be sure to comment out any other mail delivery options if they are enabled in the `.env` file.

Now we can run our Directus app, using `npx directus start` 

### Setup simple flow

Let's now create a flow that will send an email to us once the user has signed up. Or when we create a user. We will create our users through the dashboard, but this will also work when someone registers from the frontend of your app or website. 

Go to settings and click on Flows.

Click on Create Flow.

We are going to give it a name of "Send email".

Description can be "Send email when new user is created".

Ok, now click on the arrow, so we can set up our trigger.

Remember, every flow needs to have a trigger.

As you can see you have a lot of options here, like Event Hooks, Webhooks, CRON jobs and so on. We will choose Event Hook.

And then select "Action (non-blocking)".

For the Scope select `items.create` because we want our flow to trigger once the user is created. 

As you can see there are no users in this short list, so we have to click on "Show 14 more". And then click on Directus users.

Click the checkmark to confirm.

Ok, so now we have or trigger set up, be sure that it is set to be active. Inactive flows will not work.

Click on the plus symbol to create an operation for our flow. We will name our operation, "Mail send".

Directus has a number of available operations like: conditions, create data, delete data, trigger another flow and so on.

We will of course be using Send Email operation.

Fill the "To" field with the email that you verified in the Mailgun. And be sure to press Enter.

Subject is going to be "New user has been created". 

Set the type to be WYSIWYG.

And for the body we can add something like "User has been created" for now. A bit later we will make this a bit more dynamic. For now let's just test if this works. 

Click on the checkmark to confirm it. And then once more to save our flow.

Now let's go to the users and create a new user. 

Check your email. If you didn't get the email, try checking your spam folder. I will check my mail on temp-mail.org. 

Here we have our Email. Great, it works.

### Make it a bit more dynamic

Ok, now I want to make the email that we receive to have a bit more data about the user that was just created. 

Let's go to flows again. 

Click on our flow, click the pen icon so we can start editing, and then again on the Send Email operation. 

When creating flows we have access to the `triggers payload`. To access it we would write something like this in the Body of an email. 

"User `{{$trigger.payload}}` has been created."

Let's save this. And then also save our flow.

Now we will create another user to see what our email looks like now.

Go to users and create a new user.

Great now let's check our email. 

As you can see, here we get full payload object, that we can use inside of our emails. Of course we don't wanna send full object to the admin, but maybe just first and last name.

Let's go to the flows again and edit the Body of an email one more time.

Now instead of `{{$trigger.payload}}` we will write `{{$trigger.payload.first_name}}`  and we will add `{{$trigger.payload.last_name}}` 

Save everything and let's add another user to see if everything is working as it should. 

Let's check our email. 

Nice. Now it says "User Matt Smith has been created". 

### Conclusion

As you can see Flows are very powerful, and can enable you to do lots of cool stuff. We just created a very simple Flow, but flows can have multiple operations and even multiple flows that depend on one another.

Maybe we will cover that in another video, so be sure to let me know what kind of flows you would like to see on this channel in the comments below. 



Flows in Directus enable custom, event-driven data processing and task automation. In this video we are going to send an email to the admin, when new user is created.

Send Emails With Directus Flows

Let us now create another Directus flow. This time just a bit more complex. 

If you don't know what Directus Flows are please check out the previous video for a quick intro.

### Create a newsletter list

First, let's create a new collection and call it `newsletter_list`

Now let's add three simple input fields to it and call them: `first_name`, `last_name`, and  `email`

In this collection we are going to save users that sign up to our app AND opt-in to receive the newsletter, users that don't opt-in will not be added to the collection.

Save the collection, and we are done with our Newsletter list collection

### Add opt-in field to users

In Settings -> Data models click on "System Collections" and then click on `directus_users` 

Create a new toggle field here and give it a name of `newsletter`.

Set the default value to be enabled and Save it.

Now that we have our opt-in field setup, we can start creating our flow.

### The Flow - Trigger

Go to Flows and Create a new flow, we will call it "Newsletter Flow".

The description can be something like "Add user to newsletter list".

Click the arrow so we can set up our trigger.

The trigger will be an Event hook with non-blocking Action.

The scope is of course `items.create` since we wanna trigger this flow once the user has been created.

Click on "Show 15 more" and then select "Directus Users".

Now click the checkmark to save our trigger. 

### The Flow - Operation One

This Flow is going to have two operations, the first operation will check if the user chooses to opt into our newsletter, and then if they did we are going to create another operation that will add that user to the "Newsletter list" collection. Easy peasy. 

Click the plus symbol to create the first operation, and name it "Check Newsletter Opt-in".

For the operation type, we are going to choose "Condition". 

And then in the "Condition Rules" box, we are going to check if the user has opted in using the following code. 


```json
{
    "$trigger": {
        "payload": {
            "newsletter": {
                "_eq": true
            }
        }
    }
}
```

Here we are checking if the `newsletter` field that is coming from our trigger is equal to `true`.

Now click the checkmark to confirm this operation. 

### The Flow - Operation Two

You will notice that this operation has a checkmark symbol and an X symbol on the bottom right side. When you click on the checkmark you can chain another operation that will run if the condition that we created is true, and by clicking on the X symbol you can chain the operation that will run if the condition is false. 

For this Flow, we will only chain the operation if the condition is true, because if it's false, then we don't wanna do anything. 

So now click on the checkmark symbol on the bottom right of the operation box, and we will create an operation that will add the user to our "Newsletter list" collection. 

We will call this operation "Add user to Newsletter list".

For the operation type choose "Create data".

For the collection, we are of course going to select "Newsletter List". 

In the Permissions field select the "From Trigger" option.

Now, all we have to do is set our payload, meaning we have to send values for the three fields that we created for our "Newsletter list" collection: `first_name`, `last_name`  and `email`.

We are going to get our data from the trigger again, so just add this simple bit of code in the "Payload" input box. 

```json
{
    "email": "{{$trigger.payload.email}}",
    "first_name": "{{$trigger.payload.first_name}}",
    "last_name": "{{$trigger.payload.last_name}}"
}
```

Click on the Checkmark to save the operation, and then once again to save the Flow. 

All that is left to do now is to test this Flow out. 

### Testing it out

Go to users, and create a new user. I will name the user John Doe.

Note that at the bottom of the page you will have the `newsletter` field, which should be enabled by default.

If it's not, enable it.

Save the user. 

Now go to Collections and select "Newsletter List" collection to see if this worked. 

And as you can see user John Doe has been added to our list. 

Great!

Now create another user.

We will call this one Jane Doe. But for this one disable the `newsletter` field. 

Save it, and go to collections one more time.

And as you can see we still only have John Doe in our Newsletter list. This means our Flow works since Jane didn't wanna sign up for our newsletter.

### Activity Log

Before we conclude this video I just wanna show you one more thing that can help you when debugging Flows.

You can always go to Settings -> Flows, and then select the Flow you wanna debug. 

Here on the right side of the screen, you will notice the "Logs" tab, if you click on it you will get some useful information about the Flow. 

Like Options and what is especially useful Payload of your trigger. So if something is not working you can always check the Logs to see what might have gone wrong.

Just note that this will only show up if you choose to track Activity & Logs when creating a flow. 

Also note that Logs are going to be stored in the database so it would be good, to clean them from time to time. 

Maybe you can even create a Flow that will do that automatically for you, wink, wink, nudge, nudge. 

In this video, we are going to create a Flow that will add a user to a newsletter list if they opt in for it.

Directus 9

Directus 9How To Create Multilevel Navigation In Directus 9 (NO CODE)

Directus 9Send Emails With Directus Flows

Directus 9Create a Newsletter List With Directus Flows

Get in touch