dominoGuru.com

Your Development & Design Resource

Using the HTML Body Attributes to manipulate Domino-generated Web/Mobile client Design Elements

Authors Note: Sure, it's a hack - but it's pretty slick! ;-)

While I tend to roll my own Web and Mobile client Design Elements and not let Domino generate any of that RAD web element publishing stuff... but stuff like this is good to know!

Jake shared a method to embed a Login Form across your forms/elements/etc. A good tip, but relies on the </form>-in-the-header approach to kill the Domino-generated <form> instance so you can actually do what you want (the quick & watered-down version of Content Type overrides and building your own forms outright... but I digress)

What if you don't want to kill the Domino-generated <form>? Well, here's an option for you!

Let's say you want to put some markup between the <body> and the Domino-generated <form> elements. How can I do such a thing you ask?! Well, check this out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t, h) {
var form = document._test_bodyattributes;
if (form.onsubmit) {
var retVal = form.onsubmit();
if (typeof retVal == "boolean" && retVal == false)
return false;
}
var target = document._domino_target;
if (o.href != null) {
if (o.target != null)
target = o.target;
} else {
if (t != null)
target = t;
}
form.target = target;
form.__Click.value = v;
if (h != null)
form.action += h;
form.submit();
return false;
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" ><div id="popup">&nbsp;</div>

<form method="post" action="/DrawingBoard.nsf/test_bodyattributes?OpenForm&Seq=1" name="_test_bodyattributes">
<input type="hidden" name="__Click" value="0">Test</form>
</body>
</html>

All I did to generate the above.... markup <shudder> was to modify the HTML Body Attributes, add a closing > to complete the <body> element, and add a div element named popup.

{><div id="popup">&nbsp;</div}

As you can see, I close the <body> element first, but leave the <div> element open-ended. The HTML Body Attributes will force a closing tag (>), which while intended to close the <body> element I'll be more than happy to use to close my <div> element!

Now, as I mention in my comments on Jake's post, I typically have a div called popup that I use AJAX (or the ol' iframe-hack) to populate with functional content - such as a form that, upon submission, populates certain "locked" fields on the main form. Think about a name picker widget or something like that to get an idea of what I'm talking about here.

Since this popup div sits above/outside of the main <form> element, I don't have to worry about nested forms and can do pretty much whatever I want!

... but I'll stick to rolling my own thank-you!


About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.



More from dominoGuru.com


dominoGuru.com is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, dominoGuru.com by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.