Well-Formatted Checkboxes in Domino
In the Notes client if you have a multi-column checkbox with lots of options it looks quite presentable. Something like this:
When rendered in the browser that same field looks something like this:
Not good.
Recently I had to get round this and make the browser check box options more presentable. To do this I hid the actual field and used a computed formula. The formula is something like this:
field_name:="County"; options:= @DBColumn(""; ""; "Counties"; 1); columns:=3; @If(!@IsDocBeingEdited; @Return(@Implode(@GetField(field_name); ", ")); ""); count:=@Elements(options); html:="<table><tr><td>"; @For(n:=1; n<=count; n:=n+1; html:=html + "<input type=\"checkbox\" " + @If(@Contains(@GetField(field_name); options[n]); "checked "; "") + "name=\"" + field_name + "\" value=\"" + options[n] + "\" /> " + options[n] + @If( @Modulo(n; @Round(count/columns) ) = 0; "</td><td>"; "<br>")); html + "</td></tr></table>"
The idea of the code is that you can re-use it for any field simply by changing the first two/three lines of code. The options variable could be hard-coded, refer to a field or use formula, as above. Hopefully it's flexible enough to use in any scenario.
You can see a demo of this in the "choices" view in this demo database. You can download this database here. Hope you like.
Skip to the 
You can subscribe to an individual
hello
What about using label as a previous post ?
{Link}
--> juste adding <label> before the input tag and a </label> after the options[n]
(could be added to the third version)
This is great Jake, formatting checkbox fields on the web from Domino has always been painful.
Good idea Mathieu. Didn't think of that.
Nice, but what about in read mode? Often you want to see the choices in read mode as well, not just what is selected already.
Also, I am visiting London for the first time this weekend. Any suggestions for must see/do while in London?
I've done something similar, but with SPAN tags and CSS. Here is the formula for the field choices:
tmp := @DbColumn("":"NoCache";"";"Picklists";2);
@If(@IsError(tmp);"";"[<span>"+tmp + "</span>]|" + tmp)
I then surrounded the field in a div of class checkbox and used the following CSS to format the field.
.checkbox{padding: 0px;margin: 0px;width:430px;border : 0 none; border-style : none;}
.checkbox span{padding: 0px;margin: 0px;display:inline;float:left;width:185px;}
.checkbox input{padding: 0px;margin: 0px;float:left;width:30px; border : 0 none; border-style : none;}
.checkbox br{clear:both;}
The great thing about this method is that you can easily change the number of columns shown. Just change the columns as you normally would and modify the widths accordingly.
Sean---
Sean's solution was at notestips.com long back. I was just searching for the same few weeks back, but the site is not there anymore.
Anyone knows what happened to Mike Golding.
I would like to see the site up even if he's not planning on maintaining the site anymore.
Had wealth of information on that site.
Or maybe he can give his database away for the domino community.
It's funny you mention that veer as that's the first thing I went to look for. I've spoke to Mike since and he's going to hand over hosting of a read-only copy of the site to me.
Another idea:
You can use the Dimensions plugin with jQuery to figure out the width that Domino's default checkbox mess starts at, and then compute how wide the "columns" need to be in order to make it look good. Then, you can set the widths dynamically. This way, you don't even have to hard-code any widths in there at all.
I should try that...
Notestips has gone silent? Don't tell me we've lost another one... Please post an update on Mike G. when you revive the site.
That's good to know Jake. I'd actually been using Mike's solution for some time - with a couple of variations here and there, but the same basic principle.
To be honest, why domino can't generate this crap and have the "label" stuff work it as well automatically is crap. So simple, yet it really makes stuff look nice.
Keep up the great work. Glad to see Mike's data will be back up again!
@Bill E,
Just one more reason to post on Bob Balaban's blog. His focus is to "make domino a kick @$$ development platform" and plenty of us would say that having domino render HTML in a sensible way is a HUGE step in the right direction.
{Link}
Here's the formula I use. Edit the first three fields.
REM {Change FieldName to the name of the field you want to use in a check box};
FieldName := "County";
list := @DBColumn(""; ""; "Counties"; 1);
cols:=3;
w:=@Text(@Integer(90/cols));
e:=@Elements(list);
f:=@Round(e/cols);
g:=@If(f*cols<e; f+1; f);
colLines:=@If(cols>1;g;e);
temp := @If(cols>1;"<div class=\"column\" style=\"width: "+w+"%\">";"");
@For(n := 1; n <= e; n := n + 1;
temp := temp + @If(n>=g & @Modulo(n;g) = 1;"</div><div class=\"column\" style=\"width: "+w+"%\">"; "") + "<input type=\"" + inputType + "\" name=\"" + FieldName + "\" id=\"" + FieldName + @Text(n) + "\" value=\"" + list[n] + "\"" + @If(@IsMember(list[n];@GetField(FieldName)); " checked"; "") + "><label for=\"" + FieldName + @Text(n) + "\" class=\"" + inputType + "\">" + list[n] + "</label>"+@NewLine);
temp+ @If(cols>1;"</div>";"")
And here's the CSS that goes along with it.
<style type="text/css">
div.column { float: left; padding-right: 0.75em; }
table.columns { border-collapse: collapse; border-width: 0; }
table.columns td { padding: 0 1em 0 0; }
</style>
With the assistance of a colleague, the code has been slightly modified from Jakes original entry, by adding Mathieu's hint about labels and putting a simple bit of HTML code as below. I have put some REM's in to help me -
field_name:="enteryourfieldname";
options:= @DBColumn(""; ""; "(hiddenviewname)"; 1);
REM "or use hardcoding to put your values in";
REM "the example used below is taken from one of my databases";
options:= "Call" : "Change" : "Problem" : "Visit";
REM " change the value for 'Columns' to however many you wish to use";
columns:=4;
REM "Nothing in the code below should be changed";
@If(!@IsDocBeingEdited;
@Return(@Implode(@GetField(field_name); ", "));
"");
count:=@Elements(options);
html:="<table><tr><td>";
@For(n:=1; n<=count; n:=n+1;
REM "The width of the check boxes can be changed by varying the 'width' setting in the line below";
html:=html + "<label style='padding:0; width:85px'>"+options[n]+"</label> <input type=\"checkbox\" "
+ @If(@Contains(@GetField(field_name); options[n]); "checked "; "")
+ "name=\"" + field_name + "\" value=\"" + options[n] + "\" /> "
+ @If( @Modulo(n; @Round(count/columns) ) = 0; "</td><td>"; "<br>"));
html + "</td></tr></table>"
There is an issue with using @Contains. For instance, lets say you have two options named "string" and "superstring", when you test to see if @GetField(field_name) contains "string" but the field actually has the value "superstring", it will return true and check the box. It would be more exact to use @IsMember(options[n];@GetField(FieldName)).
The other problem I'm having with this is if the user unchecks all the checkboxes then the document is saved with the values the same as last time. What I mean by this is you can never clear the field. At least one checkbox will always be checked once any checkbox has been saved. I think this has something to do with how Notes handles things.
I solved this problem by adding a hidden checkbox to ever group using this code:
"<input type=\"hidden\" checked name=\"" + field_name + "\" value=\"(blank)\" />"
And then added the following input translation program to the field_name field:
@Replace(@ThisValue;"(blank)";"")
This works as long as one of your checkbox options isnt "(blank)". If it is, pick some other string.
You can see this in action on the new web site I'm building:
{Link}
Best regards,
Rob:-]
@Rob: Domino can do that natively; that way you don't need an input translation on your field.
Include the following line (replace XYZ by the fieldname):
<input name="%%Surrogate_XYZ" type="hidden" value="1">
Jake described that last thing here: {Link}
I tried this wonderful code but I'm running into an issue when you de-select all values and save it will not remove all values. If I first select 3 values and save, all is OK, if I remove two values and leave one, all is OK. When I try to remove the last one, it won't let me. It keeps the one value all the time. Anyway around this? Thanks.
Aha. You need to read this http://www.codestore.net/store.nsf/unid/EPSD-5GAR2U