Saturday, February 24, 2007

Validation with "Yellow-fade" in the Notes Client

I'm not done yet with JavaScript in the Notes Client.. :D






(The fade is a lot smoother in reality. Low framerate on the flash.)

The yellow-fade can be done on the form you're typing in as well, but that wouldn't look nice. The first field with error gets focus. I'm using setInterval and an array of color-codes to animate the background.

There are advantages and disadvantages using framesets for debugging.
Advantages:
- Always visible (layers are absolutely positioned). If there are many invalid entries, it's easy to forget what was invalid (messagebox)
- You can "animate" the background-color independently of the other frames (FrameName.bgColor)

Disadvantages:
- Always visible (takes up screen estate)

What I don't seem to get around, is using notes-fields for the error messages. This means that you see that they are editable fields. Native OS-fields, which can be borderless doesn't seem to be able to have transparent background(?), and I don't have write-access to computed fields with JavaScript.

I could use a hack to execute Lotus-Script. An editable field hidden by a layer.
Set the value of the field with javascript, "status-header;status message", where status-header in the example above would be error. OnExit ( field.blur() ) on the "LS-field", set value of computed fields (split by ";"). The problem with this is that you have to move the "hiding-layer" every time you add content to the form.


27.02.07 Forget the above. I just tried again. It totally works setting computed field values using javascript.


I'm testing out the possibilities for cross-client (web/notes) for the most common validations. The scripts that gives functionality to the validation would be different according to the client (on the web, using framesets is not an option). What would be common would be the syntax for which fields should be validated, and how they should be validated.

To say which fields should be validated, in the current version, I only need to type this:

var doValidationOn = {
"notEmpty": {"ktype":"Customer Type", "forename":"First Name"}
}

The syntax is:
{
"name of validation" : {
"stored name of field":"Title to show",
"etc":"etcTitle","and so":"on.."
}
}

I think there are smarter solutions. I'm also going to try to add a className-attribute on all fields that's inn an array onload. Although these className's will have no effect on the field in Notes, they can be used on the web for "Really easy field validation", and since every element in the client is an object, I can (probably) use that property to control the notes validation.

var fieldValidation = {
//name of validation : {"stored field":"field title"}
"required" : {"first_name":"First name","last_name": "Last name"},
"date" : {"date_of_birth" : "Birthdate"}
}

By the way, I'm sorry that i have no structure in my posts.. It's all down to lazyness. My plan for this post was just to post the flash, but then my head started butting in.. :[

0 comments: