Guidelines For Optimizing Pages For Classic Plus PDF

Guidelines for
Optimizing
Pages for
Classic Plus
RED PAPER / NOVEMBER 14, 2018
DISCLAIMER
This material has not been submitted to any formal Oracle test and is published as is. It has not been
the subject of rigorous review. Oracle assumes no responsibility for its accuracy or completeness. The
use of this information or the implementation of any of these techniques is a customer responsibility
and depends on the customer's ability to evaluate and integrate them into the customer's operational
environment. While each item may have been reviewed by Oracle for accuracy in a specific situation,
there is no guarantee that the same or similar results will be obtained elsewhere. Customers
attempting to adapt these techniques to their own environments do so at their own risk.
Information in this red paper was developed in conjunction with use of the products specified and is
limited in application to those specific hardware and software products and levels.
Oracle may have patents or pending patent applications covering subject matter in this document. The
furnishing of this document does not give you any license to these patents
2 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Table of Contents
Introduction .................................................................................................. 6
Structure of This Red Paper ........................................................................ 6
Related Materials ......................................................................................... 6
Overview...................................................................................................... 8
Who Should Read This Paper? ................................................................................................... 8
Before You Begin ........................................................................................................................ 8
Enabling Classic Plus for a Component....................................................... 8
Standard Page Controls When Rendered as Classic Plus .......................... 9
Check Boxes ............................................................................................................................... 9
Drop-Down List Boxes ................................................................................................................10
Edit Boxes ..................................................................................................................................10
Edit Boxes Set for Date Input .....................................................................................................10
Edit Boxes with Errors ................................................................................................................11
Edit Boxes with Lookup Prompts ................................................................................................11
Grids ...........................................................................................................................................11
Group Boxes...............................................................................................................................11
Hyperlinks ...................................................................................................................................12
Labels for Group Boxes and Grids .............................................................................................12

Labels for Page Controls ............................................................................................................12
Long Edit Boxes .........................................................................................................................13
Page Tabs and Grid Tabs ..........................................................................................................13
Primary Action Buttons ...............................................................................................................13
Push Buttons ..............................................................................................................................14
Scroll Areas ................................................................................................................................14
Troubleshooting Issues with Classic Plus Rendering ................................ 14
Fix Alignment Issues That Also Exist in Classic .........................................................................14
Use Default Style Classes Only ..................................................................................................17
Use Default Style Sheets Only ...................................................................................................19
Change Custom Position to Fix Label Alignment and Overlap Issues ........................................20
Update the Styles Applied to the Content of HTML Areas ..........................................................23
Fix Label Wrapping Issues .........................................................................................................26
Change Custom Field Size to Eliminate Horizontal Scroll Bars ..................................................33
Fix Wrapping Issues in Grid and Scroll Area Headers................................................................35
Fix Truncated Columns in Grids .................................................................................................37
Fix Truncated Button Text ..........................................................................................................39
Designate the Primary Button for a Page ...................................................................................41
Fix Vertical Spacing and Horizontal Alignment Issues Between Group Boxes ...........................42
Remove Unnecessary Group Boxes and Frames ......................................................................44

Review and Adjust Non-Standard UI Structures .........................................................................50
Use Frames as a Grouping Technique for Related Page Controls .............................................52
Convert All Related Components and Pages to Classic Plus .....................................................55
Retest in Other Installed Languages ..........................................................................................55
Validation and Feedback ........................................................................... 56
Customer Validation ...................................................................................................................56
Field Validation ...........................................................................................................................56
Authors ...................................................................................................... 56
Revision History ......................................................................................... 56

INTRODUCTION
This red paper is a practical guide for technical users, installers, system
administrators, and programmers who implement, maintain, or develop
applications for your PeopleSoft system. In this red paper, we discuss
guidelines on how to optimize classic pages to display well when the
classic plus theme is in effect.
Much of the information in this document originated within the PeopleTools

development organization and is therefore based on real-life issues that
have been encountered when PeopleTools development and PeopleSoft
application teams converted existing classic pages for classic plus.
Although this document does not address every conceivable problem that
one could encounter with rendering classic pages as classic plus, the
issues that appear in this document are the problems that proved to be the
most common or troublesome.
STRUCTURE OF THIS RED PAPER
This red paper provides guidance for optimizing classic pages to display
well when the classic plus theme is in effect.
Oracle updates this document as needed so that it reflects the most current
feedback from internal software development teams and from the field.
Therefore, the structure, headings, content, and length of this document
may vary with each posted version. To see if the document has been
updated since you last downloaded it, compare the date of your version to
the date of the version that is posted on My Oracle Support.
RELATED MATERIALS
This paper is not a general introduction to creating classic PeopleSoft

applications and is written for experienced IT professionals with a good
understanding of the PeopleSoft Internet Architecture. To take full
advantage of the information in this document, you should have a basic
understanding of system administration, basic Internet architecture,
integration technologies, relational database concepts and SQL, and how
to use PeopleSoft applications.

This document does not replace the PeopleTools 8.5x product
documentation. Before you read this document, you should become familiar
with the PeopleSoft Internet Architecture information in the PeopleTools
product documentation to ensure that you have a well-rounded
understanding of the technology.
Note: The information in this document may eventually be incorporated into

subsequent versions of the product documentation.
The following product documentation discusses many of the fundamental

concepts that are related to the PeopleSoft Internet Architecture:
• PeopleTools: Getting Started with PeopleTools
• PeopleTools: System and Server Administration
• PeopleTools: Application Designer Developer’s Guide
• PeopleTools: Integration Broker
• PeopleTools: Integration Broker Administration
• PeopleTools: PeopleCode API Reference
• PeopleTools: PeopleCode Language Reference
• PeopleTools installation for your database platform
Additionally, you should be familiar with the documentation that is delivered

with Oracle Tuxedo, Jolt, and WebLogic.

OVERVIEW
This red paper provides guidance for optimizing classic pages to display well when the classic plus
theme is in effect.
With the introduction of the PeopleSoft Fluid User Interface in PeopleTools 8.54, fluid pages and
traditional classic pages have co-existed together in all PeopleSoft applications, and will continue to do
so. With PeopleTools 8.56, “classic plus” was introduced to unify the look of select classic pages with
the fluid interface. With classic plus, reworked pages in selected classic components are displayed
with fluid-like styling.
Starting with PeopleTools 8.56 and continuing with subsequent releases, the pages within specific
classic components have been reworked, and the components are delivered with the classic plus
setting enabled. Moreover, each PeopleSoft application except for Campus Solutions is also delivering
many components as classic plus with each update image.
You may wish to update your own custom classic components to classic plus on a component-by-
component basis. This red paper contains instructions on how to do so along with guidelines and
troubleshooting information to help you with the process.
This overview also includes the following topics:
• Who should read this paper?
• Before you begin.
Who Should Read This Paper?

Application developers, portal administrators.
Before You Begin

If you have not done so already, enable classic plus system wide, which will allow you to view Oracle-
delivered components with classic plus styling along with any updates you make to your custom,
classic components.
To enable classic plus system wide:
1. In the browser, select PeopleTools, Portal, Branding, Branding System Options.
2. In the Theme Style Type field, select Classic Plus.
3. Save your changes.
ENABLING CLASSIC PLUS FOR A COMPONENT

You may wish to update your own custom classic components to classic plus on a component-by-
component basis.
To do so:
1. Open the component definition in Application Designer.
2. Open the Component Properties dialog box.
3. On the Style tab, select the Theme Selection: Classic Plus check box.
4. Save the component definition.

5. In the browser, review the classic plus rendering of every page and secondary page displayed from
this component.
In some cases, no rendering issues will be encountered. The pages are rendered acceptably in
classic plus and no rework is required.
However, if you suspect that there are rendering issues, do the following:
– Review the section, Standard Page Controls When Rendered as Classic Plus, to ensure you
understand the default styling for standard page controls in classic plus.
– Review the guidelines in Troubleshooting Issues with Classic Plus Rendering to identify solutions
to commonly encountered problems.
6. If your system has more than one installed language, review the pages in the component again in
one or more of the languages installed on your PeopleSoft system. See Retest in Other Installed
Languages for more information.
STANDARD PAGE CONTROLS W HEN RENDERED AS CLASSIC PLUS

Prior to troubleshooting issues with how your pages appear in classic plus, you should become familiar
with how standard page controls are rendered in classic plus. Becoming familiar with standard classic
plus rendering will ensure that you focus your efforts on problem areas, and not on items that you
cannot change. In general, classic plus rendering resembles fluid styling. Therefore, the font size and
spacing is increased when a page is rendered as classic plus as compared to standard classic
rendering. In addition, the colors and icons used resemble those used on fluid pages.
The examples in this section are presented in alphabetical order.
Check Boxes
Figure 1. Example of a check box (deselected) in classic plus

Drop-Down List Boxes
Figure 2. Example of a drop-down list box in classic plus
Edit Boxes
Figure 3. Example of an edit box in classic plus
Figure 4. Example of an edit box (with focus) in classic plus
Edit Boxes Set for Date Input
Figure 5. Example of a date edit box in classic plus
Figure 6. Example of a date edit box (with focus) in classic plus

Edit Boxes with Errors
When there is an error in the value entered in any field, the field is highlighted with a red background.
Figure 7. Example of an edit box with an error in classic plus
Edit Boxes with Lookup Prompts
Figure 8. Example of an edit box with a lookup prompt in classic plus
Figure 9. Example of an edit box (with focus) with a lookup prompt in classic plus
Grids
Many of the controls on a grid in classic plus resemble the controls on a fluid grid.
Figure 10. Example of a grid in classic plus
Group Boxes
Figure 11. Example of a group box in classic plus
Figure 12. Example of a group box with hidden borders in classic plus

Hyperlinks
Figure 13. Example of a hyperlink in classic plus
Figure 14. Example of a hyperlink in classic plus when the cursor is over the link
Labels for Group Boxes and Grids

In classic plus, a group box label does not have a background color. In addition, the grid label is placed
on top of the grid outside the box that encloses the grid controls and data.
Figure 15. Example of group box and grid labels
Labels for Page Controls
Figure 16. Example of a label for a page control in classic plus

Long Edit Boxes
Figure 17. Example of a long edit box in classic plus
Figure 18. Example of a long edit box (with focus) in classic plus
Page Tabs and Grid Tabs
Figure 19. Example of page tabs and grid tabs in classic plus
Primary Action Buttons
Figure 20. Example of a primary action button in classic plus
Figure 21. Example of a primary action button in classic plus when the cursor is over the button

Push Buttons
Figure 22. Example of a push button in classic plus
Figure 23. Example of a push button in classic plus when the cursor is over the button
Scroll Areas
Many of the controls on a scroll area in classic plus resemble the controls on a fluid scroll area.
Figure 24. Example of a scroll area in classic plus
TROUBLESHOOTING ISSUES W ITH CLASSIC PLUS RENDERING

The following sections present real examples that were encountered with classic plus rendering along
with the solutions that were developed to overcome these issues.
Fix Alignment Issues That Also Exist in Classic
SYMPTOMS
If page controls are misaligned in classic, then you can expect that the misalignments will be magnified
when the page is rendered in classic plus. Review the page rendering in both classic plus and classic
to determine whether misalignment in classic plus is due to existing misalignment in classic or due to
some other cause.
In the following example from the My System Profile page, several controls in the Personalizations
group box are not well aligned. Specifically, the field value of English on the first line is not aligned with
the other three field values. On the second line, the field label wraps; in this example, the standard
field label for the drop-down list box is not used and it is replaced by PeopleCode at runtime.

Figure 25. Before: Fields in the Personalizations group box in classic plus
The same issues exist in the classic rendering of the page.
Figure 26. Before: Fields in the Personalizations group box in classic
SOLUTION
To fix these problems, modify the positioning of the controls in Application Designer. Notice that the
first drop-down list box is not left-aligned with the other three.

Figure 27. Before: Page controls in the Personalizations group box in Application Designer
Move the other three controls so that the field values are left-aligned with the first drop-down list box.
Also, right-align the label for the first drop-down list box so that the label is aligned with the others.
Finally, consider how much space is required for the runtime label that replaces Language Code, and
move all of the controls farther to the right if necessary.
Figure 28. After: Page controls in the Personalizations group box in Application Designer

