AbpRadzen.DataDictionary.EntityFrameworkCore 1.4.2

<h1 align="center">Abp RadzenUI</h1>

<div align="center">

Abp RadzenUI is a Blazor Server UI theme built on top of the ABP framework and crafted with the Radzen Blazor component library.

</div>

English | 简体中文

Contents

• Try the Demo
• Get Started
• Use the Linked Accounts Module
• Use the Data Dictionary Module
• Preview the Interface

❤️ Try the Demo

http://111.230.87.81:20103/

UserName: test

Password: 1q2w#E*

🌱 Get Started

Integration Steps

1. Create a new solution with the ABP CLI

abp new CRM -u blazor-server -dbms PostgreSQL -m none --theme leptonx-lite -csf

2. Install AbpRadzen.Blazor.Server.UI in your CRM.Blazor project

dotnet add package AbpRadzen.Blazor.Server.UI

3. Remove the NuGet packages and code related to the leptonx-lite theme

In practice, this mainly means cleaning up the code in CRMBlazorModule and removing the default Razor pages under the Pages directory.

4. Configure Abp RadzenUI

Add a ConfigureAbpRadzenUI method inside your ConfigService method:

private void ConfigureAbpRadzenUI()
{
    // Configure AbpRadzenUI
    Configure<AbpRadzenUIOptions>(options =>
    {
        // This is important. It registers the Razor pages from your current web application
        // so that they can be discovered by the router inside the AbpRadzenUI module.
        options.RouterAdditionalAssemblies = [typeof(Home).Assembly];

        // Other optional settings
        //options.TitleBar = new TitleBarSettings
        //{
        //    ShowLanguageMenu = false,
        //    Title = "CRM",
        //    ShowBreadcrumb = true, // Show breadcrumb navigation in the title bar (default: true)
        //};
        //options.LoginPage = new LoginPageSettings
        //{
        //    LogoPath = "xxx/xx.png"
        //};
        //options.Theme = new ThemeSettings
        //{
        //    Default = "material",
        //    EnablePremiumTheme = true,
        //};

        // Configure the icon for external login providers
        options.ExternalLogin.Providers.Add(new ExternalLoginProvider("AzureOpenId", "images/microsoft-logo.svg"));
    });

    // Configure AbpMultiTenancyOptions. This controls whether tenant switching
    // is shown on the login page.
    Configure<AbpMultiTenancyOptions>(options =>
    {
        options.IsEnabled = MultiTenancyConsts.IsEnabled;
    });

    // Configure AbpLocalizationOptions
    Configure<AbpLocalizationOptions>(options =>
    {
        // Inherit from AbpRadzenUIResource so your application can reuse
        // the built-in localization texts provided by this UI package.
        var crmResource = options.Resources.Get<CRMResource>();
        crmResource.AddBaseTypes(typeof(AbpRadzenUIResource));

        // If you prefer a custom language list, clear the default set and add your own.
        options.Languages.Clear();
        options.Languages.Add(new LanguageInfo("en", "en", "English"));
        options.Languages.Add(new LanguageInfo("fr", "fr", "Français"));
        options.Languages.Add(new LanguageInfo("zh-Hans", "zh-Hans", "简体中文"));
    });

    // Configure your application's navigation menu
    Configure<AbpNavigationOptions>(options =>
    {
        options.MenuContributors.Add(new CRMMenuContributor());
    });
}

Then add the following line at the end of your OnApplicationInitialization method:

app.UseRadzenUI();

For a complete example, refer to CRMBlazorWebModule.

5. Configure the menu

Whenever you add a new Razor page and want it to appear in the sidebar, update the CRMMenuContributor class accordingly.

6. Configure external login

If you want to integrate a third-party identity provider such as Azure AD, the setup is straightforward. Add the following configuration to your settings file, then register the authentication handler in your web module. You can also refer to the sample project for a working implementation.

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "<your-tenant-id>",
  "ClientId": "<your-client-id>",
  "ClientSecret": "<your-client-secret>",
  "CallbackPath": "/signin-azuread-oidc"
}

private void ConfigureOidcAuthentication(
    ServiceConfigurationContext context,
    IConfiguration configuration
)
{
    if (configuration.GetSection("AzureAd").Exists())
    {
        context
            .Services.AddAuthentication()
            .AddOpenIdConnect(
                "AzureOpenId",
                "Azure Active Directory",
                options =>
                {
                    options.Authority =
                        $"{configuration["AzureAd:Instance"]}{configuration["AzureAd:TenantId"]}/v2.0/";
                    options.ClientId = configuration["AzureAd:ClientId"];
                    options.ClientSecret = configuration["AzureAd:ClientSecret"];
                    options.ResponseType = OpenIdConnectResponseType.Code;
                    options.CallbackPath = configuration["AzureAd:CallbackPath"];
                    options.RequireHttpsMetadata = false;
                    options.SaveTokens = true;
                    options.GetClaimsFromUserInfoEndpoint = true;
                    options.SignInScheme = IdentityConstants.ExternalScheme;

                    options.Scope.Add("email");
                }
            );
    }
}

