How to: FormItem / TextItem subclass with button like DateItem

[Blama]

Hi Isomorphic,

what is your suggestion for the FormItem in the following usecase:
I have many masterdata tables with user-entered content. This content should be localizable. Therefore I thought about a TextItem (or TextAreaItem) like I already use, but with a icon like you show in DateItem (e.g. here), that launches my Window to edit the translations in different languages.

How do I create this FormItem (basically a sibling to DateItem) that I'll use as editor for my localizable fields best?
CanvasItem? Subclass DateItem? Own item in JS in load_skin.js (I'm using SmartGWT)?

I strongly assume that you'll suggest the latter one (if there is no API to show an icon inside a TextItem already). How would I use such a item from Java/GWT? Do you have any examples for this one?
Even if this is not the best way I'd really appreciate such an example (most likely including some JS and some JSNI) in the showcase.

Thank you & Best regards
Blama

[Isomorphic]

We're not following what is difficult here or why you would think of doing this in JavaScript, let alone in the skin file (load_skin.js)..

If you want an icon after a TextItem simply add a FormItemIcon. This can obviously be done as a subclass of TextItem which calls setIcons().

If you want the icon to look like the DateItem's calendar icon, use the same image.

[Blama]

Hi Isomorphic,

thanks. In Tahoe this looks like as if the Button were in the textbox, so I did not assume this was made using FormItemIcon. FormItemIcon does indeed work for me for TextItem. It does not work using TextAreaItem.
When applying FormItemIcon to a TextAreaItem, the default "Expand box to see more text while editing" is not visible and instead the box is expanded from the beginning.
How can can I add a button here?

This modified sample (v11.1p_2017-12-27) shows the issue I'm having in my SmartGWT application as well:

var refreshPicker = isc.FormItem.getPickerIcon("refresh", {
    click : function () {
        isc.say("Refresh Picker clicked");
    }
});

var countryList = isc.ListGrid.create({
    ID: "countryList",
    width:522, height:224,
    alternateRecordStyles:true,
    // use server-side dataSource so edits are retained across page transitions
    dataSource: countryDS,
    // display a subset of fields from the datasource
    fields:[
        {name:"countryName"},
        {name:"government", editorType:"TextAreaItem", editorProperties:{icons: [ refreshPicker ]}},
        {name:"continent"},
        {name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}
    ],
    canEdit: true,
    editEvent: "click",
    groupStartOpen:"all",
    groupByField: 'continent',
    autoFetchData: false
});
countryList.fetchData(null, function () {
    countryList.startEditing(1);
});

The following code does work, but shows the default icon twice. Also, the editor directly opens for the click on the refresh button, which is not expected. I'd only expect the icon click handler to run and show the isc.say().

var refreshPicker = isc.FormItem.getPickerIcon("refresh", {
    click : function () {
        isc.say("Refresh Picker clicked");
    }
});

var countryList = isc.ListGrid.create({
    ID: "countryList",
    width:522, height:224,
    alternateRecordStyles:true,
    // use server-side dataSource so edits are retained across page transitions
    dataSource: countryDS,
    // display a subset of fields from the datasource
    fields:[
        {name:"countryName"},
        {name:"government", icons: [ refreshPicker ]},
        {name:"continent"},
        {name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}
    ],
    canEdit: true,
    editEvent: "click",
    groupStartOpen:"all",
    groupByField: 'continent',
    autoFetchData: false
});
countryList.fetchData(null, function () {
    countryList.startEditing(1);
});

Best regards
Blama

[Isomorphic]

We're still having trouble understanding what's an issue here. Both samples produce only a single icon, adjacent to the TextAreaItem, as expected.

Can you elaborate on "It does not work using TextAreaItem." - what does not work?

And also elaborate on ""Expand box to see more text while editing" is not visible and instead the box is expanded from the beginning." What box are you talking about? There's no functionality in the original or modified sample to have a button that expands a box, and also that message doesn't occur in the original sample or in your modified sample.

Please try to be clear this time.

[Blama]

Hi Isomorphic,

this is not the case
The 1st modified sample shows one icon (the new one), two are expected. I expect the default one you generate for normal TextAreaItem and the one I define.
The 2nd modified sample shows three icons, again two are expected/wanted.



In the 1st modified sample I'd expect the expand button and normal line height.

In both cases, from design perspective I'd expect it to look like in the 2nd modified sample, but with only one of the default buttons.
Also, the Refresh button should not expand the item. On click on "Refresh" in the 2nd modified example it looks like this:


Once the focus moves, the textbox is un-expanded again. Only the click on the "text"-icon or entering the textbox should expand the box - without changing the line height.

I tested all this using Chromium 63.0.3239.84 / Win8.

Best regards
Blama

[Isomorphic]

The default editor is PopUpTextAreaItem, not TextAreaItrm, so the first modification is behaving as expected - you changed the editorType.

For the second case, two icons would be expected (default + yours), and the way the PopUpTextAreaItem works in terms of focus isn't going to work well with an extra icon, so we'd recommend taking some other approach here.

[Blama]

Hi Isomorphic,

thanks for the hint on PopUpTextAreaItem. With that, both modified samples look the same.
Please note that in both cases, the count of "edit" icons get one more after I switch rows.

Is it possible that you fix the behavior here, so that the additional icon works as expected?
Or what is your UI suggestion for the following usecase:
I have many ListGrids for defining master data (campaign, type, temperature), all of these have shortname-, name-, description-columns.
I want the user to be able to localize these. The DB structures for this are there and I edit these translations in a window that should open on the click of what now is the "Refresh" icon in the samples above.
This works fine for TextItems, but not for TextAreaItems.
As I have more than one column to localize, I wanted to have the "Edit translations" button to be field-related and not row-related (e.g. as Image-ListGridField).

Best regards
Blama