Modelling an Add (or Edit) Entity Page

In Bloqs, you can declaratively define pages for creating new entities using the EntityEditComponent. This component automatically handles entity creation logic while allowing you to configure which fields are displayed and how they are validated.

---

1. Defining an Add Page

To create a page for adding a new entity, declare a Page in your app model with an EntityEditComponent in the Area.

Example: Add Category Page

.AddPage(
    new Page
    {
        Id = AppConstants.Pages.CategoryAddPage,
        Title = "Add Category",
        Name = "add-category",
        Area = ContainerComponent.Create(
            new EntityEditComponent
            {
                EntityClassId = IdGen.GetEntityClassId<Category>(),
                Area = PageBuilderExtensions.VerticalContainer(
                    PageBuilderExtensions.TextInput(
                        IdGen.GetPropertyId<Category>(nameof(Category.Name)),
                        "Name",
                        true
                    ),
                    PageBuilderExtensions.Html(
                        "The only way to do great work is to love what you do. 👨‍💼"
                    )
                ),
                AfterCancelPageId = AppConstants.Pages.CategoryListPage,
                AfterUpdatePageId = AppConstants.Pages.CategoryListPage,
            }
        ),
    }
);

---

2. Key Elements Explained

EntityEditComponent

The EntityEditComponent is the core of add/edit pages. It provides a form for editing entity fields and handles save/cancel actions.

• EntityClassId: Defines which entity type is being created or edited.

• Area: Declares the form layout (usually a vertical grid).

• AfterCancelPageId: Defines where the user is redirected after cancelling.

• AfterUpdatePageId: Defines where the user is redirected after saving.

---

Area Layout

The Area defines the form fields that are shown when creating or editing an entity. In this example, it is a vertical grid layout.

Example:

GridComponent.Vertical(
    [
        new TextInputComponent
        {
            PropertyId = AppConstants.Properties.CategoryNameProperty,
            IsRequired = true,
            Label = "Name",
        },
        new HtmlComponent
        {
            HtmlContent =
                "The only way to do great work is to love what you do. 👨‍💼",
        },
    ]
)

• TextInputComponent: Renders a text box bound to the CategoryName property.

• IsRequired = true: Ensures the field must be filled in before saving.

• HtmlComponent: Displays additional content such as motivational quotes, descriptions, or instructions.

---

3. Best Practices

• Validation: Use IsRequired and other validation properties to ensure data quality.

• Navigation Flow: Always configure AfterCancelPageId and AfterUpdatePageId so users return to a meaningful page after their action.

---

Key Points

1. Use EntityEditComponent to model add/edit forms.

2. Configure the entity type via EntityClassId.

3. Place form fields in the Area using components like TextInputComponent.

4. Always configure AfterCancelPageId and AfterUpdatePageId to define navigation flow.