Activities of "enisn"

Hi

App.razor

You can create a App.razor file in your application and use it via configuring it in the Module file of your application for Blazor WASM and _Host.cshtml for Blazor Server

MyApp.razor

@using Microsoft.Extensions.Options
@using Microsoft.Extensions.Localization
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components
@using global::Localization.Resources.AbpUi
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout
@using Volo.Abp.AspNetCore.Components.Web.Theming.Routing
@inject IOptions<AbpRouterOptions> RouterOptions
@inject IOptions<LeptonXThemeBlazorOptions> LayoutOptions

@inject IStringLocalizer<AbpUiResource> UiLocalizer
<CascadingAuthenticationState>
    <Router AppAssembly="RouterOptions.Value.AppAssembly"
            AdditionalAssemblies="RouterOptions.Value.AdditionalAssemblies">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@LayoutOptions.Value.Layout">
                <NotAuthorized>
                    @if (context.User?.Identity?.IsAuthenticated == false)
                    {
                        <RedirectToLogin/>
                    }
                    else
                    {
                         <ErrorView
                            Title="@UiLocalizer["403Message"]"
                            HttpStatusCode="403"
                            Message="@UiLocalizer["403MessageDetail"]"/> 
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@LayoutOptions.Value.Layout">
                <ErrorView
                    Title="@UiLocalizer["404Message"]"
                    HttpStatusCode="404"
                    Message="@UiLocalizer["404MessageDetail"]"/>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

       var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
       builder.RootComponents.Add<MyApp>("#ApplicationContainer");

If you're using Blazor-Server, Go to your Pages/_Host.cshtml and change App to MyApp

 <component type="typeof(MyApp)" render-mode="Server" />

Imports.razor

Multiple Imports.razor can be used in a blazor project. So you can create a new _Imports.razor wherever you want in your application. It'll be applied to its own folder and subfolders.

Sorry about it, that was my test project name.

LeptonX uses IStringLocalizerFactory to localize theme names.

If you use a resource that configured in your application, it'll work.

 LocalizableString.Create<AppMicroResource>("Theme:Red")

The example below should work. Can you check which resource is configured in your Domain.Shared module class?

Isn't it something like below?

Configure<AbpLocalizationOptions>(options =>
{
    options.Resources
        .Add<AppMicroResource>("en")
        .AddBaseTypes(typeof(AbpValidationResource))
        .AddVirtualJson("/Localization/AppMicroResource");
});

Hi @hakan.uskuner

It seems there is a mistake in the documentation. Blazor has a special case while providing embedded resources. It accesses resources via assembly name. So place you files under wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/ folder.

• I've created two style files:

• Configured them in Module file

  Configure<LeptonXThemeOptions>(options =>
  {
      options.DefaultStyle = LeptonXStyleNames.System;
  
      // Adding a new theme
      options.Styles.Add("red", 
          new LeptonXThemeStyle(
          LocalizableString.Create<Test50Resource>("Theme:Red"),
          "bi bi-circle-fill"));
  });
  

• And the result:

Your credit is refunded since there is a mistake in documentation,

You can find documentation of all tag helpers from here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Index

You can visit Form Elements section for abp-input https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Form-elements

Setting Management doesn't provide any UI component automatically like feature management. You should implement it yourself. If you store data in database, you should write a Custom Setting Value Provider and AppServices for it.

Rendering your custom component in UI

You should define your view like email settings here: https://github.com/abpframework/abp/blob/dev/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.cshtml

And Create a SettingPage Contributo that inherits from SettingPageContributorBase

https://github.com/abpframework/abp/blob/b515f89b9f465b462c81e62a2b1bbd2093d96b75/modules/setting-management/src/Volo.Abp.SettingManagement.Web/Settings/EmailingPageContributor.cs#L21-L25

• Configure your contributor in SettingManagementPageOptions

Configure<SettingManagementPageOptions>(options =>
{
    options.Contributors.Add(new YourSettingPageContributor());
});

That's it, your component will be visible on UI

Hi,

We're hardly working on documentation currently.

The watermark is the same with logo that you used.

You can customize the logo with following CSS:

:root {
    --lpx-logo: url('/images/logo/logo-dark.png') !important;
    --lpx-logo-icon: url('/images/logo/logo-dark-icon.png');
    --lpx-brand: #edae53;
 }

Even you can set it according to the theme

  :root {
    .lpx-theme-dark {
      --lpx-logo: url('/images/logo/logo-dark.png');
      --lpx-logo-icon: url('/images/logo/logo-dark-icon.png');
      --lpx-brand: #edae53;
    }
  
    .lpx-theme-dim {
      --lpx-logo: url('/images/logo/logo-light.png.png');
      --lpx-logo-icon: url('/images/logo/logo-light-icon.png.png');
      --lpx-brand: #f15835;
    }
  
    .lpx-theme-light {
      --lpx-logo: url('/images/logo/logo-light.png.png') !important;
      --lpx-logo-icon: url('/images/logo/logo-light.png-icon.png');
      --lpx-brand: #69aada;
    }
}

Hi dlapointe

Firstly, which theme are you using in your project?

I've checked with LeptonX and it doesn't provide any time picker right now. There is a native input shown when you use type="time". So it depends on operation system of user.

For example, I've switched to 24H system in my computer and I see it in 24H but if any user uses 12H system, will see 12H picker.

If you don't prefer this logic, you can choose one of the timepicker library and use it in your application.

Hi jfistelmann

We are aware of MAUI Blazor's power, which makes existing blazor apps an app on each platform.

We are discussing that topic, but it's not clear yet and there will be no development about it in v6.0 as so far. Maybe in v7.0 but it's not clear, I can't say anything yet.

You can check this example: https://github.com/hikalkan/maui-abp-playing

And you can implement login flow via following this article on that infrastructure: https://community.abp.io/posts/integrating-maui-client-via-using-openid-connect-aqjjwsdf

App.razor files are part of the UI Theme. Each time implements it according to their requirements. You can create a new App.razor in your project and use it.

But ABP Framework and Modules can't support Lazy Loading since they register their services into the dependency injection container and UI Components are resolved from ServiceProvider before rendering. So, that logic makes all of them replaceable from outside of the original assembly.

You can see this issue: https://github.com/abpframework/abp/issues/5543

But Blazorise supports it by default and you don't need to do any configuration. It loads required js and dll files when you use a component.

UPDATE: There is a useful article about it: https://community.abp.io/posts/prerendering-blazor-wasm-application-with-abp-6.x-2v8590g3

Can you share steps to reproduce the issue?

By the way, did you configure it like in this documentation? https://docs.abp.io/en/abp/5.3/Object-Extensions#object-extension-manager

1- Define it

ObjectExtensionManager.Instance
    .AddOrUpdateProperty<IdentityUser, string>("SocialSecurityNumber");
    

• Set it before saving

user.SetProperty("SocialSecurityNumber", value);

• Reading it

var value = user.GetProperty("SocialSecurityNumber");