HTML-Related Design Considerations

Consider these HTML-related guidelines when you are designing pagelets:

  • Ensure that the pagelet encapsulates data to provide at-a-glance summary information.

  • Ensure that the pagelet provides links to detailed application pages.

  • Avoid large borders or a design that creates extraneous white space. Screen area on a homepage is valuable and data should be maximized.

  • Avoid designs that make the pagelet wider than the prescribed size. This undesirable design forces the user to scroll horizontally, so you should design your HTML to be vertically oriented. For instance, radio buttons should be arranged vertically, not side-by-side. When you create a form, buttons should appear below a text box, not next to it.

  • Because this is a business-oriented portal, avoid extravagant or extraneous graphics. If you use graphics, they should be purposeful and unobtrusive. No graphic should be wider than 218 pixels, which would force the pagelet to be wider than a narrow pagelet.

  • Avoid using any text or HTML tags that force the pagelet to a width that is greater than 218 pixels.

  • In general, avoid explicit sizing. Let the browser render content in the space that is available, which should allow your text and graphics to fit appropriately. For example, place text in an HTML table to enable the table to wrap any long strings.

  • When appropriate, use the PeopleSoft style sheet to ensure that the appearance and character of your pagelet is consistent with the rest of the PeopleTools portal content.

  • When your pagelet does not use the entire width of the column, center the pagelet content.

  • If a link on the pagelet takes the user to another website and you want to display the content in a new window, rather than using target=_blank in the link tag, use the following code: 

    <a href="javascript:void window.open
('http://www.example.com/cgi-bin?article3');" class="PSHYPERLINK">

  • If a pagelet has personalization options, the pagelet should have a default mode. In default mode, ensure that the pagelet includes a standard set of data and a message conveying that default data can be personalized.

PeopleSoft Interaction Hub Guidelines

This section lists some HTML-related development guidelines for pagelets that you use in the PeopleSoft Interaction Hub.

  • Within PeopleTools, attributes from all content are merged into the single <BODY> tag; be aware of the order of attribute precedence.

    The order of attribute precedence is:

    1. Template.

    2. Target content.

    3. Template components.

    Events beginning with on are naively combined, so if one of them issues a return, the following events will not run. All other attributes are not examined; rather they are used in order of precedence. For example, if both the template and a content component contain topmargin, the template attribute will be applied.

  • Avoid large borders or anything that creates extraneous white space. Screen area on a homepage is valuable and data should be maximized.

  • Avoid implementing anything that will make the pagelet width wider than the prescribed size. Making the user scroll horizontally is undesirable.

    Make your HTML vertically oriented. For instance, radio buttons should be placed vertically, not side-by-side. When you create a form, any buttons should appear under a text box, not next to it.

  • Avoid using graphics that do not have thoughtful purpose. This is a business-oriented portal, so extravagant or extraneous images should not be used. If any are used, they should be purposeful and unobtrusive. No graphic should be wider than 218 pixels. A graphic larger than this size will force the width of the pagelet to exceed the size of a narrow pagelet.

  • Avoid using any text or directives that force the pagelet to a width greater than 218 pixels.

  • In general, avoid explicit sizing and allow the portal to set the width. Your text and graphics should then fit appropriately. For instance, placing text within an HTML table will allow it to wrap any long strings.

  • When appropriate, use the PeopleSoft style sheet to ensure that the appearance and character of your pagelet is consistent with the rest of the PeopleSoft Interaction Hub content.

  • When your pagelet does not use the entire width of the column, center the pagelet content.

  • If a link takes the user to another website and you want it to display the content in a new window, rather than using target=_blank within the link tag, use:<a href="javascript:void window.open ('http://www.example.com/cgi-bin?article3');" class="PSHYPERLINK">