Step 09: Prospective Client (Part Four)
From PikaDocs
JavaScript Jamboree
To finish off the redesign of the Prospective Client page, we've made some modest tweaks using JavaScript (http://en.wikipedia.org/wiki/JavaScript). The first and larger set of javascript coding builds on the existing Pika validation code to target field entry errors for several of the form fields. The second, smaller code tweaks have to do with creating an embedded javascript event that triggers a pop-up window offering context-sensitive help.
| Table of contents |
Incorrect, Incomplete or Impratical Data Entry
The problem, of course, is familiar: The Prospective Client page has seven types of form fields:
- First name
- Middle
- Last or Org. name
- Suffix (Jr. - Sr. - etc.)
- DOB
- SSN
- Phone
But what happens if a required field is left empty? Or even if not required, the field is completed with invalid data? Or the field used (e.g., a search for all the records with the first name "Robert") offers no useful search results? The solution, of course, is "Validate, baby!"
Out of the box, Pika provides a partial answer to the problem because it includes a javascript routine that validates SSN (Social Security Number) and Phone fields. The Pika default search functions also provide practical limits on what one can search for, to assure the search results are meaningful. For example, Pika will search by any combination of "last name" or "social security number" or "phone number" because the search results will either identify a specific person or place your search results "in the zone." But it will not search solely based on "first name" or "date of birth" because such a search criteria applied to a large database is simply too general to be useful.
Building on the original Pika javascript code, we've added a combination of an external javascript file called validation.js; and internal, embedded scripting. In combination, these scripts accomplish the following validation functions:
- If the user totally zones out and leaves all the fields empty and attempts a search, they receive an error or alert message ("Enter something I can search for").
- No single field is required, but at least one of the following three fields, at a minimum, must be used to conduct a search:
- Last or Organization name
- SSN
- Phone
- If you search solely on the basis of the "first name," "middle name," "suffix" or "date of birth" fields, you will get an alert message ("Enter something I can search for").
- Dates entered into the DOB field must be "real," i.e., you cannot enter a birth date for someone so young she has not yet been born; or so old that he was born, say, sometime around the Civil War. (At risk of being called "ageist," we've set the validation to trigger an alert for any birth date exceeding 120 years of age.)
- The DOB, SSN and Phone fields include format "masking" so that slash or hyphen separators are automatically entered as the user keys in the numbers For example, keying in a date of birth as 12311989 is automatically formatted as 12/31/1989 without the user having to enter the separators. Similarly, keying in a SSN as 55555555 is automatically formatted in the form field as 555-55-5555.
Pop Goes the Pika!
As part of the Claire design, we are also experimenting with peppering some pages with embedded "Help" links that trigger a pop-up window with context-sensitive help. The thought is to create a series of help files, a click away for newbies to the Pika CMS, that explain what a field or button does, or possibly what the policy or rules are that apply to the particular information being entered.
Our first such experiment is on the Prospective Client page, in the list of search results, where we've created a set of custom button options to use the listed name to view its contact information, create a new intake using that person's information, or directly create a new case record for that same person:
Click on the "?" button and you get a context-sensitive pop-up window:
This type of thing can be easily created within any Pika page using three components:
- A javascript function (http://www.w3schools.com/js/js_functions.asp) that executes the command to pop open the new help window.
- A javascript event (http://www.quirksmode.org/js/introevents.html) that triggers the foregoing function.
- The pop-up window itself.
For this project we've posted each of these elements. The javascript function and javascript event are detailed at Project Claire: JavaScript ~ Pop-up Window Tutorial. The javascript event is embedded in the a (anchor) tag. When clicked the link simply calls the particular pop-up page (help_prosepctive.html), here located in the Pika default /helpdocs subdirectory.
A sample template for the pop-up window itself (help_pop_up.html) is posted at Project Claire: help_pop_up.html You can see how all three of these elements are integrated and applied by viewing them in context, in the Project Claire: intake_contact_list.html template.
In our example, the styling of the pop-up help window itself is controlled with the following selectors in the Claire CSS code:
#help {
padding: 10px;
background-color: white;
font-family: verdana, arial, sans-serif;
}
.close-window {
float: right;
font-size: 95%;
margin-top: 0;
}
.close-window a:link,
.close-window a:visited {
color: blue;
font-weight: bold;
}
.close-window a:hover,
.close-window a:active {
color: gray;
background-color: transparent;
}
#help h1 {
font-size: 120%;
margin-top: 0;
}
#help h1 span {
color: #7F7C6A;
}
dl, dt, dd {
margin: 0;
font-size: 95%;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 10px;
}
Two final notes: Because the pop-up window is context generated, not dynamically generated as is the page from which it is triggered, you cannot rely on the [base_url] relative path statement used in the default.html template to locate the danio.css stylesheet:
<link href="%%[base_url]%%/css/danio.css" rel="stylesheet" type="text/css"/>
Instead, you need to specify the relative or absolute path so that the pop-up page knows where to look for the stylesheet. Here, we use its absolute path on the webdogs.org server:
<link rel="stylesheet" type="text/css" href="http://webdogs.org/pika/css/danio.css" />
Next: Step 10: Usability and the Title Attribute
Related articles and files:
