On the page, in Edit mode, click the Page: Properties link, then click the Events Select the Go to page radio button, then, next to the field, click the Browse Pages

Building Example Portlets with OmniPortlet 4-25 Figure 4–51 Weather Information Web Page Portlet for New York

4.7 Building an OmniPortlet Using the HTML Layout

As you can see from the examples in this chapter, you can use any data source with any of the built-in layouts in OmniPortlet. This section will show you how to use the same Web Service data source you used in Section 4.2, Building an OmniPortlet Based on a Web Service to create a portlet using the HTML layout in OmniPortlet. At the end of this section, your portlet will look like Figure 4–52 . Figure 4–52 OmniPortlet Using the HTML Layout To create a portlet using the HTML layout, perform the following steps:

1. Follow steps 1-8 in

Section 4.2, Building an OmniPortlet Based on a Web Service to use the Web Service data source.

2. On the View tab, under Layout Style, select HTML, then click Next.

3. On the Layout tab, the default layout is a Simple Table.

You can switch the layout using the Quick Start drop-down list, or clear the fields to create your own layout. For this example, use the default Simple Table layout. In the Repeating Section, you can see how OmniPortlet automatically populates the columns from the data source into your layout. You can modify the HTML in any of the sections as you wish.

4. Click Finish. Your portlet looks like

Figure 4–53 . 4-26 Oracle Fusion Middleware Developers Guide for Oracle Portal Figure 4–53 Initial View of an OmniPortlet Using the HTML Layout 5. Youll notice that under img, the URL displays instead of an actual image. To change the HTML source, click the Edit Defaults pencil icon to edit your OmniPortlet.

6. Click the Layout tab.

7. In the Repeating Section, look for the row with the code: TDimgTD. 8. Replace this code with: TDimg src=imgTD. 9. You can also change the column headers in the Non-Repeating Heading Section. For example, replace: TH CLASS=PortletHeading1imgTH with TH CLASS=PortletHeading1Weather GraphicTH 10. In the Non-Repeating Heading section, delete the line: TH CLASS=PortletHeading1Zip CodeTH 11. In the Repeating Section, delete the line: TDzipCodeTD 12. Perform the same action for any other headings you wish to change, then click Finish . Your portlet now looks like Figure 4–54 . Figure 4–54 Final View of an OmniPortlet Using the HTML Layout