Pagelet Wizard Custom Tags

Pagelet Wizard custom transformations can use special tags documented here to insert images, message catalog entries, or to format numbers and dates. This is great when trying to format currencies or ensure multilingual compliance. The problem with "Post-Transformation Processing," as it is called in PeopleBooks, is that it requires the transformation results to be valid XML. Question: How do you get Pagelet Wizard to generate valid XML when the Xalan processor used by PeopleTools sees HTML tags and automatically generates HTML? Answer: use the <xsl:output> XSL tag. Here is a sample template that produces valid XML:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    exclude-result-prefixes="xhtml xsl">

    <xsl:output method="xml" version="1.0" encoding="UTF-8"
        doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
        indent="yes" />

    <xsl:template match="/">
        <!-- your XSL goes here -->
    </xsl:template>
    
  <!-- identity transform templates -->
  <xsl:template match="*">
    <xsl:apply-templates/>
  </xsl:template>

  <!-- delete unmatched text -->
  <xsl:template match="@*|text()|comment()|processing-instruction()">
  </xsl:template>
  
</xsl:stylesheet>

Iscripts Example

Iscripts by Example:

Create a derived work record which starts with WEBLIB_XXXXXXXX

Include a field ISCRIPT1 which holds the peoplecode function for Iscript as show below.

Record Definition: WEBLIB_HELOWRLD

The below script , echoes the value entered in the text box.

Function IScript_HelloWorld()

Below is the code placed in fieldformula

Security:

After you create a WEBLIB record, and your functions, you must add them just as you would add a page to an application.

Adding the WEBLIB record to permission list PTPT1000. Below is the snapshot.

Click on Edit to control the type of access to the functions.

Testing: Login to PIA and copy the below URL.

http://localhost:8000/psp/hr9stg/EMPLOYEE/HRMS/s/WEBLIB_HELOWRLD.ISCRIPT1.FieldFormula.IScript_HelloWorld

Note: You need to replace 8000 with webserver port and hr9stg with the domain name.

The below script , echoes the value entered in the text box.

 

This completes the creation and testing of iscript.

Note:  You might have observed that just like the content reference which has a URL , the iscript is also a URL.

So, just like the way we register component through App designer to make the link available to the user in PIA, similar way we can register for iscript as well.

Will discuss in detail on the registring iscript in another post. Below arrow shows the registration wizard for Iscript in App Designer.

Using PeopleCode Modals: openPageletActionPageInModal (PeopleTools 8.53)

This is some useful information from Jim Marion. While typing something in the Chrome JavaScript console, I managed to bring up the function openPageletActionPageInModal. Hmmm, sounds interesting. I drilled to the implementation and saw that you call it like this:

openPageletActionPageInModal("http://your.server.name/psp/ps/EMPLOYEE/HRMS

/c/ROLE_EMPLOYEE.HR_EE_PERS_INFO.GBL?")

What does it do? It converts the /psp/ part of the URL to /psc/ and opens the URL in a modal dialog. For me it worked great as long as I followed two simple rules:

• Included a question mark in the URL. If the URL has no query string parameters, just include a trailing "?".
• Used this function in the same datababase/application as the content. In other words, I didn't try to use this technique in Interaction Hub for HRMS content. For that to work, I would need to translate more than just /psp/. I would also have to translate the server name and site name.

Note: It works just fine in a portal/content provider situation if the URL is already a /psc/ URL.
Anyway, interesting, undocumented piece of JavaScript that you may or may not find useful. As always, your mileage may vary.
Note: I was using PeopleTools 8.53 when I found this function.

Step-by-Step: App Engine for Testing PeopleCode

his is a how-to post that I intend to refer back to from time to time.  The goal is to create a simple Application Engine program into which we can drop some PeopleCode and see how it works.  Assuming we don’t need any of the online pieces, this is much easier than going through all of the steps to create a page and register it so we can see it online.

Step 1: Create a new Application Engine Program

In Application Designer, click Ctrl + N or use the File > New menu option.  This will open the “New” dialog, and you can choose Application Engine program from the list.

You new program should look like this:

Step 2: Disable Restart

This step is very important.  If you don’t disable the restart and your program crashes, you will have to go through a few extra steps before you can rerun it.
First, click on the properties button while your program is in focus (you can also use the File > Definition Properties menu):

This should bring up the Properties dialog.  Then, go to the Advanced tab.  Check the “Disable Restart” option.

Step 3: Add an Action

First, click on the “Step 1″ step to select it.  I usually click anywhere in the gray, and this should turn it black.

Next, click on the Add Action button, or you can use the Insert > Action menu.

Finally, change the type from SQL to PeopleCode.

Step 4: Save the program

At this point, you need to save before you can add PeopleCode.  You can use Ctrl + S, click on the Save icon on the toolbar, or you can use the File > Save menu.

Step 5: Enter the PeopleCode

First, open the PeopleCode program by double clicking anywhere on the gray of the PeopleCode action.  Or, you can right click on it and choose the “View PeopleCode” option.
Next, you will probably want to open a file to show output from your PeopleCode testing.  You can use this PeopleCode:

Local File &log;
&log = GetFile("c:\temp\log.txt", "W", "A", %Filepath_Absolute);

Then, you can print to that file with the writeline() method.  For now, we will just print Hello, World.

&log.WriteLine("Hello, World!");

Finally, you will probably want to close your file:

&log.Close();

Here is what it all looks like:

Make sure to save once you make these changes.

Step 6: Run the Program

Again, after you have saved, go back to the main program window where you can see the Main section, Step 1, and your new PeopleCode action.  Then, click the run icon.

In the dialog, Check the Output log to file and uncheck Run Minimized.  The output log to file allows you to see what happened.  Otherwise, the window will close before you see what happened.  The run minimized isn’t a big deal, but if the program doesn’t run minimized you see it pop up and go away better.  When the program goes away, you know it is done running.

Finally, when it is done, check the output.  If you used the paths that I did your output should be in the c:\temp directory.  You should have two files.  The first, is the main output from the program.  Check this to make sure the program ran to success:

The second is the log that your PeopleCode created.  For now, it should just say, “Hello, World”.

Improving PeopleSoft with jQuery

I must thank Jim Marion for turning me on to jQuery. He has made various posts over the last 3 or 4 years about it (see here.) I've also sat in on one or 2 presentations he's made where he's mentioned it. It's a great JavaScript library that lets you make even more improvements to your PeopleSoft application.

Since PeopleTools 8.50 (or maybe it was a late patch of tools 8.49) there is no longer a size limit on HTML Definitions. PT_PAGESCRIPT is the JavaScript definition that is included in all (or at least most) pages served up by PeopleSoft. This is now the best place for including the jQuery library.

So now that we have access to jQuery, what kind of things can we do with it? Here's the first of a couple of examples I've come up with.

Add options to the Page Bar
Have you ever tried to print a PeopleSoft page using your browsers print functionality. It doesn't always look good. Depending on the browser and what exactly has the focus when you choose Print, it may include the Portal Heading and the target content may have scroll bars included. I think it would be great if the Page Bar had an option to print the page. Here's a way of getting JavaScript and jQuery to do it for you.

Why do you need jQuery to do it? Because as a PeopleSoft developer, you don't have access to the Page Bar. It is not generated via an iScript, HTML Definition or an Application Package. You could use something like MonkeyGrease on your web servers to rewrite the response to include a new link on the Page Bar. But that seems to be a bit overkill. By using jQuery, everything is under control within Application Designer like most any PeopleSoft customisation.
So onto the code! Add the following to PT_PAGESCRIPT after the jQuery library. (I hope it is self documented well enough for you to follow through.)

//%New Print button added to Page Bar
//%Ensure that document is ready before proceeding
$(document).ready(function() {
   //%Check if the Page Bar is on the page
   if($("#PAGEBAR").length==1) {
      //% Declare local variables
      var printAnchor;
      var printImg;
      var newText = "Print Page";
 
      //%Add new style to prevent #PAGEBAR from displaying when printing
      $('<style media="print"> #PAGEBAR {display: none} </style>').appendTo('head'); 
 
      //%Get the Page Bar div and table cell
      var pgBar = $("#PAGEBAR");
      var pgBarLinksCell = $("table > tbody > tr:eq(0) > td:eq(2)", pgBar);
 
      //%Check if there are any anchors on the Page Bar 
      //%Though it seems if there is a Page Bar then there is always an anchor 
      if ( $("a", pgBarLinksCell).length > 0 ) {
        //% If it is, clone the last one and separate the image from the anchor
        printAnchor = $("a:last", pgBarLinksCell).clone();
        printImg = $("img", printAnchor);
        printAnchor.html("");
      } else {
        //%otherwise build it manually 
        printAnchor = $("<a tabindex='0'></a>");
        printImg = $("<img hspace='0' border='0' align='absmiddle' vspace='0' ></img>");
        var cssObj = {
           'font-size'       : '9pt', 
           'font-weight'     : 'normal', 
           'font-style'      : 'normal',
           'color'           : 'rgb(51, 102, 153)', 
           'text-decoration' : 'none'
        }
        printAnchor.css(cssObj);
      }
      //%set (or overwrite) the anchor attributes
      printAnchor.attr("id", "OXFPRINT");
      printAnchor.attr("name", "OXFPRINT");
      printAnchor.attr("href", "");
      printAnchor.attr("tabindex", parseInt(printAnchor.attr("tabindex"))+1);
 
      //%set (or overwrite) the image attributes
      printImg.attr("title", newText);
      printImg.attr("alt", newText);
      printImg.attr("src","/cs/FSQA850/cache/PT_PRINT_1.gif");
 
      //%Add a click event to the anchor
      printAnchor.click(function(event) {
 
        //%prevent the default from occuring
        event.preventDefault();
 
        //%IE work-around printing in an iframe
        try { 
          document.execCommand('print', false, null); 
        } 
        catch(e) { 
          window.print(); 
        }
        return false;
      });
 
      //%Combine (or recombine) anchor, image and text
      printAnchor.wrapInner(printImg).append("&nbsp;"+newText);
 
      //%append the new Print Anchor to the end of the Page Bar
      $(pgBarLinksCell).append("&nbsp;&nbsp;&nbsp;").append(printAnchor);
   }
   else {
      //%write the code to include a Page Bar
   }
});

Here's what it looks like

Points to Consider

• The path to the Printer image is hard coded. Meta-HTML %Image won't work in this situation because it is a JavaScript library. To make it better, you could use %URL or create an iScript that uses %Request.GetImageURL to return the path to the image and use jQuery within the script to make an AJAX call to the iScript.
• Also, I think the image is too gray. It's based on the older style. To match the newer swan style it should have more blue.
• I've tested this on IE7, FireFox 3.6 and Google Chrome 7.0.5. It's possible it won't work with other browsers.

Summary

With jQuery you have an extra layer of control over your user's interface. This was just one example of what can be done using the jQuery JavaScript library. I hope to post another couple examples soon.

PeopleSoft Branding

Here's one way to change your PeopleSoft Portal Header from this

to something like this

Preface
I was grateful I discovered @peoplesoftwiki's great post about PeopleSoft Branding. It meant that this post wouldn't have to be quite as long. Because as it turned out I followed the same steps as @peoplesoftwiki (extending Application Package PT_BRANDING and overriding the Branding Package on PeopleTools Options page.) I went one or 2 steps further it seems so I'd like to expand on that.

Before I begin, I need to tell you the main assumption I made. We are moving to PeopleTools 8.50 and we have decided to use the new Swan style. This is important as there is code in PT_BRANDING methods that is wrapped in if statements checking whether the style = "swan". That meant I only had to focus on making changes to items where this was true.

And one more thing before going any further: configuration good, customisation bad. (Though I don't always follow that mantra.)

Application Package
So just like @peoplesoftwiki, I extended PT_BRANDING. I made a few changes, including:

1. adding new methods to get data out of the system that I wanted to display in the Portal Header
• setGreeting, to prefix the Users greeting as set in Personalize Content with the description of the Environment as set in PeopleTools Options
• getOxfamLinks, to read and labels and links from the message catalog (labels being the message, and the links being the explanation text) to be displayed along the top of our branded portal.
2. replacing calls to the delivered HTML Definitions that formed the basis of the Portal Header. Those 3 methods and the HTML defintions are
• getIframeHeaderHTML - PT_IFRAME_HDR_SWAN
• GetExpPasswordHdrHTML - PORTAL_EXP_PASSWORD_HDR
• GetUniHeaderHTML - PORTAL_UNI_HEADER_NNS_SWAN

The changes made to the methods getIframeHeaderHTML, GetExpPasswordHdrHTML and GetPortalUniHeaderNNS were all very similar, so I'll just go in to details for the method getIframeHeaderHTML. I basically left the code all the same, except for adding calls to my new methods setGreeting and getOxfamLinks and another call to get some more text from the message catalog and a call to the GetPortalHomepageURL() function to retrieve the Homepage URL.

HTML Definition
To make use of all this, I would either need to change the delievered HTML definition or create my own. So I created my own by opening the delivered PT_IFRAME_HDR_SWAN and doing a Save As to create OXF_IFRAME_HDR_SWAN. By doing this I had complete control over the HTML I wanted displayed. The main change I made was to the pthdr2container <div>, changing it from

<div id="pthdr2container">
<div id="pthdr2logoswan"> </div>
<div id="pthdr2greeting">
<span class="greeting">%bind(:15)</span>
</div>
%bind(:16)
<ul id="pthdr2links">
%bind(:17)
</ul>
</div>

to

<div id="pthdr2container">
<div class="oxfblend">
<div id="pthdr2logoswan"
 onclick="javascript:window.location='%bind(:27)';return false;">
</div>
<div id="pthdr2greeting">
<span class="oxfps">%bind(:26)</span>
<span class="oxfgreeting">%bind(:15)</span>
</div>
<ul id="oxfhdrlinks">
%bind(:25)
</ul>
<ul id="pthdr2links">
<span>%bind(:17) </span>
</ul>
</div>
<div id="oxfheaderLine3">
<div class="clearer"></div><!--Important - ensures floats
are contained-->
</div>
</div>

The main changes were adding new <div> oxfblend, oxfheaderLine3 and clearer, new <span> oxfps and oxfgreeting and new <ul> oxfhdrlinks. I also removed %bind(:16), the search box, which we didn't think made any sense to have in the Portal Header.

Stylesheets
To make all these new elements on the page look any good, I had to update the Stylesheet. PSHDR2_SWAN held all the styles to control the Portal Header. For example, it defined the style pthdr2logoswan which has the background image as the Oracle Logo. Well we wanted to use the Oxfam Logo so I made a copy of PSHDR2_SWAN to create OXF_HDR2_SWAN and I made my changes to that.

Remember, configuration good, customisation bad. So I copied PSSTYLEDEF_SWAN to create OXF_STYLEDEF_SWAN. And in OXF_STYLEDEF_SWAN, I replaced PSHDR2_SWAN with OXF_HDR2_SWAN. When you switch to the new swan style, you update Default Stylesheet on PeopleTools Options to PSSTYLEDEF_SWAN. I instead switched it to OXF_STYLEDEF_SWAN.

Images
I had to create 4 image definitions in App Designer. Each of these are referenced in the stylesheet OXF_HDR2_SWAN as background images for 4 different elements.


Bringing it all Together
So here's how it all works together. The PT_BRANDING extended Application Package (with new methods) calls the new HTML Definitions. Updated or newly created bind parameters are passed to the custom HTML Definition to generate the content of the Portal Header. The new stylesheets and images provide the formatting for the Portal Header HTML. What you can come up with is only limited by your imagination.

Link To Portal Folder

The code below can be used for a link to navigate to your portal folder.

Declare Function NavPageURL PeopleCode EOPP_SCRTN_WRK.FUNCLIB FieldFormula;

&LINKURL = NavPageURL(%Portal, %Node, "your-folder-object-name", "PSC", "", "", "False", "", "", "");
%Response.RedirectURL(&LINKURL);

PeopleCode Tricks

Here are a few quick and easy examples of often used PeopleCode. This quick reference is helpful because some of this syntax can be easily forgotten.

Application Package

12345

import C_APP_PACK:FooClass; Local C_APP_PACK:FooClass &foo; &foo = create C_APP_PACK:FooClass(); &result = &foo.ExampleMethod(&bar);

view rawApplication Package [peoplecode] hosted with ❤ by GitHub

Function

1	Declare Function MY_FUNC PeopleCode MY_FUNC.FIELD FieldFormula;

view rawFunction [peoplecode] hosted with ❤ by GitHub

SQL Class

123456

Local Record &rRecord = CreateRecord(Record.RECORD); Local SQL &SQL = CreateSQL("SELECT * FROM PS_RECORD"); While &SQL.Fetch(&rRecord) /**/ End-While;

Test Score Post in Campus Solutions

Test Id Security. Unless you set the test id security for a user you can not load or post the test scores from a flat file.

Here's the location to set that.

Navigation : Root --> Set Up SACR --> Security --> Secure Student Administration --> User ID --> Test ID Security.


Code extending the SOA framework to chunck a container based message when the message size exceeds Integration Broker max message size limit.

import SAD_CRM_INTEGRATION:SAD_TEST_POST_CRM:SAD_TEST_POST_CRM_AP;

Component Rowset &rsSadHeaderCrm, &rsSadApSus, &rsSccNameValue;
Component SAD_CRM_INTEGRATION:SAD_TEST_POST_CRM:SAD_TEST_POST_CRM_AP &oSadTestPostCRMAP;

Local number &i, &j;
Local Message &response;

&oSadTestPostCRMAP = create SAD_CRM_INTEGRATION:SAD_TEST_POST_CRM:SAD_TEST_POST_CRM_AP( Null, "SAD", "SAD_TEST_POST_CRM_AP");

&oSadTestPostCRMAP.rsSAD_HEADER_CRM = &rsSadHeaderCrm;
&oSadTestPostCRMAP.rsSAD_TEST_POST_AP_PART = &rsSadApSus;
&oSadTestPostCRMAP.rsSAD_TEST_POST_NAME_VAL_PART = &rsSccNameValue;
&response = &oSadTestPostCRMAP.execute();

If &oSadTestPostCRMAP.moduleError = Null Then
Exit (1); /* exit (1) to skip roll back action */
Else
MessageBox(%MsgStyle_OK, "", 99999, 999, "*** Post to CRM Integration Error ***");
MessageBox(%MsgStyle_OK, "", 99999, 999, &oSadTestPostCRMAP.moduleError.ToString( False));
If (&oSadTestPostCRMAP.moduleError.MessageSetNumber = 14099 And
&oSadTestPostCRMAP.moduleError.MessageNumber = 7) Then
MessageBox(%MsgStyle_OK, "", 99999, 999, "Attempting Secondary Burst of 100 transactions");


Local Rowset &rs100SadHeaderCrm, &rs100SadApSus, &rs100SadBioPrsSus, &rsSadBioPrsSus;
Local number &numberOfRowSet;

&rs100SadHeaderCrm = CreateRowset(&rsSadHeaderCrm);
&rs100SadApSus = CreateRowset(&rsSadApSus);

&rsSadHeaderCrm(1).CopyTo(&rs100SadHeaderCrm(1));

&rsSadBioPrsSus = &rsSadHeaderCrm(1).GetRowset(Scroll.SAD_BIO_PRS_SUS);
&rs100SadBioPrsSus = &rs100SadHeaderCrm(1).GetRowset(Scroll.SAD_BIO_PRS_SUS);


&i = 1;
While &i <= &rsSadBioPrsSus.ActiveRowCount
&j = 1;
&rs100SadBioPrsSus.Flush();
&rs100SadApSus.Flush();

For &j = 1 To 2

If &i > &rsSadBioPrsSus.ActiveRowCount Then
Break;
End-If;

If &j <> 1 Then
&rs100SadBioPrsSus.InsertRow(&rs100SadBioPrsSus.ActiveRowCount);
&rs100SadApSus.InsertRow(&rs100SadApSus.ActiveRowCount);
End-If;

&rsSadBioPrsSus(&i).CopyTo(&rs100SadBioPrsSus(&rs100SadBioPrsSus.ActiveRowCount));
&numberOfRowSet = 1;
While &numberOfRowSet <= &rsSadBioPrsSus(&i).ChildCount
&rsSadBioPrsSus(&i).GetRowset(&numberOfRowSet).CopyTo(&rs100SadBioPrsSus(&rs100SadBioPrsSus.ActiveRowCount).GetRowset(&numberOfRowSet));
&numberOfRowSet = &numberOfRowSet + 1;
End-While;

&rsSadApSus(&i).CopyTo(&rs100SadApSus(&rs100SadApSus.ActiveRowCount));
&numberOfRowSet = 1;
While &numberOfRowSet <= &rsSadApSus(&i).ChildCount
&rsSadApSus(&i).GetRowset(&numberOfRowSet).CopyTo(&rs100SadApSus(&rs100SadApSus.ActiveRowCount).GetRowset(&numberOfRowSet));
&numberOfRowSet = &numberOfRowSet + 1;
End-While;

&i = &i + 1;

End-For;

&oSadTestPostCRMAP.rsSAD_HEADER_CRM = &rs100SadHeaderCrm;
&oSadTestPostCRMAP.rsSAD_TEST_POST_AP_PART = &rs100SadApSus;
&oSadTestPostCRMAP.rsSAD_TEST_POST_NAME_VAL_PART = &rsSccNameValue;
&oSadTestPostCRMAP.moduleError = Null;
&response = &oSadTestPostCRMAP.execute();


If &oSadTestPostCRMAP.moduleError <> Null And
(&oSadTestPostCRMAP.moduleError.MessageSetNumber = 14099 And
&oSadTestPostCRMAP.moduleError.MessageNumber = 7) Then

MessageBox(%MsgStyle_OK, "", 99999, 999, "*** Secondary Burst too large ***");
Exit (0); /* Return 0 to call Rollback Action */

End-If;

End-While;
End-If;

End-If;

Process Definition File Dependency

 In PeopleSoft process scheduler we have setup some Process Definitions with a File Dependency turned on. What this does is Block a process from running until a file is found. This is setup in the Process Definition on the Process Definition Options tab under the On File Creation section.

Well today we updated the Wait for File path. We rescheduled our processes but in the Parameters it still had the old file path. After some head scratching I looked in PeopleBooks where it says this file path can be set at runtime. So I looked and sure enough this value is stored on each Run Control Id. It will only pull from the Process Definition if it is a new Run Control Id or if the filepath is blank.

Here is some SQL to help with this situation

12345

/* Process Sched Parameters */ SELECT prcsinstance, prcsfilename FROM psprcsparms ORDER BY prcsinstance DESC

view raw

 

12345

/* Stored at Process Defn Level */ SELECT prcsname, prcsfilename FROM ps_prcsdefn WHERE prcsname LIKE 'TEST123'

view raw

 

12345

/* Stored at Run Control Level */ SELECT a.prcsfilename, a.* FROM ps_prcsruncntldtl a WHERE a.prcsname LIKE 'TEST123'

view raw

123456789101112

/* Update Run Control to match current Process Definition */ UPDATE ps_prcsruncntldtl a SET a.prcsfilename = (SELECT c.prcsfilename FROM ps_prcsdefn c WHERE a.prcstype = c.prcstype AND a.prcsname = c.prcsname) WHERE a.prcstype = 'Application Engine' AND a.prcsname = 'TEST123' AND EXISTS (SELECT 'X' FROM ps_prcsdefn b WHERE a.prcstype = b.prcstype AND a.prcsname = b.prcsname)

view raw

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.

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.

Related Links

Using the GenerateTree Function

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.

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.