Wednesday, April 30, 2014

Using HTML Areas

This section provides an overview of HTML area controls and discusses how to:
  • Insert HTML areas.
  • Populate HTML areas.
  • Change HTML area labels.
  • Include HTML areas in the page tab order.

Understanding HTML Area Controls

You can insert an HTML area control on any PeopleSoft page. You can insert it at any level on a page, and you can place it in a grid control. This control is rectangular and is easy to resize.
Populate the HTML area control in one of these ways:
  • Statically, in the page field property sheet.
  • Dynamically, by associating the control with a record field or HTML definition.
If the control is linked to a record field, the value of the record field appears in the HTML area. Use PeopleCode to associate the HTML area control with a predefined HTML definition.
When using HTML areas, consider:
  • HTML areas are downloaded to Microsoft Excel as a nonbreaking space (&nbsp).
  • HTML areas are not searched with the Find feature.

Generating Trees in HTML Areas

You can use the GenerateTree PeopleCode function with HTML areas. This example shows the tree that is created by the GenerateTree PeopleCode function on the Select New Parent Folder page:
Image: Example of a tree in an HTML area
This example illustrates the fields and controls on the Example of a tree in an HTML area. You can find definitions for the fields and controls later on this page.
Example of a tree in an HTML area

Populating HTML Areas

You can populate an HTML area either statically, using the HTML Area Properties dialog box, or dynamically, by associating the control with a record field. Because the HTML that you write is included in the HTML that is dynamically generated by the system at runtime, consider the following:
  • The HTML that you include can affect the page layout.
    Complying with the design-time sizing of the HTML area is the best way to ensure that you do not affect the layout of the other page field controls. Adding an invisible frame around the HTML area control can help ensure that you do not affect other page fields.
  • You can use only certain types of HTML tags. These tags are not supported by the HTML area control:
    • <body>
    • <frame>
    • <frameset>
    • <form>
    • <head>
    • <html>
    • <meta>
    • <title>

Using JavaScript in HTML Areas

If an HTML area contains a reference to third-party JavaScript, you need to include the absolutized attribute in the script tag and set it to"false". For example:
<script type="text/javascript" language="javascript" absolutized="false"
   src="../../../../../ps/spellcheck/lf/spch.js">
</script>

Using Rich Text Editor-Generated HTML in an HTML Area

When you use the rich text editor (RTE) to generate HTML that appears in an HTML area page control, you must call the ProcessRTEHTML function to process the RTE-generated HTML before you assign it to the HTML area. The ProcessRTEHTML function wraps the HTML inside a <div> element, sets the style class to PT_RTE_DISPLAYONLY, and attaches the image processing JavaScript. Use the following code as an example:
Declare Function ProcessRTEHTML PeopleCode WEBLIB_PTRTE.ISCRIPT1 FieldFormula;

&HTMLAAREA.value = ProcessRTEHTML ("URL ID of the image target", "HTML Data To be Processed");
Your code might look like this:
&HTMLAAREA.value = ProcessRTEHTML (URL.PT_RTE_IMG_DB_LOC, "<p>example</p>");
The &HTMLAAREA.value should be similar to this:
<div id="RTEDiv188" class="PT_RTE_DISPLAYONLY">
  <p>example</p>
     <script type="text/javascript" language="JavaScript">
          PTRTE_CheckImages("", "PT_RTE_IMG_DB_LOC", "RTEDiv188");
     </script>
</div>

Using HTML Areas in AJAX Mode

Note the following code restrictions in HTML areas when running the application in AJAX mode:
  • Do not include XML tags, such as CDATA.
  • Do not include empty or commented out <script> elements.
  • Do not include document.write as part of the HTML in an HTML area.

Inserting HTML Areas

To insert an HTML area on a page:
  1. Select select Insert, then select HTML Area.
  2. Draw the HTML area on your page.
  3. Move the HTML area control by dragging it with the mouse or by pressing the arrow keys.

Populating HTML Areas

This section discusses how to:
  • Populate an HTML area statically.
  • Populate an HTML area dynamically.

Populating an HTML Area Statically

Use the HTML Area Properties dialog box to populate an HTML area:
Image: HTML Area Properties dialog box with constant text
This example illustrates the fields and controls on the HTML Area Properties dialog box with constant text. You can find definitions for the fields and controls later on this page.
HTML Area Properties dialog box with constant text
To populate an HTML area statically:
  1. Access the HTML Area Properties dialog box.
  2. On the HTML tab, select Constant as the value type.
  3. In the long edit box, enter the HTML code that you want to appear in the HTML area.

Populating an HTML Area Dynamically

To populate an HTML area dynamically:
  1. Access the HTML Area Properties dialog box.
  2. On the HTML tab, select Field as the value type.
  3. Specify the record and field to which you want to associate the HTML area control.
    The value of the record field generates the HTML code that is included at runtime in the HTML area.
    Note: When you associate an HTML area control with a field, make sure that the field is long enough to contain the data that you want to pass to it. For example, if you associate an HTML area control with a field that is only 10 characters long, only the first 10 characters of your text will appear. You should use long character fields for record fields that are associated with an HTML area control.

Changing HTML Area Labels

Assign a distinct label to your HTML area to distinguish it from other HTML area controls on the Order tab of the page.
To change an HTML area label:
  1. Access the HTML Area Properties dialog box.
  2. Select the Label tab.
  3. Enter a brief text description of the HTML area.
    This label does not display at runtime; however, it appears on the Order tab of the page definition.

Including HTML Areas in the Page Tab Order

When the PeopleSoft Pure Internet Architecture generates HTML for a page, it creates a tab index, or order, including every control or widget on the page, based on the field order for that page in Application Designer. However, with HTML areas, the system skips any control defined within an HTML area, by default, when building the tab index. In some situations, this may be confusing to an end user, such as in the case when screen readers are used.
To include the controls in an HTML area within the page tabbing order, add the %tabindex metavariable to the HTML, similar to:

<a href=http://espn.go.com/mlb/clubhouses/bos.html tabindex=%tabindex>Red Sox</a></small></td>
<td><small>94</small></td>
 
When %tabindex appears within the HTML in an HTML area, the controls within the HTML area assume the tab order given to the HTML area itself.
This metavariable is documented in more detail in the PeopleCode documentation, see %tabindex.

No comments:

Post a Comment