---
title: "How to create a new Element managed by the Platform"
canonical: "https://onesaitplatform.refined.site/space/DOCT/2220815066/How%20to%20create%20a%20new%20Element%20managed%20by%20the%20Platform"
format: markdown
---
In this post we are going to explain how to create a new element managed by the Platform. As a demostration we are going to create the concept of Model.

## Add new entities to ConfigDB

There is a module within the Platform where all the JPA Entities and JPA Repositories are created, its name is **onesaitplatform-config-model**:

![image](media://0f50a76d-bd6f-4828-85be-d8b9b1a1afe2)

The entities are created in the package **com.minsait.onesait.platform.config.model**, so you have to create in this package a @Entity class **Model.java:**

![image](media://f01dcfa1-e6b8-4218-a175-7f15b3b8125c)

You have to add the **@Table** annotation, where is defined the name of the table, and it's also necessary to extends the class **AuditableEntityWithUUID,** where the self-generated ID field is defined:

![image](media://e16cb803-783d-48fc-88f5-a705db3267a6)

The next step is to define the fields of the entity. We will see a list of tags:

- **@ManyToOne**: to define the foreign keys, in this case we are using this tag  for the fields 'user', 'notebook' and 'dashboard'.
- **@JoinColumn: **indicates that a given column in the owner entity refers to a primary key in the reference entity
- **@NotNull: **to specify that this field cannot be null.
- **@Setter / @Getter: **to generate setter/getter automatically.

![image](media://601c9b32-3869-4099-a2ff-dab724df22dd)

We have already defined our JPA Entity, the next step is to define its corresponding JPA Repository. The JPA Repositories are defined on the package **com.minsait.onesait.platform.config.repository,** so you have to create in this package the interface **ModelRepository.java** and define the methods you will need:

![image](media://29c98b19-3c82-4e06-8d51-83ab4ff1b521)

> ℹ️ *Don't forget to extends this interface of JpaRepository<Model, Long>*

Finally, there is a module within the Platform that is in charge of creating and populating the tables on MySQL database defined on the onesaitplatform-config-model module, its name is **onesaitplatform-config-init**:

![image](media://9aa90e50-c5a5-40e5-b138-ea7ac73a298d)

We have to execute the **SystemConfigInitApplication.java** as Java Application. If everything goes OK we can open the **MySQL Query Browser **and see our table created:

![image](media://54bea600-b11a-441f-95be-f2b4d2259f13)

## Add a new menu option

We are going to create a new menu option for this funcionality. The menu configuration is defined in a JSON file in the **onesaitplatforn-config-init** module. 

Go to **src/main/resources/menu**

![image](media://f5548338-e1b2-48fa-9005-5f5e0f158b96)

Here, we have a JSON for each role of the platform in order to each role has his own menu. We are going to add our submenu option to de Administrator role and inside of the menu 'Development'

We open the **menu_admin.json** and add the next code:

![image](media://9dc53671-70e1-4d28-9219-d574edc53fc3)

Finally, we have to execute the **SystemConfigInitApplication.java** as Java Application again.

## Add the funcionality to the ControlPanel

Once the entities have been created, the next step is to add the funcionality to the ControlPanel. The ControlPanel is the module **onesaitplatform-controlpanel,** this module is in charge of managing the Model View Controller (MVC):

We'll create in this module the package **com.minsait.onesait.platform.controlpanel.controller.model:**

![image](media://1ed47de4-a34c-46f2-ba5e-0d7b0156eb4f)

In this package we create the @Controller class **ModelController.java**

![image](media://dc4ef429-824b-42ed-92f4-46652ae45781)

> ℹ️ *We are using the annotation @RequestMapping of Spring Web, t*<span style="color: #2b3636">*his annotation maps HTTP requests to handler methods of MVC and REST controllers. We also use the annotation @Slf4j for log.*</span>


The method we are going to create is for listing all the models that the user has. The controller will need another class for doing all the business logic, for this, we will use the module **onesaitplatform-config-service **where we have to create the package **com.minsait.onesait.platform.config.services.model **and inside of it we are going to create an interface and its implementations where we'll define all the functions necessary to implement our new funcionality:

![image](media://f6c8967d-c41a-4848-b5e5-fae027db50e6)

Let's starts creating a method on ModelController class for listing the models:

![image](media://88c1fafe-f1ce-4883-bcf7-32690dd74846)

![image](media://6683aa0d-f314-404d-bae8-59fc2f7b5fbd)

How you can see, we use the ModelService to get all the models of the user with the method 'findByUserId'. If we open the class thats implements the ModelService interface we'll see how to use the JPA Repository 'ModelRepository', that we created at the beginning, for getting the models:

![image](media://04711058-be39-4017-b826-7a9a7a53fe92)

![image](media://1a50666d-2993-44d5-b40e-788934519b11)

Another important class is 'org.springframework.ui.Model', this class allows us to pass values to the front. In this case, we are passing the list of models to which the user has access:

![image](media://c3507a35-5509-42d5-bbeb-16da1b66cb1f)

In the method **list** of the ModelController class you can see that we return a string **'models/list'**, this is the HTML file where we are going to represent the list of models, so the next step is to create the front HTML page for listing all the models.

We create the folder **models **in **src/main/resources/templates **of the controlpanel module:

![image](media://ff83155b-4224-43e1-ade6-04776cf06b86)

And inside of this folder, we create the file **list.html**

![image](media://305b8d36-8185-4141-a499-8e41d4ba790d)

If you remember, we used the class **org.springframework.ui.Model** to pass the list of models from controller to the front part, and now we are going to represent them in the HTML file.

> ℹ️ *To create the HTML file we are going to use *[***Thymeleaf***](https://www.thymeleaf.org/)***.***


![image](media://60a27811-3062-4ee3-b4e6-0f41a95fa0af)

Let's analyze the previous HTML code.

- In number **1,** we are saying that for each element of the models list, we are going to create a row in the table. You realize that we are using the **${models}** annotation, that matches with the name we gave to the variable on the controller.
- In the next numbes, we are using one of the elements of the list of models and we are accessing their properties (identification, description...) to represent them in the corresponding columns.

Now is the time to see what our table looks like, for this we have to start the controlpanel module.


![image](media://622690c7-76b4-4e4b-8a3f-4caad3945f28)

We have to execute the **ControlPanelWebApplication.java** as Java Application. If everything goes OK we can see on the console something like this:

![image](media://29498685-252b-4250-9f8c-aba29850e768)

We access the URL [http://localhost:18000/controlpanel/login](http://localhost:18000/controlpanel/login) and insert a valid user/password. Then go to the menu option that we are ceated, and we will see our table:

![image](media://1532555a-cd7d-43d6-94bd-593fff5f86b6)