7. Configure the settings page

In real-world projects, it is common to manage system-level or business-level settings such as email providers, SMS providers, and similar options. ABP provides a convenient Settings infrastructure for persisting and retrieving these values. Based on that mechanism, this UI package makes it easy to surface configuration components as tabs on a unified settings page.

Follow the steps below to add your own settings component:

(1) Create an application service for your settings, for example: AccountSettingsAppService

(2) Create a Blazor component for the settings UI, for example: AccountSettingComponent

(3) Create a contributor by implementing ISettingComponentContributor. The contributor is responsible for registering your settings component, for example: AccountPageContributor

(4) Finally, register the contributor in your module configuration

Configure<SettingManagementComponentOptions>(options =>
{
    options.Contributors.Add(new EmailingPageContributor());
    options.Contributors.Add(new TimeZonePageContributor());
    options.Contributors.Add(new AccountPageContributor());
});

8. Apply database migrations before the first run

🔗 Use the Linked Accounts Module

The Linked Accounts capability is now built into the full UI package and can also be consumed as a standalone application-layer package.

What it provides

• Link another local or cross-tenant account from the current signed-in session.
• Switch between directly linked and indirectly reachable accounts without logging out manually.
• Keep a reversible session stack so the user can return to the previous account.
• Reuse ABP's built-in IdentityLinkUser and IdentityLinkUserManager instead of introducing a custom link table.

Use it through the full UI package

If you install AbpRadzen.Blazor.Server.UI, the Linked Accounts pages, localization texts, controllers, and menu entry are already wired into the theme module. No extra package installation is required.

The built-in management page route is /account/linked-accounts.

Use it as a standalone package

If you only need the linking and switching services in your own module, install the standalone package below:

dotnet add package AbpRadzen.LinkAccounts

Then depend on the module in your application module:

[DependsOn(typeof(AbpRadzenUILinkAccountsModule))]
public class MyApplicationModule : AbpModule
{
}

The standalone package registers the following services for you:

• ILinkedAccountAppService
• ILinkedAccountFlowStateStore

Notes about the authentication flow

• The first link operation still requires a real login for the target account.
• After the relationship is established, account switching relies on the existing link relationship plus a short-lived flow token to re-issue the authentication ticket.
• Flow tokens and linked-account sessions are stored in distributed cache and are shared in the host tenant scope so cross-tenant switching can complete correctly.

📚 Use the Data Dictionary Module

The data dictionary module is included in the UI package and provides an out-of-the-box page for managing dictionary types and dictionary items.

Module Guide

1. Install the package

dotnet add package AbpRadzen.Blazor.Server.UI

If you only need the entity definitions and EF Core mappings, you can install the standalone package below:

dotnet add package AbpRadzen.DataDictionary.EntityFrameworkCore

2. Register the DbContext

The full UI module already registers DataDictionaryDbContext inside AbpRadzenUIModule. If you integrate only the EF Core package into your own solution, add the DbSets and call ConfigureDataDictionary() inside your application's DbContext.

public class MyProjectDbContext : AbpDbContext<MyProjectDbContext>
{
    public DbSet<DataDictionaryType> DataDictionaryTypes { get; set; }

    public DbSet<DataDictionaryItem> DataDictionaryItems { get; set; }

    protected override void OnModelCreating(ModelBuilder builder)
    {
        base.OnModelCreating(builder);

        builder.ConfigureDataDictionary();
    }
}

3. Add localization and menu support

The built-in page route is /data-dictionary. When you use the full UI package, menu contributions and localization resources are already wired up. If you are composing your own application module, make sure your localization resource inherits from AbpRadzenUIResource.

4. Apply database changes

The data dictionary module creates the following two tables:

• DataDictionaryTypes
• DataDictionaryItems

After integrating the module, create and apply your EF Core migrations in the usual way.

5. Usage notes

• Dictionary items are associated with dictionary types through DataDictionaryTypeId, but the EF Core mapping does not create a database-level foreign key.
• Deleting a dictionary type will also remove its child dictionary items at the application-service level.
• The built-in page uses a master-detail DataGrid layout. Selecting a dictionary type automatically refreshes the item grid on the right.

🎨 Preview the Interface

1. Login page

2. List page

3. List page with DataGrid filters

4. Theme switching

5. Organization units