Designing Pages


There are a few things you can do to make editing pages with Application Designer a little easier.

NOTE: that you need a page definition open to access these features.

Select Group

Use select group (or the big hand cursor as I like to call it) to select multiple objects and move them together.

This is the select group toolbar icon:

select-group-toolbar-icon.png

This is the big hand cursor:

big-hand-cursor.png

Default Ordering

Use default ordering to reset your tab ordering once you have your fields in right order in your page order tab. This will make sure that when the user presses the tab key, their cursor moves correctly through the data entry fields (and doesn't jump around everywhere) - quite important from a usability standpoint.

This is the default ordering toolbar icon:

default-ordering-toolbar-icon.png

Grid Layout Settings

Change your grid settings for finer-grain movement of page objects. From the menu:

Layout > Grid Settings

Reduce the spacing from the default (width = 4px, height = 4px) to width = 2px and height = 2px. This will put the dots on your grid closer together and let you move objects with more accuracy.

NOTE: that if you reduce this to width = 1px and height = 1px the grid is not shown by default. If you do show the grid, everything goes black (because there's no gap between the dots).

page-finer-grid-layout.png

Test Mode for Tab Order

Use the Test Mode toolbar icon to test your tab order. This is what test mode is for. Click on the test mode switch then try pressing tab through the fields to make sure the cursor moves in the order you expect.

This is the test mode toolbar icon:

test-mode-toolbar-icon.png

Testing in Different Web Browsers

Configure browsers and test your page out in AS MANY browsers as possible. Use:

Layout > View in Browser

This is heaps faster than saving and refreshing pages, especially if the navigation to your page is not simple! Also, you can test your page layout without actually saving the page. So no more changing page layouts and saving hundreds of times (which is even more painful when using change control locking). Once you learn to use this, it will save you hours!

When you use the view in browser feature you can also view the page source to see things like scripts and stylesheets associated with that page.


Revision #2
Created Mon, Aug 5, 2019 10:22 PM by PeopleSoft Wiki
Updated Mon, Aug 5, 2019 10:28 PM by PeopleSoft Wiki