Link an AdaptiveMenu's member to its corresponding item

[gvangass]

I'm trying to link an AdaptiveMenu's member to its corresponding item.
The item can have properties that the member would not have eg. backgroundColor, backgroundImage, styleName, prompt etc...
By linking the member with it's corresponding item, can can assign that properties to the member.
The only way to do its currently is by title or icon.
The problem is that there can be duplicate titles/icon, depending on the menu context.

In the ISC_Grid.js debug source, I saw that the members properties are set in the createChildren() method.

I then tried to override the createChildren() method by adding an id property(menuid) that was set for the item.

lastMember = this.createAutoChild("inlineMenuItem", {
    icon: item.icon,
    title: item.title,
    click: item.click,
    MENUID: item.MENUID // newly added line
})

It worked fine when you run you application with the modules-debug code, but went in to an endless loop with the compressed modules.

Is there maybe another way to link the members to it's corresponding items ?

I'm using Version: v12.0p_2018-07-12/LGPL Development Only

[Isomorphic]

We're guessing you're using the term "member" referring to AdaptiveMenu's superclass Layout and the fact that the inlineMenuItem AutoChildren become layout members. This is an internal detail, try not to mix these in with your question, and least not without explaining further, as this is very confusing.

Currently the only way to customize individual inlineMenuItems would be the semi-hack of accessing them after creation and calling setters such as setBackgroundColor(). You would then presumably have to customize the meneItems in the same way when shown in the drop-down Menu component, for consistency.

We wouldn't recommend doing this, first because it's sort of a hack, second because, if you have a menu where multiple items have the same title and icon, you've already got a bad source of user confusion, and you should probably figure out a way that the titles can be distinct rather than, eg, relying on color.

[gvangass]

Sorry for the vagueness.
I'll try to explain it better.

When you call the setItems(items) on the AdaptiveMenu then eventually this is called:

    createChildren : function () {
        for (var i = 0; i < this.items.length; i++) {
            var item = this.items[i];
            var showIconOnlyInline =
                item.showIconOnlyInline == undefined ? this.showIconOnlyInline : item.showIconOnlyInline;

            var lastMember;

            if (item.embeddedComponent) {
                lastMember = item.embeddedComponent;
                lastMember.visibility = "hidden";
            } else if (showIconOnlyInline) {
                lastMember =  this.createAutoChild("inlineImgButton", {
                    icon: item.icon,
                    click: item.click
                });
            } else if (item.submenu != undefined) {
                var menu = this.createAutoChild("inlineSubmenu", {data: item.submenu}, isc.Menu);
                lastMember = this.createAutoChild("inlineSubmenuItem", {
                    icon: item.icon,
                    title: item.title,
                    click: item.click,
                    menu: menu
                });
            } else {
                lastMember = this.createAutoChild("inlineMenuItem", {
                    icon: item.icon,
                    title: item.title,
                    click: item.click
                });
            }
            this.addMember(lastMember);
        }
        this.inlinedMax = this.items.length;

        if (!this.menuButton) this.createMenuButton();

        this._needsInitialization = false;
    },

So for each item an autoChild is created and add as a member of the AdaptiveMenu.
When the autoChild is created, it inherits icon, title, click from the item.

This is where I would like an extra property to be inherited from the item to the member

lastMember = this.createAutoChild("inlineMenuItem", {
     icon: item.icon,
     title: item.title,
     click: item.click,
     MENUID: item.MENUID // newly added line
})

My use case:
I'm creating individual MenuItems (like a pool of MenuItems to be used later as needed)
These MenuItems has all the styling I need.
Then I dynamically create an AdaptiveMenu with MenuItems I need for the AdaptiveMenu.

The MenuItem is added as a member of the AdaptiveMenu and displayed.
I need to add some of the MenuItems properties to the AdaptiveMenu's member properties, for it to look the same.(all this is currently working)

The problem:
Currently I'm using the title property to link the item to the AdaptiveMenu's member.
If there's more than one item with the same title, but with different styling, only the first found item's styling is used for all AdaptiveMenu's member with the same title.

Hope this clarify the issue a but better

[Isomorphic]

We already understood all of this. Please revisit our existing answer for a suggested approach, as well as a suggestion to just design a different UI instead, to avoid the underlying problem.