Step 06: Prospective Client (Part One)
|Table of contents|
With completion of the prior five steps, the elements making up the Pika default page template are now restructured and restyled and have been applied head on to the new Home Page makeover. Here in Step 06, we move on to the next page in the normal workflow, the Prospective Client page.
But before we get into the modifications we've made to the Prospective Client page, let's breakdown the underlying template and detail what is what and why. In this first part of our take on the Prospective Client page, we'll examine the intake_contact_list.html template that defines the basic look and feel of the Prospective Client page. In Part Two, we'll explain our changes in the structural markup and CSS presentational code. In Part Three we go deep to get control of the various table elements that contain and control display of the search results for the page.
The Prospective Client Search Function
From the Pika Home page, you go to the Prospective Client page by clicking either the "Intake" button on the horizontal menu bar at the top, or clicking "New Client Intake" at the top of the vertical list of links on the left, as illustrated here in the Claire design:
Once there, in the original Pika design what you see is a page that, initially, is largely blank except for a set of form (http://www.htmldog.com/reference/htmltags/form/) fields on the left for entering different types of identifiers: whole or partial name, date of birth, Social Security number and/or a telephone number. Once entered, you click the "Search Contacts" button to see if matching information exists in the Pika contacts data table:
This generates three different lists of information:
- A list of the closest phonetic matches, if any;
- A list of address book matches with the closest match marked in the middle of the range with a "pointer;" and
- A third, numerical list of links at the bottom for viewing additional page listings of contact names.
Each specific name listed provides a link to invoke the underlying contact information for each match, or directly use that information to create a new record by clicking on the adjacent "Use" button:
Revealing the Underlying Structure
But what is going on here structurally?
The intake_contact_list.html template is what provides the structure holding both the "side content" (the form fields) and "main content" (the tabular data (http://www.456bereastreet.com/archive/200410/bring_on_the_tables/) you see as search results) for the page. The XHTML structure of this template is basically one large table (http://www.w3.org/TR/html401/struct/tables.html) built at its outer perimeter to contain everything, i.e., all the page "content" (both the side and main content), with a slew of various form and paragraph (http://www.w3.org/TR/html401/struct/text.html#edef-P) elements, plus three whole other nested tables specifically intended to contain the search results, described above, for:
- Phonetic matches
- Address Book matches
- Numerical links to more page listings of contact names
To better illustrate this structure, the following is a heavily stripped-down version of the structural markup (with added comments) showing the relative relationship of the elements in the template:
To further visualize this structure, here is a screenshot of the same template showing the search results, with all four tables embedded in the page outlined with a thick red border. The "wrapper" table encloses all the "content" areas of the page, and inside of that are the three nested tables containing the generated search results described above:
Next: Step 07: Prospective Client (Part Two), detailing how the structural markup in the intake_contact_list.html template is modified to utilize a different structure to hold the form elements and limit table elements for use as containers for tabular data only.
Related articles and files: