Dynamic items in menu

Forum rules
Please note that response time for technical support is within 3-5 business days.
rafitap
Posts: 4
Joined: 22 Feb 2017, 20:36

22 Feb 2017, 23:04

Hi.

I use the menu component, and I need to dynamically handle the items, either by modifying styles or classes.
Actually allows me to add labels, icons and functionality.

I am looking forward to your response.

Sorry for my bad English

panarenga
Posts: 47
Joined: 26 Jan 2017, 20:03

08 Mar 2017, 21:47

It is strange that having paid for the template you have no answer yet. It would also be useful for me.
Last edited by panarenga on 23 Mar 2017, 14:55, edited 1 time in total.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Mar 2017, 09:05

Which parts do you need to customize, current MenuItem api has;

https://www.primefaces.org/primeng/#/menumodel

To add any unsupported property, we first need to introduce it in PrimeNG as Ultima menu depends on MenuModel or you can also extend MenuItem API on your own add do changes on app.menu.components.ts especially submenu. Please provide feedback and we'll discuss how to do it.

rafitap
Posts: 4
Joined: 22 Feb 2017, 20:36

23 Mar 2017, 15:23

What I specifically need is a menu where I can handle the items dynamically, what i mean is being able to add, remove, hide each item and modify the style.
For example, I have an application that manage phone calls, when I receive a call I want to be able to add it with a style which highlights it over the other menu items.
Also, I want to be able to hide the menu item without having to remove it from the array.
Finally, one last problem I have is with the label attribute in which I use a multi language filter, when the value is change the html does not render it. What i mean is that I would like to be able to use a variable in the label attribute that i send to an item of the menu.

Hammo
Posts: 1
Joined: 06 May 2017, 06:27

07 May 2017, 02:12

+1

I also need to dynamically add/remove menu items based on a users authorization.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

11 May 2017, 14:08

Hi,

I will discuss this with my colleagues and get back to you.

Regards

westlake91361
Posts: 2
Joined: 08 Mar 2017, 23:49

17 Oct 2017, 19:39

+1

We need the same functionality to add/remove a menu item based on logged in user's role/privilege.

tengel92
Posts: 28
Joined: 15 Sep 2016, 20:04

02 Nov 2017, 19:05

As for removing menu items based on role / responsibility after authorizing a user I have a solution that I think will help. I have been using this code for a while and it's probably not the most elegant but it works. Below is my menu.component.ts file. I'd recommend using the visible parameter from the MenuModelAPI.

Code: Select all

  @Input() reset: boolean;

    model: any[];

    scrapVisible: boolean;
    soaVisible: boolean;
    sftVisible: boolean;

    constructor(public app: AppComponent, public auth: AuthService) {}

    ngOnInit() {
        if (this.auth.authenticated()) {
            if (this.auth.userProfile.app_metadata.group === 'scrap'){
                 this.scrapVisible = true;
                 this.soaVisible = false;
                 this.sftVisible = false;
             }
             if (this.auth.userProfile.app_metadata.group === 'soa'){
                 this.scrapVisible = true;
                 this.soaVisible = true;
                 this.sftVisible = true;
             }
         }
         this.model = [
             {label: 'Home', icon: 'home', routerLink: ['/home']},
             {
                 label: 'SOA Team', icon: 'code', visible: this.soaVisible,
                 items: [
                     {label: 'Schedule', icon: 'date_range', routerLink: ['/schedule']},
                     {label: 'Environments', icon: 'assignment', routerLink: ['/environments']},
                     {
                         label: 'Documents', icon: 'code', visible: this.soaVisible,
                         items: [
                             {label: 'Purchase Order', icon: 'work', routerLink: ['/purchaseorder']},
                             {label: 'PO Receipt', icon: 'local_shipping', routerLink: ['/poreceipt']},
                             {label: 'AP Invoice', icon: 'mail', routerLink: ['/apinvoice']}
                         ]
                     },
                 ]
             },
             {
                 label: 'MFT', icon: 'business', visible: this.soaVisible,
                 items: [
                     {label: 'MFT Home', icon: 'home', routerLink: ['/mft']}
                 ]
             },
             {
                 label: 'SFT', icon: 'business', visible: this.sftVisible,
                 items: [
                     {label: 'SFT Home', icon: 'home', routerLink: ['/sfthome']}
                 ]
             },
             {label: 'All Documents', icon: 'view_list',visible: this.scrapVisible, routerLink: ['/alldocs']},
             {label: 'Purchase Orders', icon: 'work', visible: this.scrapVisible, routerLink: ['/purchaseorders']},
             {label: 'Shipments', icon: 'local_shipping', visible: this.scrapVisible, routerLink: ['/shipments']},
             {label: 'AP Invoices', icon: 'mail',visible: this.scrapVisible, routerLink: ['/apinvoices']},
             {label: 'Acknowledgements', icon: 'thumb_up', visible: this.scrapVisible, routerLink: ['/acknowledgements']},
             {
                 label: 'POsandASN', icon: 'account_balance', visible: this.scrapVisible,
                 items: [
                     {label: 'PO', routerLink: ['/po']},
                     {label: 'ASN', routerLink: ['/asn']}
                 ]
             },
             {
                 label: 'Mappings', icon: 'map', visible: this.scrapVisible,
                 items: [
                     {label: 'Consumers', routerLink: ['/consumers']},
                     {label: 'Freight Vendors', routerLink: ['/freightvendors']},
                     {label: 'Items', routerLink: ['/items']},
                     {label: 'Ship Froms', routerLink: ['/shipfroms']},
                     {label: 'Ship Tos', routerLink: ['/shiptos']},
                     {label: 'Suppliers', routerLink: ['/suppliers']}
                 ]
             },
             {
                 label: 'Settings', icon: 'settings_application', 
                 items: [
                     {
                         label: 'Customization', icon: 'settings_application',
                         items: [
                             {label: 'Compact Size', icon: 'fiber_manual_record', command: () => this.app.layoutCompact = true},
                             {label: 'Material Size', icon: 'fiber_smart_record',  command: () => this.app.layoutCompact = false},
                             {label: 'Light Menu', icon: 'label_outline',  command: () => this.app.darkMenu = false},
                             {label: 'Dark Menu', icon: 'label',  command: () => this.app.darkMenu = true},
                         ]
                     }

paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

06 Nov 2017, 04:38

This also works:

Code: Select all

    private getMenuItem(array: any, label: string): any {
        return array.find(item => item.label === label);
    }

    public showHideMenuItems(roleID: number): void {
        const topLevel = this.getMenuItem(this.menuModel, 'Top Level Menu');
        if (roleID = 1) {
            this.getMenuItem(topLevel.items, 'Menu 1').visible = true;
            this.getMenuItem(topLevel.items, 'Menu 2').visible = true;
            this.getMenuItem(topLevel.items, 'Menu 3').visible = true;
        } else {
            this.getMenuItem(topLevel.items, 'Menu 1').visible = false;
            this.getMenuItem(topLevel.items, 'Menu 2').visible = false;
            this.getMenuItem(topLevel.items, 'Menu 3').visible = false;
        }
    }

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 14:01

visible property or creating a new menu model reference will update the menu actually. Make sure object instance changes otherwise Angular may not detect the change.

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests