Hi Moriel, thanks for your explanations. They're very helpful. The ComboBoxInputWidget example you provided shows my use case very nicely. When you open up the drop down menu you see the options "Option One", "Option Two", "Option Three", ... When you select one of them the (e.g. "Option Three") displayed value in the field will be the actual value (e.g. "Option 3") and not the label that you've selected. This can be quite strange when you've got values that sound "technical". Consider some dynamic option mechanism where users create options by "labels" and some kind of software automatically creates the "values". An example: You've got a option value "Q7186" and a label value "Marie Curie". When the user selects "Marie Curie" the user interface will say: "Q7186". A user might be confused. I know that some UI frameworks handle this by showing the "label" of the selected item to the user in a DIV element or something else and storing the actual value in an internal variable. When it comes to form submission and the need to provide an actual "value string" they use a hidden field and maybe a "valueField" config option in case the "value" is not a string but an object (thus allowing to set the string value of the hidden field from a field within the value object). It looks like OOJSUI does not support something like that (yet). It's also not a big issue, I just was curiuos if I missed something relevant and if I am the only one with such a use case. So, thanks again :) -- Robert On Sa, 2017-02-25 at 14:23 -0800, Moriel Schottlender wrote: > Hi Robert, > > In general, the 'data' property for items inside the GroupElement can > be > strings or objects, as they represent some state of your item. > In OO.ui.mixin.GroupElement, the method "getItemFromData" can then > return a > specific item based on its data property. If you use an Object for > the > data, OOjs-UI will use its OO.getHash() to basically stringify your > object, > so it can make sure it retrieves the right one. > > The property 'data' actually comes all the way up the hierarchy chain > from > "OO.ui.Element" (if you look at that method, the description of that > parameter is the same) -- and at that level, it definintely allows > for any > sort of data, be it a string or an object. > > However, when dealing with specific cases, like that of the > ComboBoxInputWidget (the terminology of "input widget" usually > suggests > something inside a form in OOjs-UI) means that putting the data as an > object doesn't make sense usually. Unless your use case requires > something > very different, we usually want ComboBoxInputWidget to have the > 'value' => > 'label' pair, so it uses its 'data' property as the 'value' and > expects a > string. > > As for the second part of your question, I am not 100% sure I > understood it > (please correct me if so) but from what I understand, if you set your > OO.ui.MenuOptionWidget items with their data as the value ('red' / > 'yellow' > / 'green' etc) and the label as the mw.msg that the user sees, then > it > should work out of the box. > > So if you look at the example given in the docs for > ComboBoxInputWidget ( > https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInpu > tWidget) > you can set your item's data to the color (value) and the label to > the word > you want to display, and when the user picks an option, the **label** > needs > to show in the ComboBoxInputWidget. > > Be aware, though, that if you listen to 'choose' or 'select' event > from > this input widget, you get the selected item, so if you're projecting > that > choice into some other input, you should ask for the label > (item.getLabel()) and not the data. > > I hope that helped... > > Moriel > > > > On Fri, Feb 24, 2017 at 12:04 AM, Robert Vogel <vogel(a)hallowelt.com> > wrote: > > > > > Hi everybody! > > > > I'm working on some OOJS-UI components for an extension and I've > > stumbled > > across something: > > > > The "OO.ui.ComboBoxInputWidget" allows to set an array of > > "OO.ui.MenuOptionWidget" objects in its "menu.items" config field. > > Such an item can have a "label" and a "data" field. The "data" > > field can > > be of type "object" [1]. > > > > Now, if I use a "data" field of type "object" the value of the > > "OO.ui.ComboBoxInputWidget" will be "[Object object]", as it tries > > to cast > > the "data" value to a string when a user selects an option item. > > So it looks like "OO.ui.ComboBoxInputWidget" allows only "data" of > > type > > "string" in its options. Is that correct? > > > > That would also mean that there is no "label/data" mechanism of the > > input > > field itself. If I've got the following options > > > > [ > > { label: "Rot", data: "red" }, > > { label: "Gelb", data: "yellow" }, > > { label: "Grün", data: "green" } > > ] > > > > and the user selects the option with label "Gelb" the input field > > shows > > "yellow", not "Gelb". Did I miss something? Is it possible to show > > a > > "label" to the user but retrieve the "data" (object) when calling > > "getValue" on such a field? > > > > [1] https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO. > > ui.MenuOptionWidget-cfg-data > > > > -- > > Robert > > _______________________________________________ > > Wikitech-l mailing list > > Wikitech-l(a)lists.wikimedia.org > > https://lists.wikimedia.org/mailman/listinfo/wikitech-l > >