Understanding Bind VariablesThis appendix provides an example of branding using bind variables from previous releases of Enterprise Portal, and contains an example for creating and configuring custom branding headers with bind variables.
Understanding Bind VariablesBranding system elements are simply the bind variables embedded in the HTML that are used for Branding headers and footers. The bind variables are replaced with actual values at run time to generate HTML.
The PeopleCode example below shows how dynamic content is embedded into static content using a bind variable:<a href="%bind(:1)"><img src="/images/home.gif" border=0 ></a> The value of the bind number can be found in the calling PeopleCode program that binds the object to the HTML definition. &HTML = GetHTMLText(HTML.TEST,”www.peoplesoft.com”)
By providing a set of predefined bind variables as system elements, the Branding PeopleCode program will know how to assemble the HTML syntax according to the system element assigned. Keep in mind that any changes to the system element number and type are not allowed. You should also include all non-configurable system JavaScript/HTML %binds, as they reference JavaScript files (TimeOut warnings, for example), forms, or additional HTML that enable the system to work properly.
Example: Creating and Configuring Custom Branding Headers with Bind
Variables
This section provides an example for creating and configuring a custom header, using the steps discussed earlier in this chapter, and describes how to:
Generate the header HTML.
Identify HTML syntax to replace with branding system elements.
Replace identified HTML syntax with bind variables.
Configure the header.
This example demonstrates how to create the following header.
Header created in this example
Generating the Header HTMLPeopleSoft Enterprise Portal delivers the EPPBR_HDRHTML_BASE HTML HTML object as the base for creating any new header for use with branding.
To generate the HTML for the header:
In Application Designer, open the EPPBR_HDRHTML_BASE HTML definition.
The object opens and you can view the object HTML.
<html> <head> %bind(:21) <title></title> <!-- title is generated by Tools--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!--system generated HTML %bind22, %bind23, %bind24, %bind25, %bind26, %bind27--> <script language='javascript' src='%bind(:22)'></script> <script language='javascript' src='%bind(:23)'></script> %bind(:24) %bind(:25) %bind(:26) %bind(:27) <!--%bind16, %bind17--> <LINK REL="stylesheet" HREF="%bind(:16)" TYPE="text/css"> <LINK REL="stylesheet" HREF="%bind(:17)" TYPE="text/css"> <style type="text/css"> <!--ADD CUSTOM STYLES HERE--> </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0"marginheight="0"> <!--custom HTML begins--> <!--ADD CUSTOM HTML HERE--> <!--custom HTML ends--> <!--system generated HTML %bind28, %bind29, %bind30--> %bind(:28) %bind(:29) %bind(:30) <!--system reserved elements HTML %bind19, %bind20--> %bind(:19) %bind(:20) </body> </html>
Save the HTML object with the name PLANET_PSFT_HDR_HTML.
Copy your custom HTML and insert into the <!--ADD CUSTOM HTML HERE--> section of the previously displayed HTML object. It is assumed that you have already created the basic HTML for your interface outside of the PeopleSoft system.
Remove all scripts and functions, if any, from the custom HTML you pasted into the HTML object in the previous step.
Make note of any additional custom scripts and functions within the header. Branding takes care of reinserting all delivered scripts and functions. This is performed by system elements 21 to 30. You will allocate additional system elements for custom scripts and functions. You can also choose to leave custom scripts and functions in the HTML object. Keep layout reusability and ease of maintenance in mind when making this decision.
Save the file.
Identifying HTML Syntax to Replace with Branding System ElementsThis section discusses identifying HTML syntax to replace by system elements.
To identify custom HTML syntax to replace with branding system elements:
In the PeopleSoft Pure Internet Architecture, select Portal Administration, Branding, Define Elements, Enable HTML Layouts.
Add a new value and set the HTML Layout ID to PLANET_PSFT_HDR_LAYOUT, and then do the following:
Enter a description.
Select an HTML Object name of PLANET_PSFT_HDR_HTML.
Select a layout type of Header.
A list of applicable branding elements displays.
Analyze the custom HTML from step 1, according to the element list.
To make this task easier, you may want to use an external text editor, highlighting the syntax that you want to convert to system elements. In addition, highlight the attributes and styles that go along with the system elements.
The more HTML syntax you move out of the layout HTML object and into system elements, the fewer changes you will likely need to make to the layout HTML object.
For example, instead of changing the layout HTML object, you can use system elements on the fly to change the look and feel of a portal header. Using system elements makes your HTML layout more reusable and flexible.
Identifying potential system elements in your header
On the HTML Layouts and Element Selection page, select the applicable system elements for the header and enter custom labels.
Following is the original HTML. Text highlighted in bold denotes style class code.
<table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"> <td valign="top" rowspan="2"><a proxied="false" href="http://my.company.com⇒ /servlets/psportal/peoplesoft8/?cmd=start"><img name="logo" src="http:⇒ //planetx.peoplesoft.com/planet_content/images/planet/logos/myplanetps.gif" border=⇒ ⇒ "0"></a> </td> <td rowspan="2" width="100%"></td> <td valign="top" align="right"> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td valign="top" width="87" align="right"><img src="http://planetx.peoplesoft.com⇒ /planet_content/images/planet/planet_header_corner_fade.jpg" width="112" height=⇒ "21" border="0"> </td> <td bgcolor="#000000" nowrap valign="middle" align="right"><font color="#FFFFFF"><a⇒ ⇒ proxied="false" href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=⇒ start" target="_parent" class="EBIZ_WHITE_HYPERLINK">Home</a> | <a href="http:⇒ //my.company.com/servlets/psportal/peoplesoft8/?url=http%3a%2f%2fmy.company.com%2fs⇒ ⇒ ervlets%2ficlientservlet%2fpeoplesoft8%2f%3fICType%3dScript%26target%3dmain%26ICScr⇒ ⇒ iptProgramName%3dWEBLIB_EBIZ_LNK.ISCRIPT1.FieldFormula.IScript_⇒ Dir%26ID%3d0000000001" target="_parent" class="EBIZ_WHITE_HYPERLINK">Map</a> | <a⇒ href="http://my.company.com/servlets/psportal/peoplesoft8/?url=⇒ http%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8%2f%3f⇒ ICType%3dPanel%26Menu%3dADMINISTER_EBIZ%26Market%3dGBL%26PanelGroupName%3dEBIZ_⇒ CONTACT_US" target="_parent" class="EBIZ_WHITE_HYPERLINK">Contact Us</a> | <a⇒ href="http://my.company.com/servlets/psportal/peoplesoft8/?url=⇒ http%3a%2f%2fwww.peoplesoft.com" target="_parent" class="EBIZ_WHITE_HYPERLINK"⇒ >PeopleSoft.com</a> | <a href="javascript:void window.open('http:⇒ //my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=Script&target=⇒ main&ICScriptProgramName=WEBLIB_EBIZ_LNK.ISCRIPT1.FieldFormula.IScript_⇒ Hlp&ID=0000000004', 'Help','width=800,height=600,resizable=⇒ yes,directories=no,toolbar=no,menubar=no,location=no,copyhistory=no');" target="_⇒ parent" class="EBIZ_WHITE_HYPERLINK" style="cursor:help">Help</a> | <a proxied=⇒ "false" href="http://my.company.com/servlets/psportal/peoplesoft8/?cmd=⇒ logout" target="_parent" class="EBIZ_WHITE_HYPERLINK">Sign Off</a> </font> </td> </tr> </table> </td> </tr><tr valign="top"> <td align="right" valign="top"><img name="peoplepowertheinternet" src="http:⇒ //planetx.peoplesoft.com/planet_content/images/planet/logos⇒ /peoplepowertheinternet.gif" width="390" height="35" border="0"> </td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"> <td valign="top" bgcolor="#B2B2CB"><img src="http://planetx.peoplesoft.com/planet_⇒ content/images/planet/shim.gif" width="100%" height="1" border="0"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr height="100%" valign="top"> <td width="100%" class="STRONG"><!--Begin iclientcomponent: Greeting URL: http:⇒ //my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=Script&ICScript⇒ ProgramName=WEBLIB_EBIZ.TEMPLATE_FUNC.FieldFormula.IScript_Greeting--⇒ ><span>Welcome User</span><!--End iclientcomponent: Greeting --> </td> <td align="right" nowrap><!--Begin iclientcomponent: PSFT%20Stock URL: http:⇒ //my.company.com/servlets/iclientservlet/peoplesoft8/?ICType=Script&ICScript⇒ ProgramName=WEBLIB_EBIZ.ISCRIPT1.FieldFormula.IScript_PSFT_Stock--><span> <table border="0" cellpadding="0" cellspacing="0" width='100%'> <tr> <td nowrap><a href='http://my.company.com/servlets/psportal/peoplesoft8/?url=⇒ http%3a%2f%2ffinance.yahoo.com%2fq%3fs%3dPSFT%26d%3dt' title='Last updated on 3⇒ /12/2003 at ET' class='PSHYPERLINK'>PSFT</a> 15.352 <font⇒ color='#008000'>+0.032</font> <br> <center><font size="1"><a href='http://my.company.com/servlets/psportal⇒ /peoplesoft8/?url=http%3a%2f%2fplanetx.peoplesoft.com%2fdisclaimer%2fstockquote.htm⇒ ⇒ '>Quote delayed 20 minutes</a></font></center> </td> </tr> </table> </span><!--End iclientcomponent: PSFT%20Stock --> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="20%" height="100%"> <tr height="100%" valign="top"> <td></td> <td valign="top" class="EBIZ_STDTEXT" nowrap> <!--======================== BEGIN: PERSONALIZATION ========================== -->Personalize <a href="http://my.company.com/servlets/psportal/peoplesoft8/?url=⇒ http%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoplesoft8%2f%3f⇒ ICType%3dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%26PanelGroupName%3d⇒ PORTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dCONTENT"><img border="0" src="http:⇒ //planetx.peoplesoft.com/planet_content/images/planet/content.gif" align="middle"⇒ width="55" height="15"></a> <a href="http://my.company.com/servlets/psportal⇒ /peoplesoft8/?url=http%3a%2f%2fmy.company.com%2fservlets%2ficlientservlet%2fpeoples⇒ ⇒ oft8%2f%3fICType%3dPanel%26Menu%3dPORTAL_PERS_HOMEPAGE%26Market%3dGBL%26PanelGroup⇒ Name%3dPORTAL_HOMEPAGE%26PORTALPARAM_PAGE%3dLAYOUT"><img border="0" src="http:⇒ //planetx.peoplesoft.com/planet_content/images/planet/layout.gif" align="middle"⇒ width="55" height="15"></a><br> <!--======================== END: PERSONALIZATION ==========================--> <!-- </td> </tr> </table>
Replacing Identified HTML Syntax With Bind VariablesIn this example, the following bind variables will replace the sections of custom HTML in italics in the previous examples as indicated here:
|
%bind(:31) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:32) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:33) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:34) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:6) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:4) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:7) |
This bind variable replaces the following custom HTML in the previous section:
|
|
%bind(:51) |
This bind variable replaces the following custom HTML in the previous section:
|
To replace custom HTML with bind variables:
If you are using only a few styles and they are not likely to be shared, embed the styles in the <head> section of the PLANET_PSFT_HDR_HTML object. Paste the style classes into the HTML object area marked with the following note: <!--ADD CUSTOM STYLES HERE-->.
If the styles you are using are reusable, convert them into a PeopleSoft style sheet and use the style sheet in a theme in which the header will be deployed.
You can also link to an external cascading style sheet, (CSS), as you do when you are coding normal HTML.
Add custom JavaScript Functions or scripts. The following two options are available:
Use system elements 51-60 to add additional HTML areas.
Embed the code in the HTML object.
Save the PLANET_PSFT_HDR_HTML_HTML object.
The following example shows the final HTML object code:
<html> <head> %bind(:21) <title></title> <!-- title is generated by Tools--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!--system generated HTML %bind22, %bind23, %bind24, %bind25, %bind26, %bind27--> <script language='javascript' src='%bind(:22)'></script> <script language='javascript' src='%bind(:23)'></script> %bind(:24) %bind(:25) %bind(:26) %bind(:27) <!--%bind16, %bind17--> <LINK REL="stylesheet" HREF="%bind(:16)" TYPE="text/css"> <LINK REL="stylesheet" HREF="%bind(:17)" TYPE="text/css"> <style type="text/css"> <!--custom style begins--> .EBIZ_WHITE_HYPERLINK {font-family: "Verdana","Arial","sans-serif"; font-size:8pt; font-weight: normal; font-Style: normal; font-variant: normal; color: rgb(255,255,255); word-spacing: normal; letter-spacing: normal; line-height: normal; white-space: normal;} .EBIZ_WHITE_HYPERLINK:HOVER {font-family: "Verdana","Arial","sans-serif"; font-size: 8pt; font-weight: normal; font-Style: normal; font-variant: normal; color: rgb(178,178,208); word-spacing: normal; letter-spacing: normal; line-height: normal; white-space: normal;} .EBIZ_STDTEXT {font-size: 10pt; padding-right: 3px; padding-left: 3px} .EBIZ_STDTEXT_NO_UL {font-size: 10pt; text-decoration: none; } <!--custom style ends--> </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!--custom style begins--> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"> <td valign="top" rowspan="2">%bind(:31)</a> </td> <td rowspan="2" width="100%"></td> <td valign="top" align="right"> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td valign="top" width="87" align="right">%bind(:32) </td> <td>%bind(:6)</td> </tr> </table> </td> </tr> <tr valign="top"> <td align="right" valign="top">%bind(:33)</td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"> <td valign="top" bgcolor="#B2B2CB">%bind(:34)</td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr height="100%" valign="top"> <td width="100%" class="STRONG">%bind(:7)</td> <td align="right" nowrap>%bind(:51)</td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="20%" height="100%"> <tr height="100%" valign="top"> <td></td> <td valign="top" class="EBIZ_STDTEXT" nowrap> %bind(:4) </td> </tr> </table> <!--custom HTML ends--> <!-- system generated HTML %bind28--> <!--system generated HTML %bind29, %bind30--> %bind(:29) %bind(:30) <!--system reserved elements HTML %bind19, %bind20--> %bind(:19) %bind(:20) </body> </html>
Configuring the HeaderTo configure the header:
Click the Add New Value tab.
In the Header ID field, enter PLANET_PSFT_NDR.
In the Description field, enter a description.
In the HTML Layout ID field enter PLANET_PSFT_HDR_LAYOUT.
Save the changes.
Access the Images, Bars and HTML Area tabs and set values based on the styles you added when you replaced custom HTML with bind variables in the previous section. For example:
Images—Use the Images tab to move images into the database or specify a URL as the image source.
Bars—Use the Bars tab to specify style classes for the bars and individual bar items as necessary.
HTML areas—The system does not support iScripts, there you have to convert the iScript into application class code (PLANET_APP_PACKAGE:GetStockInfo:GetStockHTML) to generate the stock quote.