RESULTS
Figure 29. After: Fields in the Personalizations group box in classic plus
Use Default Style Classes Only
SYMPTOMS
When non-default styles are applied to page controls, then these items will not render appropriately in
classic plus. The font size, spacing, and color will not resemble other controls on the page. The
PeopleTools-delivered classic plus style sheet (PT_CLASSIC_PLUS) updates the look of delivered
default styles only. Therefore, if any non-default styles are used, then the styling that appears for these
styles in classic rendering passes through unchanged by the classic plus style sheet.
In this example from the Component Branding page, the text for Style Sheet Name and JavaScript
Name are in a smaller blue font with a light blue background.
Figure 30. Before: Non-default styles used on the Component Branding page in classic plus

SOLUTION
To fix this problem, set the Style property for the page controls to *** Use Default Style ***, which
allows the system to apply the default style for that control. Depending on the page control, the Style
property is set in one or more locations in the properties dialog box:
• For push buttons and hyperlinks, the Style property is set on the Type tab.
• For grids and scroll areas, the following style properties can be set on the Label tab:
– Style property for the header.
– Background Style property for the body area.
– Style property for the footer.
• For edit boxes, the following style properties can be set:
– On the Record tab, the Style property for the edit box data.
– On the Label tab, the Style property for the label text.
• For group boxes, the following style properties can be set on the Label tab:
– Style property for the label text.
– Style property for the body.
Figure 31. Before: The Style property set to a non-default value in Application Designer

RESULTS
Figure 32. After: Default styles used on the Component Branding page in classic plus
Use Default Style Sheets Only
SYMPTOMS
When the font size, spacing, and colors do not resemble standard classic plus styling across the entire
page or component rather than just for one or two page fields, then a custom style sheet may have
been applied at the page level or at the component level.
SOLUTION
To fix this problem, discontinue the use of custom style sheets:
• On the Page Properties dialog box, select *** Use Default Style *** for both the page style sheet and
the page background.
• On the Style tab of the Component Properties dialog box, delete any custom style sheet objects.
• In the browser, in PeopleTools > Branding > Component Branding, delete any custom style sheet
objects.

Change Custom Position to Fix Label Alignment and Overlap Issues
SYMPTOMS
When a label is set to a custom position, it can appear misaligned in classic plus.
EXAMPLE 1: VERTICAL MISALIGNMENT
In the following example from the Current User Sessions page, the Last Page Refresh label is higher
than the field’s data.
Figure 33. Before: Field label misalignment on the Current User Sessions page in classic plus
SOLUTION
To fix this problem, change the custom position setting to Left, which is the setting recommended by
PeopleTools development to fix label alignment issues like this. On the Label tab of the page field
properties dialog box, select Position: Left.

Figure 34. Before: Label position set to Custom
RESULTS
Figure 35. After: Field label properly aligned on the Current User Sessions page in classic plus
EXAMPLE 2: VERTICAL OVERLAP
In the following example from Edit Prompt Properties, the labels for Format, Field Type, and Edit Type
overlap the drop-down list box fields.

Figure 36. Before: Format, Field Type, and Edit Type labels overlap the drop-down list boxes in classic plus
SOLUTION
To fix this problem, change the custom position setting to Top, which is the setting recommended by
PeopleTools development to fix label overlap issues like this. On the Label tab of the page field
properties dialog box, select Position: Top.
Figure 37. Before: Label position set to Custom

RESULTS
Figure 38. After: Field, Field Type, and Edit Type labels no longer overlap in classic plus
Update the Styles Applied to the Content of HTML Areas
SYMPTOMS
The content of HTML areas does not match classic plus styling. Because the content, format, and
styling of HTML areas is entirely up to the application developer, the default PeopleTools styles that
apply to standard page controls are often not used. Therefore, classic plus overrides are not applied to
most HTML areas.
In the following example, the HTML area generates a grid-like structure. However, significant portions
of the “grid” data is missing including many “columns” of data.

Figure 39. Before: An HTML area displaying grid-like data in classic plus
SOLUTION
To fix this problem, you need to analyze the HTML code defined for the HTML area, the HTML
generated for the page, or both.
The following example shows the HTML structure generated for our example. It has an HTML table
structure similar to that of PeopleTools-generated grid. However, instead of using default, PeopleTools
grid style classes, it uses the PSQRYRESULTSHDR, PSQRYRESULTSODDROW and
PSQRYRESULTSEVENROW style classes as shown in the example.
Figure 40. Before: Examining the generated HTML for an HTML area
Next, map the styles used to default PeopleTools styles defined in the PT_CLASSIC_PLUS style
sheet. Ideally, you would change the HTML code of your HTML area to apply default PeopleTools
styles to the structural elements of your HTML area. Then, the generated HTML would be styled
appropriately.

In this example, because the PeopleTools development team owns the content of the
PT_CLASSIC_PLUS style sheet, the style sheet itself was modified to include the
PSQRYRESULTSHDR, PSQRYRESULTSODDROW and PSQRYRESULTSEVENROW styles used
by this and other HTML areas. However, your updating the PT_CLASSIC_PLUS style sheet is not
recommended because that will be treated as a customization at upgrade.
Figure 41. After: PT_CLASSIC_PLUS style sheet modified to include mapped non-default styles

RESULTS
Figure 42. After: An HTML area properly styled for classic plus
Fix Label Wrapping Issues
SYMPTOMS
In some circumstances, the increase in font size for classic plus rendering will result in field labels
wrapping. There are multiple causes for this problem. In some cases, label alignment alone is the
cause. In other cases, when multiple fields exhibit the problem, then the group box or page containing
the fields is too small. In other cases, a PeopleCode program updates the label text to a string that is
longer than what is displayed in Application Designer at design time.
EXAMPLE 1: THE LABEL IS ALIGNED INCORRECTLY
In the following example from the Archive Data page, the Commit Frequency label wraps.

Figure 43. Before: Field label wrapping on the Data Archive page in classic plus
SOLUTION
To fix this problem, change the label alignment and size to match its position and usage on the page.
In this example, the label should be right-aligned to the field. In addition, the amount of space allotted
to the label needs to be increased. On the Label tab of the page field properties dialog box, select
Alignment: Right. In addition, move the page control to the right and increase the size of the label area.
Figure 44. Before: Label alignment set to Left

Figure 45. After: Label size is increased and alignment set to Right
RESULTS
Figure 46. After: The field label no longer wraps

EXAMPLE 2: THE CONTAINING GROUP BOX IS TOO SMALL
In the following example from the Specify Display Options page of Pagelet Wizard, the labels within
the Chart Options group box all wrap to a second line.
Figure 47. Before: Field labels wrapping in the Chart Options group box in classic plus
SOLUTION
To fix this problem, increase the size of the group box containing the page controls. However, in this
case, increase the page size first to accommodate the resized group box and repositioned page
controls.
In this example, the page width was increased from 599 to 672 pixels.

Figure 48. Before: Page width set to 599 pixels
Then, increase the width of the group box containing the page controls and reposition the controls
themselves.

Figure 49. After: With an increased page size and group box size, the page controls can be moved to the right

RESULTS
Figure 50. After: Field labels no longer wrap in the Chart Options group box in classic plus
EXAMPLE 3: PEOPLECODE UPDATES THE LABEL TEXT
In some cases, a PeopleCode program updates the label text at runtime to a string that is longer than
the label displayed in Application Designer at design time.
SOLUTION
Increase the space available to the label by moving the page control slightly to the right.
RESULTS
In the following example, the label in Application Designer is Control ID, which is updated by a
PeopleCode program to be Save Parameters.

Figure 51. After: The updated label does not wrap
Change Custom Field Size to Eliminate Horizontal Scroll Bars
SYMPTOMS
In some cases, a custom field size will cause the page to be generated with extra white space on the
right and a horizontal scroll bar.
In this example from the Manage Request Approval page, the horizontal scroll bar and the extra white
space on the right appear to be unnecessary.
Figure 52. Before: A horizontal scroll bar is displayed without apparent content to scroll to
SOLUTION
Note that the page definition in Application Designer also shows the effect of the custom field size at
design time.
To fix this problem, change the custom size setting to Average, which is the setting recommended by
PeopleTools development to fix field length issues like this. On the Record tab of the page field
properties dialog box, select Size: Average.

Figure 53. Before: Field size set to Custom in Application Designer
RESULTS
Figure 54. After: A horizontal scroll bar no longer appears in classic plus

Fix Wrapping Issues in Grid and Scroll Area Headers
SYMPTOMS
In some cases, some of the controls in grid and scroll area headers wrap to a second line.
In the following example, the grid header wraps to a second line.
Figure 55. Before: Grid header wraps in classic plus

SOLUTION
To fix this issue, increase the width of the grid.
Figure 56. Before: Width of grid that wraps in Application Designer
Figure 57. After: Grid width increased in Application Designer

RESULTS
Figure 58. After: Grid header no longer wraps in classic plus
Fix Truncated Columns in Grids
SYMPTOMS
In some cases, some of the content in a grid column is truncated.
In the following example, the full text of the button in the last column is: ℗View DetailsNNNN⊗.
Figure 59. Before: Content of a grid column is truncated in classic plus
SOLUTION
To fix this problem, increase the width of the grid column and then adjust the size of the label text if
necessary. In this example, the label size was changed from Standard Text to Custom, and the column
width was increased.

Figure 60. Before: Label size set to Standard Text in Application Designer
Figure 61. After: Label size set to Custom and column width increased in Application Designer
RESULTS
Figure 62. After: Content of the grid column is no longer truncated in classic plus

Fix Truncated Button Text
SYMPTOMS
A button does not display all of the button label text.
In the following example from the Refine Inquiry Criteria modal window, Go To Budget Search is
truncated on the button.
Figure 63. Before: Button label text is truncated in classic plus
SOLUTION
To fix this problem, increase the width of the push button page control. Notice in this example that the
full button label is not displayed in Application Designer either.

Figure 64. Before: Button label text is also truncated in Application Designer
Figure 65. After: Button label text is no longer truncated in Application Designer

RESULTS
Figure 66. After: Button label text is no longer truncated in classic plus
Designate the Primary Button for a Page
SYMPTOMS
In classic plus, the primary button on a page is displayed in green rather than gray. PeopleTools will
automatically render the PeopleTools-generated Save button as the primary button. However, in some
circumstances, PeopleTools will not identify and highlight the primary button on a page.
SOLUTION
To fix this problem, manually set one button as the primary button by selecting the Activate by Enter
Key check box on the Use tab of the Push Button/Hyperlink Properties dialog box.

Figure 67. After: Using the Activate by Enter Key property to designate a primary button
Fix Vertical Spacing and Horizontal Alignment Issues Between Group Boxes
SYMPTOMS
In some cases, when multiple group boxes are stacked above one another on a page, the vertical
spacing between the group boxes is uneven, and the group boxes may not be aligned horizontally.
These issues become more apparent when all of the group boxes are collapsed.
In the following example, several collapsed group boxes are stacked one above the other. Three
issues are presented:
• The vertical spacing between the group boxes is uneven.
• Two group boxes are not aligned horizontally with the others.
• The label for one group box has a gray background.

Figure 68. Before: Group boxes have uneven vertical spacing and are not aligned horizontally
SOLUTION
To fix these issues, do the following:
• To make the vertical spacing between the group boxes even, change the
PABACKGROUNDINVISIBLE body style to PTCPGROUPBOXMINPADDING, which reduces the
padding above and below each group box.
Figure 69. Before: Body style set to PABACKGROUNDINVISIBLE in Application Designer

• To realign the two group boxes horizontally with the others, remove the non-default styles from the
group box labels.
• To remove the gray background from the label for one group box, also remove the non-default style
from that group box’s label.
RESULTS
Figure 70. After: Group boxes have even vertical spacing and are aligned horizontally in classic plus
Remove Unnecessary Group Boxes and Frames
SYMPTOMS
In some circumstances, alignment and spacing issues are not attributable to alignment settings for
individual page controls. In classic plus, extra padding is added inside group boxes and frames.
EXAMPLE 1: USE A SINGLE GROUP BOX TO ENCOMPASS RELATED PAGE CONTROLS
In the following example, a grid-like structure has been simulated using three separate group boxes.
However, in classic plus, the “rows” of data are not aligned vertically.
Figure 71. Before: Extra group boxes result in alignment issues in classic plus
SOLUTION
Evaluate whether all group boxes and frames are actually required.

