| Using HTML Areas | KEVIN RESCHENBERG
04-18-2014 |
In the last post I showed how to use an HTML area by adding one to the page and using PeopleCode
(with or without an HTML object) to fill it. Now let's consider some specific uses of HTML areas.
PeopleSoft styles and CSS
PeopleSoft has a stylesheet object that you can use to modify the look of many pages or your entire system, but HTML areas are an easy way
to style just one page or a few elements on a page.
Suppose that we want certain text elements, field labels or other things to be a particular size or color. When you add an object to the
page you can specify the style by choosing from a dropdown list. If you are using the standard stylesheet then you are limited to what has been predefined.
But we can override those styles.
Choose a style that is not normally used on the page. MUTE, RESET, and STRONG are good examples. Assign that style to the object you are adding to the page (in place of
"Use default style"). Then add an HTML area to the page. It doesn't matter how you fill it (using the "constant" HTML box, or PeopleCode, or an HTML object). Here is the text:
<style type="text/css">
.MUTE {font-size: 8pt; font-weight: normal; color: #aaa;}
</style>
PeopleSoft "styles" are CSS classes. View the source of your page in the browser to see which classes are used by default for input fields, buttons,
grid headers/borders and such. You can override any of those as shown above.
HTML areas and CSS can be used in many other ways to modify your page. Let's say that we want an overlay—sort of like a popup page but actually a part of the main page.
It could be a set of instructions, some type of error message box, or anything else. Also, let's have PeopleCode control when and where this box appears.
<div style="position: relative;">
<div style="position: absolute; top: %BIND(:1)px; left: %BIND(:2)px;
display: %BIND(:3);
border: 1px solid black; padding: 8px;">
Here is the text shown<br>
in our pop-up box
</div>
</div>
The relative positioning followed by absolute positioning allows the text to "escape" from its usual position (where you put it on the page) and show up
anywhere you want. (The "top" and "left" values start from where the HTML is located on the page, so use negative values to move it up or to the left.)
For the "display" value, specify either "block" to make the box appear or "none" to hide it.
That example built the entire element within the HTML area. But you can also control existing elements. View the page source to determine the ID of the element
you want to play with. It will often be something like MY_RECORD_MY_FIELD. Specify the ID with "#" like this:
<style type="text/css">
#MY_RECORD_MY_FIELD {color: green;}
</style>
Now that PeopleSoft is using Ajax techniques to handle some of the input on pages, you will sometimes not be able to find an element easily.
You may find a few quirks related to positioning and sizing an HTML area. In general, the width of the area is more important than the height.
For example, if a large amount of text is sent into the HTML area, it will wrap at the width defined on the page but the height of the area will increase
as needed to fit the text. No matter where you place the HTML area, you will usually find that blank space above and below the area tends to disappear when
the page is rendered. I generally put everything within a DIV and specify top and bottom margins, like this:
<div style="margin-top: 10px; margin-bottom: 20px;">
Text or other elements here
</div>
JavaScript
The other major use for HTML areas is in adding scripts to the page. JavaScript can grab and manipulate elements, capture events, and do many other things.
Here is a very simple example just to get you started:
<script type="text/javascript">
alert("Hello World");
</script>
As with CSS, there are special considerations related to PeopleSoft's use of Ajax when you are working with JavaScript. More on that next time.
|
