ToggleSwitch title

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-03-18/Enterprise Deployment (built 2024-03-18)

Chrome on MacOS

Hello, I'm trying the ToggleSwitch, and I think I've found a problem with the title, please try this test case:

isc.VLayout.create({
    membersMargin: 5,
    members: [
        isc.Header.create({ title:"Standalone Toggle" }),
        isc.ToggleSwitch.create({ ID:"toggleSwitch", title:"foo", showTitle:true})
    ]
});

and this is what happens:

[Isomorphic]

hi Claudio,

If you check the docs for that property, it notes that it's a Slider property and not applicable to ToggleSwitch - we'll make a change to properly disable it in this widget.

[claudiobosticco]

Thanks for the heads up, so I need to use it as a formItem to have a title.

[claudiobosticco]

But it seems that changed is not working on the ToggleItem:

isc.VLayout.create({
    membersMargin: 5,
    members: [
        isc.Header.create({ title:"Toggle in a form" }),
        isc.DynamicForm.create({
            fields: [
                { name:"toggle", title:"Enable Noise Cancellation", changed: function(form, item, value) {isc.logEcho("foo")},
                 wrapTitle:false, editorType:"ToggleItem" }
            ]
        })
    ]
});

[Isomorphic]

hi Claudio,

You're right, there was some change-detection plumbing missing here. However, there was also an existing task to redo the ToggleSwitch in a simpler form, and we've now done that - it's now a StatefulCanvas and we've added color-transitions and thumb-animation, and support for changing value with the keyboard (space or left/right arrow). And change-detection now works as expected in ToggleItem.

Please retest with tomorrow's builds, dated March 21 or later.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-03-22/AllModules Development Only (built 2024-03-22)

thank you very much, much better now, on handset devices also

[claudiobosticco]

Actually I found a visual glitch when disabling/enabling the ToggleItem, here it is disabled after running the test case (seems fine):



then after enabling it:


then after toggling:


again after disabling:



test case:

isc.VLayout.create({
    membersMargin: 5,
    members: [
        isc.DynamicForm.create({
            ID: "aForm",
            fields: [
                {name: "aCheckbox", type: "checkbox", title: "Enable Toggle"},
            ]
        }),
        isc.DynamicForm.create({
            enableWhen: {
                _constructor: "AdvancedCriteria",
                operator: "and",
                criteria: [{fieldName: "aForm.values.aCheckbox", operator: "equals", value: true}]
            },
            fields: [
                {
                    name: "toggle", title: "Enable Noise Cancellation", defaultValue: false,
                    wrapTitle: false, editorType: "ToggleItem"
                }
            ]
        })
    ]
});

[Isomorphic]

Thanks Claudio - we've corrected baseStyle handling for tomorrow's builds.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-03-30/AllModules Development Only (built 2024-03-30)

I see it's fixed, thank you very much