|
dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Julian Buss, November 29th, 2010 15:57:14
Tags: XPages
I really like all the controls in the OpenNTF Extension Library. Among them is a combobox, which looks like this:
It's a combination of a text field (where the user can give a new value) and a list of values, just like the combobox in Notes. Unfortunately. the Extension Library needs 8.5.2 and has to be installed manually on a Domino server. Customers will do that, but eventually not as fast as you want it :-) But the combobox is very useful, so I looked how get it working in 8.5.1, too. The main problem is that you cannot add a "dojoType" attribute to a listbox control in 8.5.1, it's simply not allowed (the same goes for the edit box and other controls). Therefore, you cannot add 'dojoType="dijit.form.ComboBox"' which would transform a listbox to a combobox automatically if you have dojoParse = true in the XPages's properties. Neverless, some research told me that you can invoke the dojo.parser manually, even on selected elements. And since you can add attributes to any HTML event at runtime, the solution was only some lines of JavaScript away: --- var f = function() { var elems = dojo.query("input[id$='_inputbox']"); dojo.forEach(elems, function(e) { e.setAttribute("dojoType", "dijit.form.TextBox"); dojo.parser.parse(e.parentNode);}); elems = dojo.query("select[id$='_combobox']"); dojo.forEach(elems, function(e) { e.setAttribute("dojoType", "dijit.form.ComboBox"); dojo.parser.parse(e.parentNode); }); } XSP.addOnLoad(f); --- This function selects all input elements having an ID that ends with "_inputbox", adds the attribute "dojoType=dijit.form.TextBox" to them and runs the parser on them. It does the same for select elements having an ID ending with "_combobox". I wrapped it in a custom control, and now I can place a standard XPage listbox control somewhere and I just need to give it an ID ending with "_combobox" to transform it to a Dojo combobox. Note that you need to add the dijit.form.Textbox and dijit.form.ComboBox resources to your XPage.
Comments (7) | Permanent Link
1) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Julian, Stellar post! Thanks for sharing. Quick Question... If building this as a custom control, you only need to add dijit.form.Textbox and dijit.form.ComboBox resources to the custom control itself right? Thanks! 2) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Julian, You may also be able to do this via the Theme document by adding a control tag formatted like (replace % with the opening/closing tag: %control% %name%ComboBox%/name% %property% %name%dojoType%/name% %value%dijit.form.ComboBox%/value% %/property% %/control% %/control% This will add the dojoType entry to the html. You can read more about this at: { Link } Keith 3) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
David, yes, adding the resources in the CC is fine. Keith: that's true, but then you cannot decide which listbox you want to transform to a combobox and which not. 4) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Ahh, I see. You could define a "themeID" on the All Properties tab for the list boxes you want to transform and instead of using "ComboBox" as the name, use whatever you define in the themeID. That should make it where you can decide which list boxes get transformed and which don't. I guess it all depends on how many list boxes we're talking about. Your script may be less work than setting all of those list box themeId properties. It's kinda cool how many different ways there are to tackle the same issue. Thanks for sharing. 5) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
@Keith agree, the themeID approach is very powerful and a real time saver. I tend do use that property more and more. I find it very powerful especially when you want a specific behavior for a certain control that should behave differently from others (layouts, default links, css-framework settings and so on). I also tend to add default values for the most common properties that I use all the time (viewRoot, switching dojoParseOnload and so on). 6) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Hi, Did you fully test it ? i tried using both your technics (Theme ID and the JavaScript function) , ok it renders well my Dijit combobox but I can bind this combobox to any variable ( viewScope or directly to a document field). If I type or choose some values in my combobox and then I submit my form , nothing is saved and my form is redisplayed with an empty combobox. My form is saved only when I choose a blank value in my combobox. Thank you for some feedback about your actual test. Sorry for my english. 7) dojoType in 8.5.1 / use a nice dijit.form.Combobox without the OpenNTF Extension Library
Vinc, sorry for the late reply. It's true: when you enter a new value in the combobox which is not in it's selection list, you cannot save the document anymore. I'm working on that :-) |
You can hire me.
See my Linkedin profile for details.
Thanks for reading and have a nice time here! Please note my Apps for iPhone and iPad:
NotesBook: takes your Lotus Notes Notebook (Journal) to your iPhone and iPad
xpageswiki.com: huge XPages Tips & Tricks collection for iPhone and iPad
|
