In the previous article, we have setup Directus on our local machine. In this article let us create some collections. Collections in Direcuts represents a table in the database. Consider collections as a group of similar items. When we are creating a collection, we are actually creating a skeleton in which we have to enter data. When we create a collection a table gets created in MySQL to hold data we put in the collection.
While naming a collection, keep in mind that the collection name can not be changed through the App. Doing that forcefully through the database or another mechanism will break the API endpoints. So, be cautious when providing a name to the collection. Let us see how can we create a collection.
Creating a collection in Directus
As we are creating a sample application related to brand, let us create a collection of product. Follow below steps to create the collection:
- Click on the gear icon on the left menu.
- Click on Collections and Fields.
- Click + icon on the top right.
- Supply the name of the collection. In our case we are creating a product collection.
- When we create a collection (table), we get some ready to use default fields. If you want to use them just toggle them on.
- Hit create to create the collection.
- Now we have a collection.
Next steps are to configure the collection and add new fields in the collection.
Configuration of collection
There are a few configurations that you can do for a collection. Let us see them one by one.
- Note: This is optional, you can take an internal note on why you have created this collection, where you will use it, and so on. The details here are not visible anywhere.
- Hidden: By default when we create a collection it is always visible, but we can also hide a collection. The collection will not be visible on front end but we can access the data of these collections. Some of the typical scenario where you want to hide a collection is mapping table.
- Single: By default when we create a collection it is set to allow multiple entries in the collection. But there could be certain scenario where we want to keep just one record or entry in the collection. The typical scenario could be About page or home page of your project.
- Translations: You can use this to translate the collection name in different languages. To create a translation of your collection, click on the Create Translation button, choose a locale, and type the translation text in the selected locale. However, the translation will only be used in the CMS, It does not apply to the API or table names.
- Icon: You can assign an icon to each collection. This is used in the navigation sidebar on left. If you don’t select an icon, you will see a box like icon before your collection name. The icon is applicable just to the CMS, it is not available to the API.
Once you have configured a collection it is time to add some additional fields to the collection. When we created the collection, we just had default fields. Let us add some additional fields.
Add fields to Collection
Since we have created a collection of Product, let us add below fields to the collection:
- Display Image
- Discounted Price
Follow the below steps to add more fields to the collection. I am showing how to add Name, the rest of the fields can be added in a similar fashion.
- Click on the New Filed.
- Select an interface, An interface is a type of field we want to create in our collection. Since we are adding a field for Product Name, we will select Interface as Text Input.
In the next screen, we have to enter the name of the column, in our case, it will be Name. Make it a required field.
- Click Next and proceed further.
- On the last screen (Options Screen), just click save.
- You will be taken back to the Collection screen.
- You can continue to add other fields to the collection.
- Use below interfaces to add the other fields:
- Description: WYSIWYG
- Display Image: File
- MRP: Text Input
- Discounted Price: Text input
- Offers: WYSIWYG
Interfaces and fields are a very vast topic in Directus, We will see them in detail in coming articles. There are some interfaces that deserve a single article on it.
Deleting a collection
The entire collection can be deleted by hitting the delete icon on the top right of the collection page. If you delete a collection, you will lose all the records within that collection. Deleting a collection is an irreversible action. Once you confirm it to delete, it is gone. Be cautious and use your judgment when to delete a collection.
Entering data in the Collection
We have created the collection, let us now enter some data in the collection. Follow below steps to enter some data to our product collection.
- Click on the Product menu on the left.
- Since you are about to enter your first entry, you will a blank screen. Click on the + icon on the top right. That will take you to creating item screen.
- You get all the fields you added in the product collection.
- Enter all the details and save the entry by clicking on the tick mark on the top right.
- You are all set, you have just entered your first record.
- You can add more records in the same manner
Editing and Deleting a data in the collection
Follow below steps to edit or delete an entry from a collection
- Navigate to the collection.
- Look out for the entry you want to edit or delete.
- Click on the entry to go to the edit screen.
- On the top right, you will see two icons one for saving (gets enable if you change anything) and delete (in red).
- You can perform the required operation.
If you want to delete entries in bulk, you can do that from entries listing screen by selecting all the entries by clicking on the check boxes in respective row.
So, that is all with the collections. In the next article we will see how can we create pages for our website using collections.
That’s it Folks on this topic. Let us know your comments on this article in the comment box below. Kindly like our facebook page, follows us on twitter and subscribe to our YouTube channel for latest updates.