This topic is locked

A way to handle a long text field in a List page

5/31/2009 8:36:08 AM
PHPRunner Tips and Tricks
G
giles author

One of my clients has a list page displaying information on current projects. There are always many projects and there are quite a few fields displayed in the list so the amount of space given for some field is very limited. However they do want to be able to see a Notes field which may be a few hundred characters long without having to click through to the view or edit pages.
Setting the "truncate large text fields" to a smaller value worked for the Notes field but left other fields (e.g. Project Name) without enough space so that was not an option.
The solution found was to use a mouseover event on the Notes cell in the list page to display the text via javascript by modifying the list page with Visual Editor....
Example:

<TD class=borderbody vAlign=middle align=middle width=93 {if $row.1Notes_value!=null}onmouseover='Tip("{$row.1Notes_value}")' {/if}$row.1Notes_style}> {if $row.1Notes_value!=null}More...{/if}&nbsp; </TD>
This modification does the following:

  1. If the value of the Notes field is not null then set the mouseover event to activate Tip, a javascript function, with the value of the Notes field. Please note that this was positioned inside the <TD > tag.
  2. If the Note field is not null display the letters "More..." instead of the full Notes field to indicate to the user that there are notes to be read for this project.
    When the user displays the list page and mouses over the Notes field for a relevant project then the Notes appear like a tooltip.
    The Tip javascript function is one provided in a javascript library called wz_tooltip.js (can find via Google) that is very useful in displaying popups of both normal and html content. The advantage over, say, the javascript alert is that the popup automatically disappears when the user rolls their mouse awayl.

    If using this library include the following in a List page onload event:
    echo '<script type="text/javascript" src="extra/wz_tooltip.js"></script>';
    (This assumes that the .js file is placed in a subdirectory called extra under your project's main directory.)
    One extra point...

    The mouseover event will not activate correctly if the value of the Notes field contains either a single or double quotation mark. One way to avoid this is to use the Visual Editor to set "View as Custom" code for the field.

    For example:

    $value = str_replace("'","`",$value); //Replaces the single quote with `

    $value = str_replace('"','`',$value); //Replaces the double quote with `

    (Do this before making the change to the the way the relevant field cell is displayed.)