PlaygroundFAQDocs

Add New EF Core Entity
With Spiderly

The EF Core entity and its attributes form the foundation of everything in Spiderly. All other components are built and generated based on these entities.

In this step-by-step guide, you'll learn how to create a new entity in your project. This includes adding it to the backend, updating the database, and generating the corresponding frontend code.

1. Open the Backend

Open the backend project located at your-app-name\Backend\YourAppName.sln using Visual Studio.

2. Add New Entity

In the backend project opened with Visual Studio, locate the YourAppName.Business\Entities folder and add a new public class for your entity (e.g., YourEntityName.cs).

The entity class must inherit from BusinessObject<ID> if it supports create, read, update and delete operations, or from ReadonlyObject<ID> if it is read-only and does not support create, update, or delete operations from the UI.

3. Add Your Entity to the Database

In the backend project opened with Visual Studio:
  1. Open Package Manager Console via View → Other Windows → Package Manager Console (or press Ctrl + `).
  2. Inside opened Package Manager Console window set YourAppName.Infrastructure as the Default Project in the dropdown.
  3. Run the command to create a migration:
$ add-migration YourMigrationScriptName
  1. Run the command to apply the migration to the database:
$ update-database

4. Generate Components

Use the Spiderly CLI to generate a default template for your new entity. You can customize the generated files afterwards.

Run the following command from the root of your application:

$ spiderly add-new-page

This will generate the following files:
  1. API Controller - Located in your backend project opened with Visual Studio:
    YourAppName.WebAPI\Controllers\YourEntityNameController.cs
  2. Details Page - In your Angular project (opened with Visual Studio Code):
    src\app\pages\your-entity-name\your-entity-name-details.component.ts
    src\app\pages\your-entity-name\your-entity-name-details.component.html
  3. List Page - Also in your Angular project:
    src\app\pages\your-entity-name\your-entity-name-table.component.ts
    src\app\pages\your-entity-name\your-entity-name-table.component.html

5. Define Routes for Your Page

In the frontend project opened with Visual Studio Code, locate the src\app\app.routes.ts file and add new child routes under the layout component's children array:

6. Add the Page to the Navigation Menu

In the frontend project opened with Visual Studio Code, open the src\app\business\layout\layout.component.ts file. Locate the this.menu array and add a new menu item object for your entity. Use the following structure as a reference: