wissel.net

wissel.net

Usability - Productivity - Business - The web - Singapore & Twins

Multi column checkboxes and radio buttons

Brian shared his implementation of multi-column check boxes. Having such a control mimicking the functionality of the Notes client is pretty helpful. Brian's approach however wasn't very re-usable, so I though of a way to come up with a more reusable solution:
Multi column check boxes in various views
The resulting custom controls can be easily added to any page with a few lines of code. You need to reference 2 supporting JavaScript libraries and then add a few lines to your page:
  1. < xc:MultiColumnCheckBox numberOfColumns="3"dataBindingName="document1.CheckDemo">
  2.     < xc:this.FieldValues> < ![CDATA[#{javascript:return ["black","blue","red","yellow","white","brown","gray","vomit","green"];}> </xc:this.FieldValues>
  3.     < xc:this.disabledValues> < !CDATA[#{javascript:return ["gray","vomit"}]]> </xc:this.disabledValues>
  4. </xc:MultiColumnCheckBox>
You have 4 parameters:
  • numberOfColumns: (Integer) number of columns to use
  • dataBindingName : (String) field to bind the control to including the datasource
  • FieldValues: (Array of Strings) Values to offer in the control
  • disabledValues: (Array of Strings - optional) Values that are disabled
The same parameters also work for a group of radio buttons:
  1. < xc:MultiColumnRadioButton numberOfColumns="3" dataBindingName="document1.RadioDemo">
  2.     < xc:this.FieldValues> < ![CDATA[#{javascript:return ["Porsche", "VW", "BMW", "Mercedes", "Opel", "Ford", "Audi","Lada"]}]]> </xc:this.FieldValues>
  3.     < xc:this.disabledValues> < ![CDATA[#{javascript:return ["Lada"]}]]> </xc:this.disabledValues>
  4. </xc:MultiColumnRadioButton>
The controls are available for download on OpenNTF (of course you use Guo Yi's Import and Export for Designer for this). Enjoy and share your ideas for v1.1
As usual YMMV.

Posted by on 13 July 2010 | Comments (e) | categories: XPages

Comments

  1. posted by Ian Randall on Tuesday 13 July 2010 AD:
    Stephan, you must have a high demand for vomit-grey Lada's in Singapore.
  2. posted by Brian Moore on Tuesday 13 July 2010 AD:
    This is great work. You are right, my approach wasn't very flexible - and I knew that. But I've not been in JavaScript long enough to come up with this. My attempt was some early steps that you have really taken. I can't tell you how much this will help. You're Brilliant!

    Cheers,
    Brian
  3. posted by Stephan H. Wissel on Wednesday 14 July 2010 AD:
    @Brian: your post inspired me to look for a easy to use solution.

    @Ian: nope. Vomit-gray Lada's have been banned (like chewing gum) by the authorities in Singapore as potentially harmful.
    Emoticon smile.gif stw
  4. posted by RobShaver on Friday 23 July 2010 AD:
    This doesn't look right:

    < !CDATA[#{javascript:return ["gray","vomit"}]]>

    should be:

    < !CDATA[#{javascript:return ["gray","vomit"]}]>

    Now can you make it so that the number of columns is picked up from a field on a config document and the check box values are picked up from a list in the same config document? (That's what I had to do on this application:

    { Link }

    All the check boxes are populated from documents the site owner populates for each city. (And I did it without xPages. I'm so proud. Emoticon biggrin.gif )

    Peace,

    Rob:-]
  5. posted by RobShaver on Friday 23 July 2010 AD:
    #4 submitted with no web site so here it is: { Link }
  6. posted by Stephan H. Wissel on Saturday 24 July 2010 AD:
    @Rob: Right, little typo when fixing the converter that turns XML into HTML markup.
  7. posted by Patrick Picard on Friday 10 December 2010 AD:
    Hi Stephan, great stuff, exactly what i am looking for a pet project.

    Just wanted to let you know, the checkboxes fail to be checked when the document is in read mode.
  8. posted by Stephan H. Wissel on Friday 10 December 2010 AD:
    @Patrick: noted. Anyway - Checkboxes are not designed for read mode. Users feel betrayed when they can't click on a checkbox. Better to show a list of the selected values. It also makes a better read only UI: you see the selected values without the need to read the value and process has|has not a checkbox.
    Emoticon biggrin.gif stw
  9. posted by Tom Franks on Friday 04 March 2011 AD:
    Stephan, are there instructions somewhere on how to install the import & export tool into dde 8.5.1?
  10. posted by Tom Franks on Friday 11 March 2011 AD:
    So, in attempting to use this, it appears to be limited to one use per page? What would have to be done to allow multiple uses?

    Thanks!
  11. posted by jamille on Thursday 12 April 2012 AD:
    I believe to have multiple cc on same page you need to change the XSP.addPreSubmitListener, last parameter set to something unique like: #{javascript:compositeData.dataBindingName.split(".").pop()}, otherwise the presubmit event only fires once for the first control on the page.
  12. posted by Jim on Friday 24 May 2013 AD:
    I *like* it! My only question, and forgive me if this is simple (I seem to be brain dead these past few days), but how can I attached an event or listener to this? I have a radio button group and would like to show/hide elements based on which option is chosen.

    Thanks,

    Jim
  13. posted by Ashfaq Khatri on Wednesday 03 July 2013 AD:
    Thanks for contribute your work. Please let me know how can I add event to this control (e.g: onClick).
  14. posted by Stephan H. Wissel on Thursday 04 July 2013 AD:
    @Jim/Ashfaq: the onClick and onChange event handlers of radion buttons and checkboxes constantly get abused for UX violations and I'll be no party to that Emoticon smile.gif.

    Of course you can use a dojo event listener to do some local interaction (like showing/hiding options). I strongly advise against server round trips.