Open Closed

User Menu customisation #783


User avatar
0
chofoza created
  • ABP Framework version: v4.1.0
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Seperated (Angular): no
  • Exception message and stack trace:
  • Steps to reproduce the issue:

Hi, I'd like to customise the user menu in the main toolbar:

  1. remove/hide the Security Logs option
  2. replace the username with Name

I can see the function ConfigureToolbarAsync in the ToolbarContributor where it gets added, but I don't know how to edit the object or intercept it. I am guessing I need to override the class that calls ConfigureToolbarAsync but I am too new to this so am a little lost. Help is appreciated!


4 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Try:

    public class MyProjectNameMenuContributor : IMenuContributor
    {
        public async Task ConfigureMenuAsync(MenuConfigurationContext context)
        {
            if (context.Menu.Name == StandardMenus.User)
            {
                context.Menu.Items.RemoveAll(x => x.Name == "Account.SecurityLogs");
            }
        }
    }
    

    Create Default.cshtml in the Themes\Lepton\Components\Toolbar\UserMenu directory:

    @using Localization.Resources.AbpUi
    @using Microsoft.AspNetCore.Mvc.Localization
    @using Volo.Abp.MultiTenancy
    @using Volo.Abp.UI.Navigation
    @using Volo.Abp.Users
    @inject ICurrentUser CurrentUser
    @inject ICurrentTenant CurrentTenant
    @inject IHtmlLocalizer<AbpUiResource> L
    @model ApplicationMenu
    
    <abp-dropdown>
        <abp-dropdown-button link="true" id="dropdownMenuUser">
            <img src="@($"/api/account/profile-picture-file/{CurrentUser.GetId()}")" width="21" class="user-avatar">
    
            @if (@CurrentUser.TenantId != null)
            {
                <span><i>@CurrentTenant.Name</i>\@CurrentUser.UserName</span>
            }
            else
            {
                <span>@CurrentUser.UserName</span>
            }
    
        </abp-dropdown-button>
    
        <abp-dropdown-menu align="Right" aria-labelledby="dropdownMenuUser">
            <abp-row class="p-2">
                <abp-column size="Auto" class="pr-0">
                    <img src="@($"/api/account/profile-picture-file/{CurrentUser.GetId()}")" class="user-avatar-big" width="48">               
                </abp-column>
                <abp-column class="pl-2">
                    <span>@L["Welcome"]</span><br />
                    @if (@CurrentUser.TenantId != null)
                    {
                        <small><i>@CurrentTenant.Name</i>\</small><strong>@CurrentUser.UserName</strong>
                    }
                    else
                    {
                        <strong>@CurrentUser.UserName</strong>
                    }
                </abp-column>
            </abp-row>
            @if (Model.Items.Any())
            {
                <abp-dropdown-divider />
                foreach (var menuItem in Model.Items)
                {
                    var elementId = string.IsNullOrEmpty(menuItem.ElementId) ? string.Empty : menuItem.ElementId;
                    var cssClass = string.IsNullOrEmpty(menuItem.CssClass) ? string.Empty : menuItem.CssClass;
                    var disabled = menuItem.IsDisabled ? "disabled" : string.Empty;
                    var url = string.IsNullOrEmpty(menuItem.Url) ? "#" : Url.Content(menuItem.Url);
    
                    if(menuItem.Name == "Account.Manage")
                    {
                        url += "?returnUrl=" + Url.PageLink();
                    }
    
                    <abp-dropdown-item class="@cssClass @disabled" href="@url" id="@elementId" target="@menuItem.Target">
                        @menuItem.DisplayName
                    </abp-dropdown-item>
                }
            }
        </abp-dropdown-menu>
    </abp-dropdown>
    
    
    
  • User Avatar
    0
    chofoza created

    Thank you - the first part to remove the security logs from the menu works!

    On the new Default.cshtml page though the actual Model object is null, so it fails on the line checking Model.Items.Any(). The model in your code is an ApplicationMenu which seems correct.

    Any ideas what the issue is?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    On the new Default.cshtml page though the actual Model object is null, so it fails on the line checking Model.Items.Any(). The model in your code is an ApplicationMenu which seems correct.

    I can't reproduce the problem.

  • User Avatar
    0
    chofoza created

    This was my fault. I left @page in at the top of the page when I created the new file. All sorted now. Thanks for the help.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11