Figure 72. Before: Extra group boxes shown in Application Designer
To fix the problem on this page:
• Remove the second and third group boxes (labeled Actual Totals and Differences).
• Extend the first group box labeled Control Totals to encompass all of the data fields. Remove the
label for this group box.
• Add static text using the PSGROUPBOXLABEL style to create the “column” headings.
Figure 73. After: A single group box (Control Totals label not yet removed) encompasses all of the data fields

RESULTS
Figure 74. After: A single group box resolves alignment issues in classic plus
EXAMPLE 2:
In the following example, fields on different subpages are not aligned when the Define Feed Data
Types page is rendered in classic plus.

Figure 75. Before: Fields on separate subpages are not aligned in classic plus
SOLUTION
Fixing this problem can require multiple iterations since the contents of the subpages cannot be
viewed side-by-side in Application Designer at design time. You may need to make subtle changes,
view the results in the browser, and then make additional subtle changes.
First, resize each of the subpages to provide additional space for the page controls. Then, reposition
the page controls slightly to the right. Review the changes in the browser and continue to reposition
page controls until the alignment is correct.

Figure 76. Before: Separate subpages in Application Designer

Figure 77. Before: Contents of the PTFP_COMPROP_SBP and PTFP_ATOMPROP_SBP subpages
Figure 78. After: Contents of the PTFP_COMPROP_SBP and PTFP_ATOMPROP_SBP subpages

RESULTS
Figure 79. After: Fields on separate subpages are aligned in classic plus
Review and Adjust Non-Standard UI Structures
SYMPTOMS
In some cases, page controls are arranged to resemble a grid-like structure. In addition,
unconventional styles are applied to controls to emulate the look of a grid. Often, subtle alignment
issues are already present in classic. These alignment issues are magnified when these non-standard
structures are rendered in classic plus.

In the following example, there are alignment issues between the labels and field data.
Note: While styles reserved for other constructs (grids, specifically) have been applied as a technique
to highlight these fields, these non-standard usages were not removed in the final solution presented in
this paper.
Figure 80. Before: Fields aren’t aligned properly and use non-standard styles
SOLUTION
To fix this problem, reposition the page field by reducing the Top value from 38 to 35.
Figure 81. Before: Page field and its label are misaligned in Application Designer

RESULTS
Figure 82. After: Fields are aligned properly but still use non-standard styles
Use Frames as a Grouping Technique for Related Page Controls
SYMPTOMS
In some circumstances, page controls are not well aligned or have too much space between them.
EXAMPLE 1: METADATA CONVERSION PAGE
In the following example from the Metadata Conversion page, there is too much horizontal space
between the Convert and Delete buttons, and between the Category edit box and the Search button,
Figure 83. Before: Buttons and input fields are spread too far apart in classic plus

SOLUTION
To fix this problem, enclose all four page controls within a frame without borders.
Figure 84. After: Enclose the page controls in a borderless frame
RESULTS
Figure 85. After: Buttons and input fields are grouped more tightly in classic plus
EXAMPLE 2: AUDIT ARCHIVING PAGE
Similar to the previous example, there is too much horizontal space between the page controls. In
addition, there are label alignment issues.

Figure 86. Before: Buttons and input fields are spread too far apart in classic plus
SOLUTION
To fix this problem, enclose all eight page controls within a frame without borders.
Figure 87. After: Enclose the page controls in a borderless frame

RESULTS
Figure 88. After: Buttons and input fields are grouped more tightly in classic plus
Convert All Related Components and Pages to Classic Plus

Take care to create a consistent user experience. In these circumstances, convert all related
components and pages to classic plus:
• In WorkCenters. Also remember to set the WorkCenter itself to classic plus.
• In activity guides.
• When the main page opens another component or page in a modal window.
Retest in Other Installed Languages

Similar to developing other multi-language applications, you must retest your classic plus components
in one or more of the languages installed in your PeopleSoft system. Select the language or languages
that show the greatest increase in the number of characters as compared to your base language.

VALIDATION AND FEEDBACK
This section documents the real-world validation that this red paper has received.
Customer Validation
Oracle is working with PeopleSoft customers to get feedback and validation on this document.
Lessons that are learned from these customer experiences will be posted here.
Field Validation
Oracle Consulting Services has not yet provided feedback and validation on this document. Additional
lessons that are learned from field experience will be posted here.
AUTHORS
PeopleTools Development: Vishwanath Bv, Swetapadma Parida, and Dave Pierce.
REVISION HISTORY
Table 1: Revision History
DATE CHANGE
November 2018 Published document.

