Activities of "aziz.bouhejba"

Hello, sent thank you.

Both are Blazor ComponentBase components in a Blazor WebApp project and I showed them just to show they work on Body but not on head.

The issue is injection of these components through layout hooks Head.Last They were working with LayoutHooks.Body.First

We are trying to apply white label colors per tenant.

So it looks like this

using MyProject.AdministrationService.Constants;
using MyProject.AdministrationService.Features;
using Microsoft.AspNetCore.Components;
using Volo.Abp.Features;
using Volo.Abp.Settings;

namespace MyProject.Blazor.Shared.Components.Layout;

public partial class AppearanceStyles : ComponentBase
{
    [Inject] private ISettingProvider SettingProvider { get; set; } = null!;

    public string? PrimaryColor { get; private set; }
    public string? SecondaryColor { get; private set; }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var primaryColor = await SettingProvider.GetOrNullAsync(SettingDefinitionConstants.BrandingPrimaryColor);
            var secondaryColor = await SettingProvider.GetOrNullAsync(SettingDefinitionConstants.BrandingSecondaryColor);

            PrimaryColor = primaryColor ?? SettingDefinitionConstants.BrandingPrimaryColorDefaultValue;
            SecondaryColor = secondaryColor ?? SettingDefinitionConstants.BrandingSecondaryColorDefaultValue;
        }
        catch
        {
            PrimaryColor = null;
            SecondaryColor = null;
        }

        await base.OnInitializedAsync();
    }
}


@using MyProject.AdministrationService.Constants
@using MyProject.AdministrationService.Features
@using Volo.Abp.Features
@using Volo.Abp.Settings

@if (!string.IsNullOrEmpty(PrimaryColor) || !string.IsNullOrEmpty(SecondaryColor))
{
    <style>
        :root {
            --myproject-primary-color: @PrimaryColor;
            --myproject-secondary-color: @SecondaryColor;
        }

        .btn-primary {
            background-color: var(--myproject-primary-color);
            border-color: var(--myproject-primary-color);
        }

        .btn-primary:hover {
            background-color: var(--myproject-primary-color);
            border-color: var(--myproject-primary-color);
            opacity: 0.8;
        }

        .btn-primary:focus {
            background-color: var(--myproject-primary-color);
            border-color: var(--myproject-primary-color);
            box-shadow: 0 0 0 0.25rem rgba(from var(--myproject-primary-color) r g b / 0.25);
        }

        .bg-primary {
            background-color: var(--myproject-primary-color) !important;
        }

        .text-primary {
            color: var(--myproject-primary-color) !important;
        }

        .border-primary {
            border-color: var(--myproject-primary-color) !important;
        }

        .btn-outline-primary {
            border-color: var(--myproject-primary-color);
            color: var(--myproject-primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--myproject-primary-color);
            border-color: var(--myproject-primary-color);
            color: #fff;
        }

        .btn-outline-primary:focus {
            background-color: var(--myproject-primary-color);
            border-color: var(--myproject-primary-color);
            color: #fff;
        }

        .nav-pills .nav-link.active, 
        .nav-pills .show > .nav-link {
            background-color: var(--myproject-primary-color);
        }

        .nav-link.active:hover {
            background-color: var(--myproject-primary-color);
            opacity: 0.8;
        }

        /* Secondary Color Styles */
        .btn-secondary {
            background-color: var(--myproject-secondary-color);
            border-color: var(--myproject-secondary-color);
        }

        .btn-secondary:hover {
            background-color: var(--myproject-secondary-color);
            border-color: var(--myproject-secondary-color);
            opacity: 0.8;
        }

        .btn-secondary:focus {
            background-color: var(--myproject-secondary-color);
            border-color: var(--myproject-secondary-color);
            box-shadow: 0 0 0 0.25rem rgba(from var(--myproject-secondary-color) r g b / 0.25);
        }

        .bg-secondary {
            background-color: var(--myproject-secondary-color) !important;
        }

        .text-secondary {
            color: var(--myproject-secondary-color) !important;
        }

        .border-secondary {
            border-color: var(--myproject-secondary-color) !important;
        }

        .btn-outline-secondary {
            border-color: var(--myproject-secondary-color);
            color: var(--myproject-secondary-color);
        }

        .btn-outline-secondary:hover {
            background-color: var(--myproject-secondary-color);
            border-color: var(--myproject-secondary-color);
            color: #fff;
        }

        .btn-outline-secondary:focus {
            background-color: var(--myproject-secondary-color);
            border-color: var(--myproject-secondary-color);
            color: #fff;
        }
    </style>
}

        Configure<AbpLayoutHookOptions>(options =>
        {
            options.Add(
                LayoutHooks.Head.Last,
                typeof(AppearanceStyles)
            );
        });

Also had the same issue in MVC by using

public class BootstrapStyleViewComponent(ISettingProvider settingProvider) : AbpViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var primaryColor = await settingProvider.GetOrNullAsync(WhileLabelAppSettings.PrimaryColor);
        return View("~/Components/BootstrapStyle/Default.cshtml", primaryColor);
    }
}

And also

Configure<AbpLayoutHookOptions>(options =>
{
    options.Add(
    LayoutHooks.Head.Last,
    typeof(BootstrapStyleViewComponent));
});

Thanks that helped

It doesn't come with cms kit option in a microservice template and there's 0 samples online or documentation for it..

Hi, can you share a code sample for it? Thanks

you can the exact same steps, you just don't see me reloading. but you can see we lose our custom style on reload and even the UI for the cms kit is all different.

After reload it looks like your support site cms. but before it looks different.

It's gonna take me a long time to do that (create a new microservice solution with Blazor Web App UI / integrate cms kit in some service, expose it through gateway etc..) We didn't find any documentation working on it, can you give me a working sample of CMS kit with our actual setup instead? We'll fix it from there? it's reassuring at least to know it's supposed to be working properly.

results on our end:

• Blazor web app : works fine
• MAUI Blazor hybrid app : works fine locally / when deployed on the android-apple stores, doesn't work.

We are gonna try a custom solution to clear redis cache of user because we have no time dealing with this..

Our Redis cache solution works

yes I did

Hi!

tried the new proposed solution, doesn't work on our Blazor Web app. both proposed solutions also don't work for our MAUI Blazor hybrid mobile app.

We need the dynamic claims to also work on mobile app.

Thank you