Viewing Pages in the Browser

This section discusses how to:

  • Work with the View in Browser feature.

  • Change the default browser.

  • Generate HTML.

  • View the HTML for a page.

  • Identify page definitions online.

During the page design process, you should periodically view how your page looks in the browser. How you design your page in PeopleSoft Application Designer may look different when viewed online, particularly if you are using subpages that contain multiple fields.

To do this, select Layout > View in Browser. This feature is helpful if you are changing any of the style characteristics of the page or aligning and spacing controls, such as scroll areas.

This is the PSOPTIONS page definition:

Image: Sample page in PeopleSoft Application Designer

This example illustrates the fields and controls on the Sample page in PeopleSoft Application Designer. You can find definitions for the fields and controls later on this page.

Sample page in PeopleSoft Application Designer

This is the same definition in View In Browser mode.

Image: Same sample page viewed in Microsoft Internet Explorer

This example illustrates the fields and controls on the Same sample page viewed in Microsoft Internet Explorer. You can find definitions for the fields and controls later on this page.

Same sample page viewed in Microsoft Internet Explorer

The View in Browser feature provides only a rough idea of how your page might look. For a more complete view of the page at runtime, including the navigation header, assign your page to a component and add it to the existing menu structure using the Registration Wizard. You can then access the page from the menu in the PeopleSoft Pure Internet Architecture.

You can test your page in any browser by changing the default browser to one other than Microsoft Internet Explorer. After you set up a new browser, you can select in which browser you want to view your pages.

To change the default browser:

  1. Open a page in PeopleSoft Application Designer.

  2. Select Layout > View in Browser > Edit Browser List.

    The Browsers dialog box appears.

  3. Click the Add button.

  4. Click the Browse button to locate the browser to add.

    You must select the correct path and browser application for the new browser to function properly.

  5. Enter the name, type, and version of the browser.

    The name that you enter appears in the Layout, View in Browser menu.

The PeopleSoft Pure Internet Architecture system automatically writes HTML forms or tags for all of the page controls that you add to a page. You do not need to know how to write HTML code to create pages in PeopleSoft Application Designer and then view them in the browser. The table shows this conversion:

Page Controls as HTML

Page Controls

HTML Forms

Static HTML Tags

Edit Box (editable) 

<INPUT TYPE=TEXT>

 N/A

Long Edit Box 

<TEXTAREA>

N/A

Drop-down List Box 

<SELECT><OPTION><OPTION>…</SELECT>

 N/A

Radio Button 

<INPUT TYPE=RADIO>

N/A

Check Box 

<INPUT TYPE=CHECKBOX>

N/A

Push Button or Link 

<INPUT TYPE=BUTTON>
<INPUT TYPE=HYPERLINK>

 N/A

Static Text

N/A

HTML text

Static Image

 N/A

 
<IMG>

Grid

 N/A

 
HTML <TABLE>

You can view the HTML that is created for your page by using the Generate HTML feature. The Generate HTML feature writes the HTML code to a file on the local drive. This feature is mainly used for debugging purposes and is not needed for the creation of pages.

To generate HTML for a page:

  1. Open the page for which you want to generate the HTML.

  2. Select Layout > Generate HTML.

  3. Select the browser type and version.

    PeopleSoft Application Designer generates the HTML to the c:\TEMP\pshtml directory. The file is named according to the page name and the browser that you select. For example, the Absence History page is named ABSENCE_HISTORY IE5.00.html.

To view the HTML for your page:

  1. Open the generated HTML file.

    The selected browser appears, displaying how your page appears at runtime.

  2. Select View > Source in your browser window.

    Notepad or another text-based application appears with the HTML that was used to create your page.

    Note: Different browsers might have different methods for viewing the HTML for your page.

    To adjust the look or function of how your page looks in the browser, do so in PeopleSoft Application Designer. If you make changes directly to the HTML in Notepad, your changes are not saved to the system. Each time that you open the page in the browser, it reverts to the settings of the original page definition.

In many cases, the page name online differs from the actual name of the page definition in PeopleSoft Application Designer. While viewing a page in the browser, locate the page definition name by pressing Crtl + J. A browser page appears revealing the name of the page, along with other system elements:

Image: System elements displayed when pressing Ctrl + J

This example illustrates the fields and controls on the System elements displayed when pressing Ctrl + J. You can find definitions for the fields and controls later on this page.

System elements displayed when pressing Ctrl + J

You can also right-click the page and selecting View Source from the drop-down menu. The HTML code appears for your page in a text application, such as Notepad. In most cases, the page name is in the sixth or so line of code after Page:. You can also identify the component and menu definitions for your page next to the page definition name.

Image: Page name in HTML source code

This example illustrates the fields and controls on the Page name in HTML source code. You can find definitions for the fields and controls later on this page.

Page name in HTML source code