SwitchItem for SmartClient 10 ?

[claudiobosticco]

While testing SmartClient 10 on Safari iPhone (real device), I noticed that editing a checkbox is difficult.
Have you got some enhancement in development?
For 10.0, 10.1 or later?
Will you maintain the checkbox appearance or will you implement something more similar to the SwitchItem of SmartGWT.mobile ?

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-18/Enterprise Development Only (built 2017-04-18)

Hello, to implement a SwitchItem, I'm experimenting with something like this:

isc.defineClass("SwitchItem", "SliderItem").addProperties({
    sliderProperties: {
        vertical: false,
        defaultValue: 1,
        showRange: false,
        showValue: false,
        trackWidth: 30,
        thumbThickWidth: 30,
        thumbThinWidth: 30
    },
    width: 70,
    showTitle: false,
    change: function () {
        return false;
    },
    click: function (form, item) {
        item.setValue(item.getValue() === 1 ? 2 : 1)
    },
    minValue: 1,
    maxValue: 2,
    numValues: 2
});

isc.DynamicForm.create({
    items: [
        {name: "test", editorType: "SwitchItem"}
    ]
});

Is it supported to add a text to the track (to add ON and OFF labels)?

More generally, do you think it's feasible an implementation based on the SliderItem or am I on the wrong track?

[Isomorphic]

That's an interesting way to do it, and should be feasible, but there would be no way to add "ON" and "OFF" labels to the track itself unless they were part of the track images (which would be a problem for internationalization) or you added a Label or similar as an additional child of the Slider.

Note that overall, we don't really consider the switch a better UI than a checkbox. You never clarified why you think hitting a checkbox is difficult, but if anything a switch type of control would be more difficult to hit, or it might be unclear to the user where to press. Also, everyone immediately understands whether a checkbox is checked or not, where a slider is more ambiguous and needs either additional labels or careful use of cue colors, and is ultimately still not as clear as a checkbox.

[claudiobosticco]

Thanks for your reply. I'm really interested in your experience even if I didn't want to start a 'checkbox vs toggle' debate.
I recall that in my first contacts with toggles on iOS I was pretty confused, so I can say that I'm in agreement with you.

Actually the comment about the difficulty in editing a checkbox was prior the availability of the Canvas.resizeControls method, and was referred to the case of a grid, where the width of the clickable area is limited in respect to a form.

That is still the only case where I'm requested to use a toggle, for a particular use case where the user has a predefined list of seats where he may say 'yes, I want to book this specific seat'. So, it's not a form with a 'save' button, but a short (2 - 4) list of options.

For now, I'll try your suggestions about cue colors, because actually ON/OFF labels on the track may not be the best choice.

[Isomorphic]

Is there some reason you don't just set the min and max labels to "Off" and "On", rather than hiding them?

isc.defineClass("SwitchItem", "SliderItem").addProperties({
    sliderProperties: {
        vertical: false,
        defaultValue: 1,
        showValue: false,
        maxValueLabel: "On",
        minValueLabel: "Off"
    },
    width: 70,
    showTitle: false,
    minValue: 1,
    maxValue: 2,
    numValues: 2
});

[claudiobosticco]

thanks for the suggestion, aftually I didn't think of that.
Maybe for usage in a grid, it requires too much vertical space.

[claudiobosticco]

SmartClient Version: v11.1p_2017-07-23/AllModules Development Only (built 2017-07-23)

Chrome on OSX

Hello, while trying to use this implementation in a grid, I noticed that with alwaysShowEditors:true, a slider is shown only in the first row.
Please see this test case:

isc.ListGrid.create({
    ID: "countryList",
    width:550, height:224, alternateRecordStyles:true,
    // use server-side dataSource so edits are retained across page transitions
    dataSource: countryDS,
   alwaysShowEditors:true, 
    // display a subset of fields from the datasource
    fields:[
        {name:"countryName",canEdit:false},
        {name:"continent",canEdit:false},
        {name:"member_g8",canEdit:false},
        {name:"population",editorType:"SliderItem"},
        {name:"independence",canEdit:false}
    ],
    autoFetchData: true,
    canEdit: true
})

is it a bug, or is it by design?

[Blama]

Hi Isomorphic,

I (not the OP) also noted that compared to the DynamicForm sample, in the testcase clicking, holding and "dragging" does not work in the testcase from #7 here in order to select a value. One has to click until the correct value is found.(Both samples SNAPSHOT_v12.0d_2017-07-23.)

Best regards
Blama

[Isomorphic]

alwaysShowEditors mode is limited to a small set of built-in controls. Even if it could be made to work with a CanvasItem, that wouldn't perform well.

If you really really want a toggle interface here, we'd recommend just directly outputting HTML and CSS for it. You could use a CSS transition to animate state change.