Web Action Buttons that don't suck.

If you've ever tried to use Action Buttons from the web you know how ugly they are. Butt ugly. I'm not sure why they have to be that way but, well, they are. It's bad enough that for years now I've simply avoided using them. When I needed functionality like I'd normally have used Action Buttons for, I'd build it myself some other way.

I like the way they look in the Notes client and want them to look more or less like that from the web. In ProcessIt! Bill and I went so far as to build a frameset so the Action Buttons could be at the top of the window (and not scroll) and the form at the bottom of the window (and scrollable), just like in the Notes client. We used graphics made from screen shots of actual Action Buttons from the Notes client so things would look right, too.

As a solution, that approach works really well and looks great but there's a price to pay: It's a pain in the butt to get working effectively. Because they're in separate frames every click has to send an instruction to the other frame and then you have to get whatever it was you were trying to do to work. It's a lot of messing around just to get a button to work nicely, and not for the timid.

In all, not a very good solution for just any old application.

So, what do you do?

With some JavaScript and a little CSS, you can spruce your Web Action Buttons up to the point they look so good you might even want to just use them and save all the heroics of framesets and the like.

Here's what I'm talking about: Action Buttons from the web normally look like this:

Yuck. Not in my database, thank you very much. But it doesn't take a whole lot in the way of changes to make it look good enough to use, like this:

Better? Absolutely. Also, it has roll-overs so it looks like this when the mouse goes over...

...and like this when the mouse is clicked:

Much better. You don't like 'em? Fine, follow the directions and mess with the CSS until you get 'em to look a way you like better. The trick is figuring out a way to apply CSS rules to them in the first place.

Now, before I go further, let me say that the look-and-feel part of this solution is not something we came up with ourselves. In the grand tradition of web development, I stole the basic idea of how to do this from Henry Newberry (who, in turn, stole it from somebody else) and then modified it until I was content with the way it looked.

However, the second part of the challenge--getting those good-looking buttons to actually do something useful--that's all Bill.

Making them look good

The trick to making Action Buttons look good from the web is coming up with a way to get a handle to them with CSS. The solution, it turns out, is amazingly simple. Web Action Buttons are actually an HTML table. The tables in your document are a part of an array (of tables). Since the Action Buttons are always at the top of the document, they are ...tables[0], the first table in the array. You can get a handle to it with this:

document.getElementsByTagName("Table")[0];

Hm.

Once you have a way to get a handle to the table, you can then write a little JavaScript to loop through its row (TR) and cell (TD) elements and assign classes and roll-over behaviors which can, in turn, be controlled with CSS.

To make this work, add the following code into the JS Header of your Form:

function setupABarTables() {
   // set classes for Action bar
   var vTable = document.getElementsByTagName("Table")[0];
   vTable.className = "ABTable";
   var ac = vTable.getElementsByTagName("TR" );
   for (i=0; i < ac.length; i++) {
      ac[i].className = "ABRow";
   }
   var ac = vTable.getElementsByTagName("TD" );
   for (i=0; i < ac.length;i++) {
      ac[i].className = "ABCell";
      ac[i].onmouseover = function() {this.className = "ieHover";}
      ac[i].onmousedown = function() {this.className = "ieClick";}
      ac[i].onmouseout = function() {this.className = "ABCell";}
   }
}

Then, add one line of code to the onLoad event of the Form:

setupABarTables();

Finally, build your CSS to use these new classes. Yours can be whatever you want to be, but here's what I prefer:

<style type="text/css">

.ABTable {
    margin-top: -5px;
    background: #E7E7E7;
    }

.ABCell {
    font: 8pt Verdana;
    padding: 5px 8px 3px 5px;
    border: 0;
    background-color: #DDD;
    line-height: 1.9em;
    }

.ieHover, .ieClick {
    font: 8pt Verdana;
    padding: 4px 7px 2px 4px;
    border: 0;
    background-color: #DDD;
    line-height: 1.9em;
    }

.ABCell img, .ieHover img, .ieClick img {
    float: left;
    }

.ABCell a, .ieHover a, .ieClick a {
    text-decoration: none;
    color: black;
    }

.ieClick {
    border-top: 1pt AAA solid;
    border-left: 1pt AAA solid;
    border-bottom: 1pt white solid;
    border-right: 1pt white solid;
    }

.ieHover {
    border-top: 1pt white solid;
    border-left: 1pt white solid;
    border-bottom: 1pt AAA solid;
    border-right: 1pt AAA solid;
    }

</style>

That's all there is to it. Presto-changeo, you've got good-looking buttons. But how do you do anything useful with them? Ah. That's the better part of the story, and the bigger part of the challenge. Enter Bill.

Making them do something

