An HTML area is something you can use in designing or controlling your pages. I've mentioned specific uses of these in the past but
now, in the next couple of posts, I'd like to explore them in a little more detail. Over the years I have found myself relying on them
more and more. They can really help you break out of some of the restrictions of the environment. Like just about anything else, HTML areas
can be misused (and many will accuse me of doing just that). But they provide some very useful flexibility.
Today let's just look at the different types of HTML areas. This is the first step and it can be a little confusing. It is not immediately
obvious that there are different ways of filling an HTML area.
First we need to create the HTML area on the page. Open your page definition within App Designer. On the toolbar is a button
with a square containing "HA". Click that and the pointer turns into an exaggerated picture of a hand. On the surface of the page definition,
trace out a rectangle. It will be just a gray box. Double-click it and a Properties dialog box will open.
Constant HTML
This is the simplest type. In the Properties box click the "Constant" radio button. The record and field names will disappear and a long edit
box will be enabled. Just start typing HTML there. Whatever you type will become part of the page at that location.
In this example the HTML is just a bold "Hello World" string.
HTML from Record/Field Contents
This is the second type. In the Properties box click the "Field" radio button. Select a record (often but not necessarily a derived/work record)
and a field. At runtime the contents of that field will be sent into the HTML area on the page.
This field will be filled (later) with the same bold "Hello World".
Note that there is a major difference between an HTML area and a regular display field on the page. Of course, you can drop any field onto the page
and its contents are simply displayed. But look at what happens if we try to display HTML.
In this example there are three elements on the page. The first one is a constant HTML area, the second is a record/field HTML area,
and the third is a normal display-only edit box using the SAME record/field (DERIVED_HR.DESCR).
This page PeopleCode is used to fill in the second and third items:
DERIVED_HR.DESCR.Value = "<b>Hello World</b>";
And here is the result as rendered by the browser:
Both of the HTML areas work the same, whether we fill the area with constant HTML or by placing a value into the specified record/field.
As you can see, the normal display-only edit box simply displays the text "<b>Hello World</b>" and does not render it as HTML. This is a very good thing—we don't need to worry
about whether a particular text field might contain characters that will affect the appearance of the page (or worse, JavaScript code). To tell
the component processor that we want something rendered as HTML, we need to put it into an HTML area.
Using constant HTML or PeopleCode as shown above are two ways of filling an HTML area. If the HTML is long and complex, though, the
box in the Properties box for the "constant" type of HTML is very difficult to use. (The box is small and the font is small and proportional.)
A more convenient way to manage this is to use an HTML object. We'll look at those next time.