Embedding Custom Components in Model-Driven Pages

In Bloqs, you can embed custom Blazor components either in model-driven pages using the App Declarations model, or directly in your custom Blazor pages for custom layouts.

---

1. Creating a Custom Component

A custom component is a standard .razor file. You can accept parameters and access the current context, including the user and tenant, using MainContext.

Example: HelloUserComponent.razor

@using Bloqs.App.Engine.Context

@{
    var userName = MainContext.UserContext.UserName;
}

<div style="background-color: #888;
            padding: 5px;
            border-radius: 5px;
            color: white;">
    Hello @(userName).
</div>

@code {
    [Parameter]
    public required MainContext MainContext { get; set; }
}

• MainContext provides access to the current user and tenant.

• Components can be reused across multiple pages.

---

2. Embedding in Model-Driven Pages (App Declarations)

To include a component in a model-driven page, declare it in your app declarations model:

.AddPage(
    new Page()
    {
        Id = AppConstants.Pages.EmbedCustomComponent,
        Title = "Embed Custom Component",
        Name = "embed-custom-component",
        Area = ContainerComponent.Create(
            new CustomComponent
            {
                ComponentTypeName =
                    $"{AppConstants.CustomComponents.ComponentsNamespace}.{AppConstants.CustomComponents.HelloUserComponent}",
            }
        ),
    }
)

Explanation:

• ComponentTypeName references the full namespace and class name of the component.

• The component is automatically rendered in the corresponding page without editing Razor markup.

• This is the preferred approach for model-driven pages.

---

3. Embedding in Custom Blazor Pages

You can also manually embed your component in a custom Blazor page:

@page "/sample-app/user-dashboard"

@using Bloqs.App.Engine.Context
@using Templates.SampleApp.UserComponents

<div class="pa-6">
    <h2>Dashboard</h2>

    <!-- Embed the custom component -->
    <HelloUserComponent MainContext="@MainContext" />

    <p>Welcome to your personalized dashboard!</p>
</div>

@code {
    [Parameter]
    public required MainContext MainContext { get; set; }
}

• Pass MainContext to the component to provide access to user and tenant information.

• Useful when you want full control over layout and placement.

---

4. Best Practices

• Use Parameters Wisely: Always pass MainContext when needed.

• Namespace Management: Keep components organized for easy reference in AppConstants.

• Reusability: Both model-driven and Razor approaches allow reusing the same component across multiple pages.

• Styling: Use CSS classes or inline styles for consistent appearance.

---

Key Points

1. Model-driven pages: embed via App Declarations, no Razor edits needed.

2. Razor pages: embed manually using <ComponentName MainContext="@MainContext" />.

3. Always reference the component with its full namespace.

4. Components can access MainContext for tenant- and user-specific behavior.