Introduction: Building a Combined CRM & Project Tracker
Hi, Bryant here for Directus and in this video we're going to use the Directus data studio to build a real internal app together in less than 15 minutes.
Yes, I am serious and yes, it is awesome.
So enough talking. Let's dive in and build our app, an internal CRM slash project tracker.
Now there's plenty of apps out there that do one or the other, but there's none that really combine both features well enough for our team. So we're gonna build our own.
Project Setup and First Collection
So the first step here is just creating a new standard cloud project from within my Directus Cloud dashboard. I'm going to use the Performance node type so that this thing is really speedy once this project spins. You'll get an email with login credentials, so let's go ahead and log in.
Once you log in, you'll notice you're working with a blank slate. So let's create our first Collection. We're gonna call this the company's collection. For the primary key field, I'm gonna use the type generated UUID. So this is just a random string of characters instead of a numeric value.
For the optional system fields, I usually check all the boxes here because these are simple enough to remove later. All right, so let's create our first field in this collection.
Designing the Companies Collection
We're going to do the name of the company here, so let's just call it name. This is gonna be a string type, and we're gonna make this required whenever someone is creating a new company. I can also give this an icon just to keep things nice and tidy.
Now let's add some address info to the company's collection. I'm gonna use the detail group field to organize all of my different address fields together into a single field that the user can toggle to be open or closed. That's a really nice feature. So once we add that address info group, now I'm gonna add all the individual fields for the address line one, address line two, city, state, and postal code. These are all input types using the string data type.
And if I want, I could take the time to fill out a lot of additional information, or I can go ahead and scaffold this out and then come back and clean it up later. So with all these fields added, now I'm going to go in and make the user interface a little cleaner. Directus has formatting options where I can make fields half width, full width, or to fit the size of the empty space on the screen. And then I'll just drag these into our field group to make sure they display exactly how I want.
Just to mix it up a little bit, let's add a field for the logo of a company if we choose to upload that. So I'll just scroll down to the relational section and I'll use the image field type. We'll just call it logo for the key. And I'll go ahead and hit save.
Before we do any more work on our company's collection, let's go back and create our next collection for contacts. So I'll just call them contacts. Again, we're gonna use the generated UUID for the primary key field type, and I'm gonna add all the default fields.
All right, so we've got a contact, obviously we need a name. Let's go in and add input fields for first name and last name. Bonus points if you make those half width and on the same individual line in the interface.
After we get the first name and last name, let's go with an email address, so I'll just type in email. I'll give a nice little at symbol for the email so the user clearly knows what that is. And I'm also going to make this required, so if you add a contact, you've got an email address.
All right. Next, let's add a field for the phone number and we'll also give a nice phone icon on the left side. And we'll also want to add a job title field so we can know whether a contact is the owner of a company or the manager or whatever their position is. We'll also go in and add an avatar field, so if we want to upload a profile picture for this contact, we'll create a field for that as well.
Let's jump into the company's collection and link it to our contacts collection. Because we're in the company's collection and one company could have many contacts, we're gonna use the one-to-many relational field type here. The key is gonna be contacts. Our related collection is also gonna be contacts, and our foreign key inside the contacts field is just gonna be called company.
Next, I'll configure the display template, and for this, I'm just gonna use first name, last name, and email. Let's save this one-to-many field, and then I'm gonna open up the contacts collection just to make sure that our data model looks how we want. So I can see we've got the company field there, and this is the inverse relationship, so it's a many-to-one. And while I'm here, I'm just gonna do some cleanup. I can see that this field is also hidden, and I'm gonna want to show that on the detailed page.
Now it's time for the moment of truth. Let's open up our company's collection and create a new item to test how it works. So we'll add a name for the company. You can see we've got our nice address info Field Group that toggles to open or closed. We'll add some address info for this specific company. You can also see that we can upload a logo if we choose to.
So I could just drag and drop that, and double below that, I could see my list of contacts. Let's create a new contact. I'll just use myself as an example here. Add all the standard details, and then we're going to save this contact. But we're also going to save the company item as well. And boom, there you go. We've got contacts and companies.
Building the Projects Collection & Company Link
Let's create our next collection, which will be projects. Again, for the primary key field type, we'll use generated UUID and for the optional system fields. Again, I'm just gonna select all these because I can go in and remove them if I don't need them. Our first field in this data model is gonna be the project name. I'll just shorten it to name, really simple, and save this.
Next we're going to add a description and because I may want to use rich text formatting, I'm gonna use the WYSIWYG field type for this.
Next, let's add a couple of dates for this. So, on a project level, I want to know when does a project start? When does a project end? I don't really need the time, so for the type, I'm just gonna choose date and we'll do a start date field. And I'm also going to create an end date field using the same field type of date. Simple enough, Let's clean up the width so everything looks nice for the user. And we'll dive into our relational fields.
So each project belongs to a company and a contact. Uh, so in this case, we're gonna use a many-to-one relational field, so there could be many projects for a single company. So the related collection will be companies, and for the display template here, I'm just gonna choose the name of the company and that's what I want to display. Now, Directus has this easy Field Wizard, but they also have an Advanced Field Creation Mode, which I'm gonna open up in this case. Because I want to create the corresponding field for projects in the company's collection as well. So I'll go to the relationship tab. I could see the corresponding field there. I'm just going to click the checkbox to add a projects field to the company's collection.
I'll just make sure we adjust the display to display the related values. And again, I'm gonna make this half width so I could fit more information on the screen.
The next field we're gonna create is a many-to-one relation for our contacts. I'm gonna call this the primary contact because I may add more contacts later. And for the display template, I'm gonna use the same format that I did previously. As we save this field, I think that takes care of the project's data model.
Designing the Tasks Collection
Let's back up and create our last data model. Our last Collection for Tasks. We'll use the generated UUID field type, add all the optional system fields, and you know the drill. We'll jump right in and create our first input. We'll just call it title. So what's the title of this task? So next I'm going to add a WYSIWYG field for the description in case I wanted to use some nice, bold formatting within the task description.
The next field that we'll create will be a due date field, and I am gonna leave this set to date time for the type, because I may want to actually choose a specific time, like 3:00 PM on a Friday that this is due. We also want users to be able to upload files. And you've got two choices for the field types associated: file or files. Uh, I'm going to use files in this case and open up the advanced field creation mode to show you the difference. If you just use a single file relational field Directus uses a one to many field type, but if you want multiple files, Directus actually creates a junction collection so that you can take advantage of all the SQL goodness that is already baked into the platform. If you want to rename this junction collection and the associated primary and foreign keys, not a problem, just uncheck auto fill, and you can change this to whatever names that you would like. I'll finish this out by making sure all the other tabs are correctly filled out. Boom. Now we've got the ability to upload multiple files to a task.
Our next field is going to be the assigned to field, so we're gonna assign one of our users to complete this task. And for the collections, I don't see the users here and I have to actually expand the system collection because the users are under the Directus users collection. All of our team members will be stored there. That's why I'm gonna pick Directus users as the collection. And I'm going to use just first name, last name for the template.
Linking Tasks to Projects
So we're also gonna add one more relational field that is going to be for the project. A task belongs to one project, so there could be many tasks for one project. So we are going to use the many-to-one field. We'll use the project as the key, select the projects related collection, and just use the project name as the display template. I'm also gonna open up the advanced field creation mode so I can add the corresponding field to the projects. I want the task to be listed whenever I open up a project. Things are looking pretty good here. So let's actually test this out.
Full System Test: Creating a Project and Task
Let's create our project. So I'll use this video series as an example. We'll call this the video project, give it a start and end date, and then we'll choose a company and a primary contact. And then we'll go in and actually create a task for this project. So we've got the title, we've got that nice rich text formatting on the description field, and I can even select a user that we're going to assign this particular task to. We'll set the due date. And I'm not gonna upload a file in this case, but I'll go ahead and save everything.
So there you have it. There is your internal CRM project Tracker app, all in about 13 minutes.
Conclusion and Next Steps
How quick and easy is that? It's insane. You didn't see me write a single line of code. And if you're a developer, you also have an API now that is ready to go.
So for next steps, you're gonna want to check out our layouts overview video so you can learn how to configure the different views for your data. And things move very quickly here at Directus. So if you wanna stay up to date on all the latest and greatest and receive helpful content, make sure you subscribe to our newsletter.
