Step 06: Prospective Client (Part One)

From PikaDocs

Table of contents

Overview

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:

 Intake button on horizontal menu

 "Create New Intake" link on vertical menu

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:


 Search Contacts button


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:


 Search Contacts results

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:

<table> <!-- "Wrapper" TABLE around everything -->

    <tr>

        <td> <!-- First TD column in "wrapper" TABLE, on left with search FORM fields -->

            <h2>Prospective Client</h2>

            <form>

            <p>
            <!-- FORM fields for name, DOB, SSN and Phone -->
            </p>	      
			
            <p>
            <input type="hidden" />
            ...
            <input type="submit" value="Search Contacts" />
            </p>

		    </form>
            
        </td> <!-- First TD column ends here -->
		
        <td> <!-- Second TD column in "wrapper" TABLE, with search results -->

            %%[search_list]%% <!-- Generates content for first "nested" TABLE with phonetic matches -->
            
            %%[ab_list]%% <!-- Generates content for second "nested" TABLE with address book matches -->

            <table> <!-- TABLE structure for first and second TABLEs nested within second TD column -->

                <tbody>

                <tr>

                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Birth Date</th>
                    <th>SSN</th>
                    <th>City</th>

                </tr>

                <tr>

                    <td>
                    <!-- Pointer image -->
                    </td>
			       	
                    <td>
                    <!-- Client name -->
                    </td>
			        
                    <td>
                    <!-- Client phone -->
                    </td>
			        
                    <td>
                    <!-- DOB -->
                    </td>
			        
                    <td>
                    <!-- SSN -->
                    </td>
			        
                    <td>
                    <!-- City -->
                    </td>

                </tr>

                </tbody>

            </table> <!-- This is where the "nested" TABLE structures end -->

		<br />
        
        <hr />

        <br />

        <h2>Create a New Client Record</h2>

        <p>
        <!-- Link for creating a new client record -->
        </p>

        </td> <!-- Second TD column within "wrapper" TABLE ends here -->

    </tr>

</table> <!-- This is where the "wrapper" TABLE ends -->


<script language="JavaScript" type="text/javascript">
...
</script>    

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:


 Image showing borders of TABLE and TD structural elements


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.


Return to Table of Contents

Related articles and files: