AdaptiveMenu problem with mutually exclusive visibleWhen criteria

[claudiobosticco]

SmartClient Version: v13.1p_2024-12-31/AllModules Development Only (built 2024-12-31)

Safari on iPad Mini 6th gen iOS 17.4 (XCode Simulator)

Hello, please open the showcase with these density settings:
https://www-demos.smartclient.com/sm...rease=15&dhc=1
using an iPad Mini in portrait orientation (probably it's possible to replicate it with a different screen resolution by adding menu items), and run this code from the Safari console, so that the Window is at fullscreen:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon:"Edit",
            visibleWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar",
            icon:"Edit"
        },
        {
            title: "Foo Bar Bar",
            icon:"Edit"
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    title: isc.version,
    maximized:true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

Note the 2 AdaptiveMenuItems with the mutually exclusive visibleWhen criteria (a trick I use as dynamicTitle isn't currently supported).

You'll see that there isn't enough space for the last AdaptiveMenuItem as a button, so there's a Menu for it.

then switch to landscape orientation, and then again to portrait: you'll see that this time the last AdaptiveMenuItem appears as a button, but it's clipped:

[Isomorphic]

Claudio, a fix has been committed for this issue. Please retest with builds starting on Jan 10.

[claudiobosticco]

SmartClient Version: v13.1p_2025-01-10/Enterprise Deployment (built 2025-01-10)

Hello, I see it's fixed, thank you very much.

I’ve noticed a change in behavior in my application that could actually be a nice feature, but I’d like to confirm with you if it’s intended, as I'm not sure it's always a good UE:
It seems that the order of AdaptiveMenuItems is no longer fixed to their declaration order. Instead, the adaptive menu now displays enabled items first, followed by disabled ones.
Is this an intended change? I can provide a test case if needed.

[Isomorphic]

Claudio, no change in ordering is intended. When did you see this behavior change? And yes, a test case may be helpful to see exactly what you are experiencing.

[claudiobosticco]

v13.1p_2025-01-11/AllModules Development Only

Safari on iPad Mini 6th gen iOS 17.4 (XCode Simulator)

Hello, again as in the original post, please open the showcase with these density settings:
https://www-demos.smartclient.com/sm...rease=15&dhc=1
using an iPad Mini in portrait orientation, and run this code from the Safari console, so that the Window is at fullscreen:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: "100%",
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        },
        {
            name: "email",
            title: "Email",
            required: true,
            width: "*",
            type: "text",
            defaultValue: "bob@isomorphic.com"
        }
    ]
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    menuButtonTitle: "More...",
    align: "center",
    defaultLayoutAlign: "center",
    items: [
        {
            title: "Foo Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar",
            icon: "Edit"
        },

        {
            title: "Foo Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar Bar",
            icon: "Edit"
        },
        {
            title: "Foo Bar",
            icon: "Cancel",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar Bar",
            icon: "Cancel",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
        },
        {
            title: "Foo Bar",
            icon: "Close",
            enableWhen: {fieldName: "exampleForm.values.username", operator: "equals", value: "bob"}
        }
    ]
});

isc.ToolStrip.create({
    ID: "toolStrip",
    height: 32,
    width: "100%",
    layoutMargin: 0,
    defaultLayoutAlign: "center",
    members: [
        isc.IButton.create({title: "Close", icon: "Close", autoFit: true}),
        adaptiveMenu,
        isc.IButton.create({title: "Save", icon: "Save", autoFit: true})]
});

isc.Window.create({
    ID: "testWindow",
    title: isc.version,
    maximized: true,
    showFooter: true,
    items: [exampleForm],
    footerControls: [toolStrip],
    layoutBottomMargin: 20
}).show()

I've slightly modified the test case of the original post, you'll see that, in portrait orientation, the last AdaptiveMenuItem (which has icon "Close"), appears before of the two disabled items (with "Cancel" icon), while if you switch to landscape it correctly appears as the last button:

[Isomorphic]

Thanks again for the test case, Claudio. The issue here was that the wrong 'last' item was being pulled from the inlined items to be placed in the menu causing the order to be misrepresented. This has been fixed in builds starting on 21 January.