Using a HTML object to display an image
A. Purpose of 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: