Post
Ask Question

How To Customize Table In Oqtane Module

Introduction

In this article, we'll start with creating a module using module creator and then we'll add a new column to that module table. Before we start these things, I want to make you know that Oqtane works on EF Core and uses data migrations. I hope you have configured Oqtane on your machine, if not you can follow my previous article Oqtane Blazor CMS And Its Configuration to configure Oqtane in your machine. After a successful configuration, you can follow these steps for table customization.

Follow these steps to modify your table,

Step 1

First, we need to run the main project to create a module

  • Login in the Oqtane and open the Admin dashboard by clicking on the gear icon


Figure-Open Admin Dashboard

  • Here you need to choose to Add a new module
  • In the second dropdown, you need to choose the Developer module
  • And in the third dropdown, you need to choose the Module creator
  • Then provide a suitable title for the module. In my case, I have chosen the same module creator you can choose another based on your interest.
  • After filling in the all detail you can create a module creator on the selected page by clicking on Add Module To Page


Figure-Adding Module Creator

Then we see that a new module is added to our current page.


Figure-Module creator

Here we provide some detail to add a new module.

  • Fill owner's Name as Shivam
  • Module Name as Employee
  • Description - managing employee data
  • The template as Default Module Template
  • Then click on Create Module


Figure-Adding new Module

After clicking on Create module you'll get a popup like this


Figure- Restart the application

After restarting the application you can check the location and you get a folder with the given parameters.


Figure-Module Created

Our Module is created but it's not activated. To activate open the solution file and build the solution 


Figure-Opening the solution

After building the module rebuild the main project and then Start without debugging.


Figure-Activate Module

After clicking on Activate Module button our module will be activated and we can use it. So our module is created and if we check the database we get the following fields


Figure-Default Module schema

Our Actual work starts from here now follow these Steps 

Step 2

Now Add a new class in the migrations folder with the name 01000001_AddAddressColumn.


Figure-Migration Class

And add the following code,

using Microsoft.EntityFrameworkCore.Infrastructure;
using Microsoft.EntityFrameworkCore.Migrations;
using Oqtane.Databases.Interfaces;
using Oqtane.Migrations;
using Shivam.Employee.Migrations.EntityBuilders;
using Shivam.Employee.Repository;

namespace Shivam.Employee.Server.Migrations
{

    [DbContext(typeof(EmployeeContext))]
    [Migration("Employee.01.00.00.01")]
    public  class _01000001_AddAddressColumn : MultiDatabaseMigration
    {
        public _01000001_AddAddressColumn(IDatabase database) : base(database)
        {
        }

        protected override void Up(MigrationBuilder migrationBuilder)
        {
            var EmployeeEnitityBuilder = new EmployeeEntityBuilder(migrationBuilder, ActiveDatabase);
            EmployeeEnitityBuilder.AddStringColumn("Address", 2000, true);
        }

        protected override void Down(MigrationBuilder migrationBuilder)
        {
            var EmployeeEnitityBuilder = new EmployeeEntityBuilder(migrationBuilder, ActiveDatabase);
            EmployeeEnitityBuilder.DropColumn("Address");
        }
    }
}

In this code, we have implemented the multidatabaseMigration interface and it has two methods Up and Down When we update the version then a new column will be added if change the version downwards then the column will be removed.

Step 3

Next, we need to change the package version. To change the version need to follow these steps

  • Right-click on shivam.shared.employee
  • click on properties


Figure-Properties

Then click on package>>general and change the package version from 1.0.0 to 1.0.1


Figure-Change version

Then repeat the same steps with the server and client project. After that open .nuspec file under the package project and change version 1.0.1 from 1.0.0

  <version>1.0.1</version>

after saving the file now we need to change the current version from the ModuleInfo.cs under client project>>Modules>>modulename


Figure-ModuleInfo file

for this add the following code to the file,

using Oqtane.Models;
using Oqtane.Modules;

namespace Shivam.Employee
{
    public class ModuleInfo : IModule
    {
        public ModuleDefinition ModuleDefinition => new ModuleDefinition
        {
            Name = "Employee",
            Description = "Employee",
            Version = "1.0.1",
            ServerManagerType = "Shivam.Employee.Manager.EmployeeManager, Shivam.Employee.Server.Oqtane",
            ReleaseVersions = "1.0.0,1.0.1",
            Dependencies = "Shivam.Employee.Shared.Oqtane",
            PackageName = "Shivam.Employee" 
        };
    }
}

now just switch to the release mode and rebuild the project


Figure-Release mode

After a successful build, we can see that a new file is created with the project name.1.0.1.nupkg


Figure-.nupkg file

Then you need to switch back to the debug mode

Note: Oqtane only creates packages in release mode that's why we need to switch release mode by default.

Next just rebuild the main project in another instance of Visual Studio after that if we check the database schema again then a new column is added in the table.


Figure-New Column Added

Now we need to add that property to the model class with the newly added column name, so we can access that column in our project


Figure- Adding New Property

Conclusion

Now we have successfully added a new column in the Oqtane module, we can add multiple columns in the same manner. To add some data values you need to make changes in the Edit.razor file.


Similar Articles