Adding New Entities and Child Tables

This membership isn't free! Let's create a Membership Payment entity to track all the payments related to a Member.

In this section, you'll learn how to:

• Create a New Entity
• Create a Migration Class
• Configure a Child Table
• Configure a Filter for the Table
• Implement a Script to Call an Endpoint

Create a New Entity

1. Navigate to Shesha.Membership.Domain > Domain
2. Right click on the Domain folder, Add > Class
3. Give your class the name of: MembershipPayment.cs, and click on Add

This is how your class should be constructed:

using Abp.Domain.Entities.Auditing;
using Shesha.Domain.Attributes;
using System;

namespace Shesha.Membership.Domain.Domain
{
    /// <summary>
    /// A member's membership payment
    /// </summary>
    [Entity(TypeShortAlias = "Mem.MembershipPayment")]
    public class MembershipPayment : FullAuditedEntity<Guid>
    {
        /// <summary>
        /// The unique member
        /// </summary>
        public virtual Member Member { get; set; }
        /// <summary>
        /// The payment amount
        /// </summary>
        public virtual double Amount { get; set; }
        /// <summary>
        /// The date when the payment was made
        /// </summary>
        public virtual DateTime? PaymentDate { get; set; }
    }
}

Create a Migration Class

1. Navigate to Shesha.Membership.Domain > Migrations
2. Right click on the Migrations folder, Add > Class
3. Create a new migration class with a file name following this format: M[YEAR][MONTH][DAY][HOUR][MINUTE][SECONDS].cs e.g. M20231124090300.cs for 24 November 2023 08:53:00.
4. Add the below code:

using FluentMigrator;
using Shesha.FluentMigrator;
using System;

namespace Shesha.Membership.Domain.Migrations
{
    [Migration(20231124090300)]
    public class M20231124090300 : Migration
    {
        /// <summary>
        /// Code to execute when executing the migrations
        /// </summary>
        public override void Up()
        {
            Create.Table("Mem_MembershipPayments")
                .WithIdAsGuid()
                .WithFullAuditColumns()
                .WithForeignKeyColumn("MemberId", "Core_Persons").Nullable()
                .WithColumn("Amount").AsDouble().Nullable()
                .WithColumn("PaymentDate").AsDateTime().Nullable();
        }
        /// <summary>
        /// Code to execute when rolling back the migration
        /// </summary>
        public override void Down()
        {
            throw new NotImplementedException();
        }
    }
}

You can check out Fluent Migrator for more options about database migrations.

5. You can run your application by going to the menu and selecting Debug > Start Debugging or by clicking F5
6. The application should open in your browser on the default Swagger API page.
7. Search and navigate to the Member endpoints that have been dynamically created by Shesha.

Read more about dynamic APIs here

Updating Configurations

Details View

1. Navigate to the member-details form designer
2. Search and drag in a Datatable Context component from the Builder Widgets below the existing details panel

You can find more information about implementation of the Datatable Context component here

3. Set the Entity Type property of the Datatable Context to the newly created Membership Payment entity

4. Search and drag in a Panel component from the Builder Widgets onto the Datatable Context
5. Give the panel component a label of Member Payments

You can find more information about implementation of the Panel component here

6. Search and drag in a Datatable component from the Builder Widgets onto the Panel

7. Configure columns with the following information:

   Type	Property Name	Caption	Create Component
   CRUD Operations	N/A	leave empty	N/A
   Data	amount	Amount	Number Field
   Data	paymentDate	Payment Date	Date Field

8. Click save on the configure columns modal.

You can find more information about implementation of the Datatable component here

Taking full advantage of Shesha's datatable functionalities, we are going to be utilizing the inline-editing to input the Member Payments.

Check out the inline-editing how-to-guide

9. Update the datatable configuration to the following:

• Can add inline: Yes
• New row init:

  return {
    member: form.data.id,
  };

Let's accessorize our datatable and make it more flexible.

10. Search and drag in the following components from the Builder Widgets onto the the header of the Member Payments panel:
    • Quick Search
    • Table Pager
    • Table View Selector

11. Select the Table View Selector component and update the filter configurations to look like this:

This filters all the membership payments to only show payments of the member whose details we are viewing.

12. Save your filter and toggle the Hidden property to true

13. Save your form

• Using the main menu, navigate to the members-table and refresh your page to make sure your changes have taken effect.
• Drill down into the details view of your recently created member.
• Create a Membership Payment