PeopleTools | Using a HTML object to display an image
A. Purpose of HTML Object
Although App Designer largely shields you from the technologies involved in building a web-based application (such HTML, CSS and JavaScript), there are still instances where you may need to implement a more HTML-specific solution. This should only be considered in those cases where the native PeopleTools functionality does not cover the requirement. For instance, if you wish to use a hyperlink that will take the user to another page in the PeopleSoft system, this should be implemented via the use of a ‘Pushbutton / Hyperlink’ object. It would be bad practice to add the ‘anchor’ link manually as part of a HTML object.
In the example below, we’d like the system to display an additional image next to each account balance. If the amount is positive, we will display a green tick. If negative, we will display a red cross. If exactly equal to 0, we will not display any image at all. For this example, we will use images that come pre-supplied with the Campus Solutions system.
B. Implementing the Requirement
Firstly, we need to define a field to hold the HTML code. Although the system provides a number of fields targeted for HTML code (such as ‘HTMLAREA’), these are Long Character fields like any other. Nothing special is needed for HTML fields.
In the example below, the HTMLAREA field has been added to a derived / work record:
The field can then be added to the page as a ‘HTML Area.’ In the following example, the HTML Area has been added as the final field on a grid:
Next the HTML code needs to be defined. While this can be performed directly in PeopleCode – by creating a long string containing the HTML – a better option is to create a new ‘HTML’ definition (in App Designer, go to File -> New and then select ‘HTML’). Similar to SQL objects, you can include parameters in your HTML that will be set at run-time. Here is an example of the HTML code to display a small image:
<img src="%BIND(:1)" width="16" height="16"
alt="%BIND(:2)" class="SSSIMAGECENTER">
This has been selected from the delivered SSR_CLASS_STAT_IMG in Campus Solutions. Two parameters are required: the name of the image, and the ‘Alt Text’ to use for the image.
Finally, you can create code that uses the HTML definition to set the image at run-time. Code such as the following would typically be placed in a ‘RowInit’ type of event:
Evaluate ACCOUNT_TOT_VW.ACCOUNT_BALANCE
When > 0
XX_ACCOUNT_WRK.HTMLAREA = GetHTMLText(HTML.SSR_CLASS_STAT_IMG,
"%Image(PS_CS_STATUS_SUCCESS_ICN)", "Status");
Break;
When < 0
XX_ACCOUNT_WRK.HTMLAREA = GetHTMLText(HTML.SSR_CLASS_STAT_IMG,
"%Image(PS_CS_STATUS_ERROR_ICN)", "Status");
Break
When-Other
/* Do nothing */
End-Evaluate;
Your page at run-time should now have the images correctly set:
See Also: