Remember way back I talked about using buttons with the same name as a Field to make accessible forms that needed no JavaScript yet knew which button a user had pressed. The HTML looks like this:

<input type="submit" name="Action" value="Approve" />
<input type="submit" name="Action" value="Reject" />

On the Form we have a field called "Action" too and we can inspect its value to find out what the user wanted to do. All works well and it's a trick I've used a few times in the six years since I first talked about it.

Yeah, and? Well, the other week I talked about making nice-looking buttons. How about we marry up the two techniques and make an accessible Form with nice-looking buttons!?

Let's say we want the user to choose between three buttons on a questionnaire form -- Yes, No and Skip. The HTML is like so:

<input type="submit" name="Answer" value="Yes">
<input type="submit" name="Answer" value="No">
<input type="submit" name="Answer" value="Skip">

In a browser this would look something like this:

Pretty boring, right? It's crying out for some extra style. The trouble with using CSS to style input-type buttons is that once you add any styles they start to look all a bit weird and it's nigh on impossible to get a consistent appearance across all browsers. That's why I prefer to using images as buttons (see link above).

Here's the same form but with a button-like image used as the background of the buttons:

Looks better, no?

The CSS for this is quite simple:

.buttons input, 
.buttons input:focus, 
.buttons input:active, 
.buttons input:hover {
        font-weight: bold;
        color: #333;
        width: 143px;
        height: 40px;
        border: none;
        cursor: pointer;
        text-transform: uppercase;
        background: transparent url(button.png) no-repeat 0% 0%;
}

It could look a little better still though. How about adding some icons to the buttons to help the user distinguish between them. The trouble with this is that the humble <input> element won't let you add child elements and we've already added a background, so we can't add another and we don't want to use a separate background image for each button now, do we!?

This is where sprites come in! Here's the image I'm going to use as a sprite:

With a sprite we can use this single image as the background for all three and simply offset it's position by the right number of pixels to make it appear like a different button. The advantage of sprites being that there's less network traffic to load 1 image than to load 3 (or more), so the page loads quicker!

Using the sprite I can make the form look like this:

Now it's more user-friendly as it's a lot more obvious which button is which. Not that I'd advocate the over-user of icons, but in certain places they can really help out.

To do this we simple added an extra class of "yes" or "no" to the first two buttons. Then in the CSS we added the following rules:

.buttons input.yes {
        background-position: 0 -42px;
}

.buttons input.no {
        background-position: 0 -85px;
}

Make sense? It just moves the sprite image upward the right amount of pixels to show the right icon.

Now, some of you may be thinking the flaw in this is that I have to hard-code the button labels? Well, to get round this I use Computed For Display fields called "ButtonLabelYes", "ButtonLabelNo" and "ButtonLabelSkip". These fields hold the value to show in the buttons.

Inside your WQS you can then do something like this:

if document.Answer(0) = document.ButtonLabelYes(0) then

You can see a working demo of this here. If there's interest in it I'll update the downloadable version of that database. Just let me know.

Recent Blog Posts

193

Why The Silence? | Blog Mon, Jun 17th 2013 8:00a Jake Howlett Wow. More than 2 months since I last blogged. Which is the longest period of silence this site has ever seen. What gives? Is codestore dead? Does anyone care? Well a couple of you do. Enough to email me and ask if I'm ok. One even to say it's like he's "missing a friend", which was nice. One asked if I was still alive and I had to resist temptation of replying in the guise of my widow. The simple reason is I'm just way too busy to find the time to write on here. I'm working weekends and s [read] Keywords: domino email microsoft sharepoint

276

Mapping Document Collections To Views | Blog Thu, Apr 11th 2013 4:00a Jake Howlett It's now a couple of months since I wrote about a Super Useful Set of LotusScript Wrapper Classes, which I've written about on and off since February. Today I want to share a few more extensions I've made to them, which help massively when it comes to getting documents from views. Imagine the following use scenario: Dim factory As New CustomerFactory() Dim coll As CustomerCollection 'Let's get a collection from a view Set coll = factory.GetAll() 'Or you could to this Set coll = factory [read] Keywords: domino lotusscript notes database

247