ORACLE CORPORATION
Worldwide Headquarters
500 Oracle Parkway, Redwood Shores, CA 94065 USA
Worldwide Inquiries
TELE + 1.650.506.7000 + 1.800.ORACLE1
FAX + 1.650.506.7200
oracle.com
CONNECT W ITH US
Call +1.800.ORACLE1 or visit oracle.com. Outside North America, find your local office at oracle.com/contact.
blogs.oracle.com/oracle facebook.com/oracle twitter.com/oracle
Copyright © 2018, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only, and the contents hereof are
subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed
orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any
liability with respect to this document, and no contractual obligations are formed either directly or indirectly by this document. This document may not be
reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission.
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or
registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks
of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. 1118
Guidelines for Optimizing Pages for Classic Plus
November 14, 2018
Authors: Vishwanath Bv, Swetapadma Parida, and Dave Pierce

Guidelines For Optimizing Pages For Classic Plus PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Guidelines For Optimizing Pages For Classic Plus PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Guidelines for

2 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Structure of This Red Paper ........................................................................ 6

Related Materials ......................................................................................... 6

Who Should Read This Paper? ................................................................................................... 8

Before You Begin ........................................................................................................................ 8

Enabling Classic Plus for a Component....................................................... 8

Standard Page Controls When Rendered as Classic Plus .......................... 9

Check Boxes ............................................................................................................................... 9

Drop-Down List Boxes ................................................................................................................10

Edit Boxes ..................................................................................................................................10

Edit Boxes Set for Date Input .....................................................................................................10

Edit Boxes with Errors ................................................................................................................11

Edit Boxes with Lookup Prompts ................................................................................................11

Labels for Group Boxes and Grids .............................................................................................12

3 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Long Edit Boxes .........................................................................................................................13

Page Tabs and Grid Tabs ..........................................................................................................13

Primary Action Buttons ...............................................................................................................13

Push Buttons ..............................................................................................................................14

Scroll Areas ................................................................................................................................14

Troubleshooting Issues with Classic Plus Rendering ................................ 14

Fix Alignment Issues That Also Exist in Classic .........................................................................14

Use Default Style Classes Only ..................................................................................................17

Use Default Style Sheets Only ...................................................................................................19

Update the Styles Applied to the Content of HTML Areas ..........................................................23

Fix Label Wrapping Issues .........................................................................................................26

Change Custom Field Size to Eliminate Horizontal Scroll Bars ..................................................33

Fix Wrapping Issues in Grid and Scroll Area Headers................................................................35

Fix Truncated Columns in Grids .................................................................................................37

Fix Truncated Button Text ..........................................................................................................39

Designate the Primary Button for a Page ...................................................................................41

Remove Unnecessary Group Boxes and Frames ......................................................................44

4 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Use Frames as a Grouping Technique for Related Page Controls .............................................52

Convert All Related Components and Pages to Classic Plus .....................................................55

Retest in Other Installed Languages ..........................................................................................55

Validation and Feedback ........................................................................... 56

Customer Validation ...................................................................................................................56

Field Validation ...........................................................................................................................56

Revision History ......................................................................................... 56

5 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Much of the information in this document originated within the PeopleTools

STRUCTURE OF THIS RED PAPER

This paper is not a general introduction to creating classic PeopleSoft

6 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

Note: The information in this document may eventually be incorporated into

The following product documentation discusses many of the fundamental

• PeopleTools: Getting Started with PeopleTools

• PeopleTools: System and Server Administration

• PeopleTools: Application Designer Developer’s Guide

• PeopleTools: Integration Broker

• PeopleTools: Integration Broker Administration

• PeopleTools: PeopleCode API Reference

• PeopleTools: PeopleCode Language Reference

• PeopleTools installation for your database platform

Additionally, you should be familiar with the documentation that is delivered

7 RED PAPER / Guidelines for Optimizing Pages for Classic Plus

This overview also includes the following topics:

• Who should read this paper?

• Before you begin.

Who Should Read This Paper?

Before You Begin