November 23, 2005

Pages in App Designer

A page is one of the more complex types of objects managed by Application Designer. Today I'd like to explore a few options available to us when we are creating or modifying pages. Maybe you're not aware of all of these, and one of these options could save you a little time.

Grid settings

The grid helps you to align elements on your pages. When you move objects, they "snap" to the nearest line on the grid. It's represented visually by all the little dots you see when you open a page object. If you've ever opened a page and seen a dark gray, black, or striped background, that's just a result of the grid settings used on that page. Go to Layout | Grid Settings. The smaller the number of pixels specified in the "spacing" area, the finer the control you have on alignment. If the grid tends to get in the way, you can turn it off here. But an easier way to turn the grid on or off is to click the Toggle Grid toolbar button, which looks like a square of 16 little dots.

If you have ever tried to move a page field and seen it "jump" slightly in another direction, that's because the grid settings have changed since the page was originally created. The field is just trying to snap to the current grid.

Alignment with grouping

The grid is a good way to line up elements, but sometimes it's still hard to see whether elements are aligned properly on a complicated page. Another trick is to use the Select Group toolbar button, which looks like a dotted box containing 3 bars. Click on that button and the mouse pointer changes into a hand. Now start drawing a box. Any page elements lying within the box or overlapping it can then be moved as a group. Sometimes, though, I just use the group box as sort of a ruler to check the alignment on the page. You must start at the upper left corner of the box you want to draw. When finished, either click the Select Group button again, or just click on an empty area of the page.

Alignment with the keyboard

You can click and drag page elements, of course, but sometimes it's difficult to position them exactly. In this case, just click once and then use the arrow (up, down, left, right) keys to move the element.

Object inspector

Another tool is the Object Inspector. Click the Toggle Inspector button, which looks like a page with a hand pointing at it. The Object Inspector diplays the record, field, type and label of an item, plus positioning information. Just click once on a page element to see this information displayed in the Object Inspector. At times this may be more convenient than double-clicking on each item and opening the page field properties dialog.

Viewing pages

There are two toolbar buttons for "testing" pages. One is a vertical light switch and is called Test Page. This is left over from the pre-PIA days and shows the page as it would appear as a two-tier panel. It has limited use. The second button is a horizontal light switch with "html" above it and is called View Page in Browser. This should display the page in Internet Explorer or whatever you have set as the default browser. Sometimes this works and sometimes it doesn't, and unfortunately I haven't figured out the pattern yet. When it does work, you should see the page but without the normal header/banner frame or the buttons along the bottom. In other words, you will see just the page object you're working on. Dropdown lists will work but prompt lists won't. Also, PeopleCode won't run and the page has no connection with the database. The purpose of this is to check the appearance of the page, not its operation.

Layout | Generate HTML does something similar, but instead of displaying the page, it simply creates the HTML and gathers the various image files needed for the page. If you look at this HTML you will see lots of JavaScript and stylesheet code that you normally wouldn't see on a PeopleSoft page using View Source.

Order tab

The Order tab is very important for controlling the functionality of a page. I won't get into this large topic today, but just want to point out a couple of small items. First, as I've previously mentioned, be careful when you are simply viewing a page. If you go to the Order tab, double-click on a field, and then Cancel the dialog, App Designer still thinks that you have changed the page. If you then save your project, the page object will be stamped with your ID and the date and time. Later, you and other developers will wonder what you changed and why! Be sure to close a page object before saving your project if you didn't intend to change anything.

If you scroll over to the right edge of the order list and then hover the mouse on the border just to the right of "Allow Deferred Processing," it will change into a double-pointed arrow. Double-click there and another column will appear. Expand it to see that it's called "Out of available." This appears to be just a sequence number for each item on the page. What's it for? I don't know. But let me suggest a possible use. Have you ever needed to reorder the fields on a long page, and become lost or confused? Maybe this sequence number could be used to back out some of your changes. But if you know what it's really for, please tell me.

Table-based layout

There are various ways of formatting HTML pages. One way is to use invisible HTML tables and let the browser determine the actual position of each element. That's what PeopleSoft does for the most part. Sometimes a page seems to misbehave. You have carefully aligned everything but the resulting page shows elements thrown around in seemingly random places. If that happens, it might help your understanding of the situation to see the invisible tables. One quick way of doing this is to generate the HTML as described above and then open the file in Word. The tables will show up as gray lines. It makes no sense to change the page in Word, of course, but this might help you find the problem.

Until next time...