Making Google Apps For Business Behave Like a Mail Client | Blog Wed, Apr 3rd 2013 4:16a Jake Howlett So, I mentioned that I've moved to a new PC and, for the first time in years, I didn't install a dedicated Mail client/app. Instead I'm using direct web access to Google Apps For Business (posh name for paid-for Gmail). The one thing I never liked about using Email in a browser is that I constantly close and re-open the browser. Thus, in effect, closing my email client, which I then have to remember to re-open. Now though I've made it seem like a real app. You can do this using Chrome's "a [read] Keywords: application email google

141

Documenting Your LotusScript Classes | Blog Wed, Mar 27th 2013 4:00a Jake Howlett Just a quick LotusScript tip: Hopefully you've been inspired by my recent adventures in creating custom LotusScript classes. If so, you'll have noticed that, when creating your own properties and methods in these classes that they get their own comments added in. For example, if you type "property get foo as string" and then press return, you'll see something like this:%REM Property Get Foo Description: Comments for Property Get %END REM Property Get Foo As String End Property Domino De [read] Keywords: domino lotusscript properties

125

The Perfect Desk Quest - 2013 Update | Blog Tue, Mar 26th 2013 6:20a Jake Howlett It must be time for another update on how my desk is evolving towards the elusive "perfect desk". Previous updates here. Here's my desk now, following a recent overhaul: The two main differences from before: The Lenovo T400 laptop and its docking station have gone and the left-most monitor has moved positions to be on the right. My desk needs to not only keep up with the way I work, but also the changes of the times. I decided it was time I got "with the times" and "embrace the cloud" an [read] Keywords: domino lotus notes database development email laptop microsoft office outlook server vm

162

Updating Glyphicons in Bootstrap | Blog Thu, Mar 21st 2013 4:00p Jake Howlett Using Bootstrap, whenever I want to an icon to an element, I simply write HTML like this: Add New And I get something like this: The choice of icons is documented here and the icons themselves are based on Glyphicons "halflings". All is good. However, recently I found myself wanting to use an icon to show that a document had some attachments. Naturally, I wanted a paperclip. Just like a magnifying glass denotes searching, a paperclip denotes a file attachment. Who knows why! To my sur [read] Keywords: css twitter

105

Easy Access to Sub-Collections of the DocumentWrapper Class | Blog Wed, Mar 20th 2013 12:30p Jake Howlett My favourite feature of the Wrapper Classes I keep going on about is the ready access they can give to any given class's related sub-classes. For example, let's say you have an object based on the Customer class and you want to find all their Invoices. Wouldn't it be nice to write code like this in a WQO agent:Dim customer As Customer, invoice As Invoice Set customer = New Customer(web.document) If customer.Invoices.Count > 0 Then Set invoice = customer.Invoices.getFirst() While Not i [read] Keywords: agent properties

106

Easy Access to Sub-Collections of the DocumentWrapper Class | Blog Wed, Mar 13th 2013 4:20a Jake Howlett My favourite feature of the Wrapper Classes I keep going on about is the ready access they can give to any given class's related sub-classes. For example, let's say you have an object based on the Customer class and you want to find all their Invoices. Wouldn't it be nice to write code like this in a WQO agent: Dim customer As Customer, invoice As Invoice Set customer = New Customer(web.document) If customer.Invoices.Count > 0 Then Set invoice = customer.Invoices.getFirst() While Not [read] Keywords: agent properties

93

Creating New Documents Based on the DocumentWrapper Class | Blog Mon, Mar 11th 2013 7:20a Jake Howlett So far, we've seen how to "wrap" an existing document inside a custom class, which is based on the DocumentWrapper subclass. But the document we wrap doesn't have to exist. We can use the DocumentWrapper classes to handle creation of new documents. Imagine that, anywhere in your LotusScript, you could write this: Set invoice = New Invoice(web.database.CreateDocument) invoice.Number = factory.GetNextInvoiceNumber() invoice.Value = 12345.98 invoice.Save() Wouldn't that be cool!? It's quite [read] Keywords: lotusscript database properties

158

Extending The LotusScript Wrapper Classes | Blog Fri, Mar 8th 2013 3:03a Jake Howlett The wrapper classes I blogged about in February went down a lot better than I thought they might. So, taking it further. Let's extend the DocumentWrapper class some more. Since first writing about them on here I've been busy using and extending them as I go. Here are a few examples of some of the properties I've added Simple Helper Properties Some very simple properties: WebLink, UNID and IsNew. Property Get WebLink As String WebLink = "/" + Replace(web.database.Filepath, "", "/" [read] Keywords: domino lotusscript database properties