There are a few simple things you can do from the web with Action Buttons. You can save the document, for instance, using @Command([FileSave]). There are a few other @Commands which work from the web but compared to the Notes client, the things you can do from the web are severely limited.

Or, at least, it seemed that way.

Building the ProcessIt! web interface, our goal was to match the Notes client experience and capabilities feature by feature, which meant we needed a much richer set of capabilities than anything that could be done with a few @Commands. So what to do?

The solution Bill cooked up is so elegant and so simple I'm a little shocked we hadn't thought of it before. Let me explain it by building a little background:

If you've done much in the way of web development with Notes you know you can run a WebQuerySave agent when the document is submitted (that is, saved). But there's only one WebQuerySave agent per form. What do you do if you have a whole list of possible actions you may want to take? That was the problem we faced. Among the possible actions a user might choose were:

Send for processing (launch the workflow)
Approve
Reject
Return to a previous approver
Reassign to a different approver
Put on hold
Assign designated approvers
And so on

You get the idea. Lots of different actions but only one agent. The key to the solution is the realization you don't have to run @Formulas in your Action Buttons. You can run JavaScript. Hm. With JavaScript you can set values in fields. Um hm. With a WebQuerySave agent you can read values from fields.

Oh.

We put a field on our form called TSWFWebActionToTake. It was hidden when reading and had HTML Attributes of type="hidden" to keep it from being visible to users in the browser. But it was visible to JavaScript.

In the Action Buttons, we run two lines of code, one to set a value in TSWFWebActionToTake and one to submit the document:

document.forms[0].TSWFWebActionToTake.value = "Approve";
document.forms[0].submit();

Then, in the WebQuerySave agent, a simple Select Case statement was used to figure out what needed to happen:

Select doc.TSWFWebActionToTake(0)
   Case "Approve"
      Call UIApprove()
   Case "Reject"
      Call UIReject()
   Case "Disapprove"
      Call UIDisapprove()
   Case "Return"
      Call UIReturn()
   Case "Reassign"
      Call UIReassign()
   Case Else
      Call UIExit()
End Select

Each part of the Select Case statement then called a function specific to whatever it was the user had directed be done. Last but not least, we cleared out the value of TSWFWebAction so the next time around it would be empty and ready to go again.

doc.TWSFWebActionToTake = ""

Simple, easy, and amazingly flexible. Typical Bill stuff and a big improvement on the Action Button functionality you get straight out of the box.

1. Richard Schwartz07/04/2005 12:12:51 AM
Homepage: http://www.rhs.com/poweroftheschwartz

Hey, here's an (undeveloped) thought about this. Once you've found the "Table" [0] element in the DOM, grab the outerHTML. Also, set the visibility of the table so that it is hidden. Don't worry... we'll bring it back. Somewhere else!

Create a new div and put the HTML that you grabbed from the table into the new div's innerHTML. Now you've got the table in a div. Float the div's z-level up above the rest of the page, place it at the top of the page, and hold it's position fixed. My CSS is still weak. Not 100% sure if you can do this, but I'm pretty sure. If it works, you've got the same effect as using a frameset to keep the action buttons from scrolling, but without all the bother of making the separate frames talk to each other.

Whaddaya think?

-rich

2. Scott Good07/04/2005 03:24:33 PM
Homepage: http://www.scottgood.com

THAT is an interesting idea, Richard. I'm going to try it when I get a few minutes.

Thanks!

3. Richard Schwartz07/05/2005 02:42:30 AM
Homepage: http://www.rhs.com/poweroftheschwartz

Looks like Jake Howlett has figured out the CSS for keeping an action bar at the top, but he's using hand-coded action buttons rather than letting Domino generate them. See here:

http://www.codestore.net/store.nsf/cmnts/63B6B49080CAA66D80256F65003B6C0B?OpenDocument

-rich

4. Alan07/05/2005 12:20:34 PM

Gotta love the idea. Let Domino generate the code and then grab the element and restyle it to look better. I do that to make the "butt-ugly" calendar view a bit more easy to look at. Nice post - thanks for sharing

5. Scott Good07/05/2005 01:28:20 PM
Homepage: http://www.scottgood.com

I'd like to know more about that, Alan. What have you done to the calendar views (because I hate 'em so much from the web I try not to use them).

6. Peter Cong08/25/2006 03:38:31 PM

Hi,Scott;
This is a good solution , it works, but can we do some more changes?
My view are categorized views, when I click the trwisty to expand it, if that category only has one document, it is OK, but if it has many documents to expand together, I still can see the action button flashing, and the default notes action button appear and then very quickly covered by the modified button, so my question is: can we do some changes to make the action button stable, even do not flash to let the default notes action button appearing ?

7. fdg07/03/2007 06:45:15 AM