HTML Areas | KEVIN RESCHENBERG 07-19-2004 |
A developer on one of the online forums asked how to place a background image on a
PeopleSoft page. I don't know of a way to do this using only PeopleTools settings, but
using an HTML area gives you the ability to do this and more.
An HTML area is a (usually) invisible object that you place on a page in Application
Designer. (With the page open, select Insert | HTML Area from the menu.) You can draw the
area to a specific size, depending on what you want to do, and the page will reserve that
space. For example, if you want to create a text area and control it through PeopleCode,
you might draw the area to the correct size and position it on the page.
However, there is much more you can do with an HTML area. This "object" simply inserts
HTML code onto your page. That means that you can add HTML code, objects, and even
scripts to a PeopleSoft page. For many purposes, you can simply draw a small HTML area
in an out-of-the-way place on the page and then start writing your code.
For example, suppose that the following is one section of a normal page:
Now suppose that you want to add a background image. To do this, simply add your image
as usual anywhere on the page and save the page. Navigate to the page, right-click,
and select "view source" to find the actual name and location of the image. (It will be
in the SRC= attribute of an <IMG> tag.) Copy the source location string to the clipboard.
Back in App Designer, delete the image from the page and insert a small HTML area in some
unused place on the page. Double-click on the HTML area, select "Constant", and begin
entering code:
<div style="position: absolute; top: 100; left: 100; z-index: -1;">
<img src=" the-source-string">
</div>
Save the page and navigate to it to see your image behind the rest of the page elements.
Experiment with the TOP and LEFT parameters until it is positioned correctly.
When you do "view source" on a page, notice that each element has an ID= attribute.
With that information, you can do just about anything behind the scenes using an HTML
area. For a thoroughly hideous example, click here and
look at the page fragment above. This is pure HTML and JavaScript—no Flash or anything special.
No, you do not want to do that to your pages, but it shows just a little of what's
possible using HTML areas.
|