Skip Headers
Oracle® Fusion Middleware Developer's Guide for Oracle Portal
11g Release 1 (11.1.1)

Part Number E10238-05
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

4 Building Example Portlets with OmniPortlet

This chapter shows you how to use OmniPortlet to create four portlets based on different data sources: a Web service, a spreadsheet (CSV), XML, and an existing Web page. You will build these portlets based on the various built-in layouts, and will create a separate portlet based on an HTML layout. You will learn how to create and modify these portlets, as well as use page parameters and events to add interactivity to your portal page.

This chapter includes the following sections:

Note:

To learn more about specific pages and tabs in OmniPortlet, click the Help link in the top right corner of the wizard. The online Help describes the contents of the selected page or tab. You can also find more information about using OmniPortlet in Chapter 3, "Creating Portlets with OmniPortlet." or about registering and configuring OmniPortlet with Oracle Portal in Oracle Fusion Middleware Administrator's Guide for Oracle Portal.

At the end of this chapter, you will create a page that contains four portlets, as shown in Figure 4-1.

Figure 4-1 Portal Page with Four OmniPortlet Examples

Description of Figure 4-1 follows
Description of "Figure 4-1 Portal Page with Four OmniPortlet Examples"

More on OTN

All four of these example portlets require you to be able to connect to the Internet. If you must use a proxy server to connect to the Internet, you will need to configure the HTTP proxy settings on the OmniPortlet Provider Test page to use proxy authentication. If the OmniPortlet provider has been set up to use proxy authentication that requires your login, you can enter your user information in the Proxy Authentication section of the Source tab in the OmniPortlet wizard. For more information on proxy authentication, refer to Section 3.2.2, "Source." For specific information on configuring the provider's proxy settings, refer to the Oracle Fusion Middleware Administrator's Guide for Oracle Portal.

Note:

The steps in this chapter assume that you are using the OmniPortlet provider that is available with Oracle Portal. If you installed the Oracle Portal Developer Kit separately, you may need to slightly modify the instructions when adding an OmniPortlet instance to the page. Instructions for registering and configuring OmniPortlet with Oracle Portal are located in Oracle Fusion Middleware Administrator's Guide for Oracle Portal.

4.1 Adding an OmniPortlet Instance to a Portal Page

In this section, you will learn how to add an OmniPortlet instance to your portal page.

To add an OmniPortlet instance to a page, perform the following steps:

  1. In the Edit mode of the page where you want to add the OmniPortlet, click the Add Portlets icon.

  2. On the Add Portlets page, in the Available Portlets list, click the Portlet Builders link.

  3. Click the OmniPortlet link.

  4. Click OK. The new instance of OmniPortlet now displays on your portal page, as shown in Figure 4-2.

Figure 4-2 OmniPortlet Instance on a Portal Page

Shows instance of OmniPortlet on portal page.
Description of "Figure 4-2 OmniPortlet Instance on a Portal Page"

Note:

On the IBM Linux on Power platform, if the action buttons (Next, Previous, Finish, and Cancel) are minimized to dots when defining the OmniPortlet, increase the stack size shell limit to unlimited and restart the WLS_PORTAL instance. Run the following command to set the stack size shell limit to unlimited:

prompt> ulimit -s unlimited

4.2 Building an OmniPortlet Based on a Web Service

The steps in this section will show you how to create a portlet that displays weather forecast information for a particular zip code. You will base this portlet on the Web Service available on the Oracle Technology Network. You will need Internet access to be able to complete this section.

To create an OmniPortlet based on a Web Service, perform the following steps:

  1. In the new OmniPortlet instance on your portal page, click the Edit Default link to start the OmniPortlet Wizard.

  2. On the Type page, select the Web Service radio button, then click Next.

  3. On the Source page, in the WSDL URL field, enter the following URL:

    http://webservices.oracle.com/WeatherWS/WeatherWS?WSDL

    Note:

    This Web Service has one method (WeatherWS.giveMeSomeWeatherInfo) and accepts one parameter (param0). If you use a method that has parameters, the parameters will display in this section of the tab. You can enter a sample value for the parameter, then click Test to view the sample XML data, the SOAP response, and the SOAP Request.

  4. Click Show Methods.

  5. In the Web Service Methods section, in the param0 parameter field, enter a sample Zip code (for example, 94065), then click Test. The Web Service: Test Result window displays, where you can verify the XML data returned by the Web Service, as shown in Figure 4-3.

    Figure 4-3 OmniPortlet: Web Service Test Results Page

    Description of Figure 4-3 follows
    Description of "Figure 4-3 OmniPortlet: Web Service Test Results Page"

  6. Close the window.

    The Source page should look like the image shown in Figure 4-4.

    Figure 4-4 OmniPortlet: Web Service Source Tab

    Description of Figure 4-4 follows
    Description of "Figure 4-4 OmniPortlet: Web Service Source Tab"

    Note:

    If you do not have access to the Internet, you can use a different Web Service, but keep in mind that your results will not match the example in this chapter.

  7. Click Next.

  8. On the Filter page, click Next.

  9. On the View page, in the Title field, enter Weather Forecast.

  10. In the Header Text field, enter Forecast per Zip Code.

  11. Make sure the Show Header Text check box is selected, and clear the Show Footer Text check box, as shown in Figure 4-5.

    Figure 4-5 OmniPortlet: Web Service View Tab

    Description of Figure 4-5 follows
    Description of "Figure 4-5 OmniPortlet: Web Service View Tab"

  12. Make sure the Tabular radio button is selected, then click Next.

  13. On the Layout page, select the Plain radio button.

  14. Specify the Column Label, Column, and Display As properties for your data according to Table 4-1.

    Table 4-1 Column Properties for the Weather Forecast Portlet

    Column Label Column Display As

    Day

    dayOfWeek

    Text

    High

    hiTemp

    Text

    Low

    lowTemp

    Text

    Precipitation

    precip

    Text

    (Blank)

    img

    Image


  15. Now that you've completed defining the portlet, click Finish. Your portlet should look like Figure 4-6.

    Figure 4-6 OmniPortlet: Web Service Portlet

    Description of Figure 4-6 follows
    Description of "Figure 4-6 OmniPortlet: Web Service Portlet"

4.3 Building an OmniPortlet Based on a Spreadsheet (CSV)

The steps in this section show you how to use OmniPortlet to define a portlet that displays regional information based on a spreadsheet (CSV) data source. This portlet will display the population of major U.S. urban areas in a pie chart.

To create an OmniPortlet based on a spreadsheet, perform the following steps:

  1. Create a region below the existing region on your portal page.

  2. Add an OmniPortlet to this new region.

  3. Start the OmniPortlet Wizard by clicking the Edit Default link.

  4. On the Type page, select the Spreadsheet radio button, then click Next.

  5. On the Source page, in the CSV URL field, replace the existing text with the following CSV:

    http://webservices.oracle.com/WeatherWS/city_population.csv

    Note:

    If you do not have access to the Internet, you can use the default URL, but keep in mind that your results will not match the example in this chapter.

  6. Ensure that the Use first row of spreadsheet for column names check box is selected

  7. Click Next.

  8. On the Filter page, click Next.

  9. On the View page, in the Title field, enter Major U.S. Urban Areas - Population.

  10. Clear the Show Header Text check box.

  11. In the Footer Text field, enter Click a pie section to view the population of the specified urban area.

    Note:

    The text you just entered in the Footer Text field instructs your end users to click a pie section to view more details about the selected population. To enable this feature, you will need to complete the steps in Section 4.6, "Setting Up Portlet Parameters and Events".

  12. Ensure that the Show Footer Text check box is selected.

  13. Under Layout Style, select the Chart radio button, then click Next.

  14. On the Layout page, select the Pie radio button.

  15. In the Width field, enter 300.

  16. In the Height field, enter 300.

  17. From the Legend list, choose Top.

  18. Select the 3D Effect check box.

  19. Under Column Layout, from the Group list, choose <None>.

  20. From the Category list, choose City.

  21. From the Value list, choose Population. The Layout tab should now look like the image shown in Figure 4-7.

    Figure 4-7 OmniPortlet: Character-Separated Values (CSV) Layout Tab

    Description of Figure 4-7 follows
    Description of "Figure 4-7 OmniPortlet: Character-Separated Values (CSV) Layout Tab"

  22. Click Finish.

    Your portlet now displays on your portal page below the Weather Forecast portlet, and should look like Figure 4-8.

    Figure 4-8 OmniPortlet: CSV OmniPortlet on the Page

    Description of Figure 4-8 follows
    Description of "Figure 4-8 OmniPortlet: CSV OmniPortlet on the Page"

4.4 Building an OmniPortlet Based on an XML Data Source

The steps in this section will show you how to use OmniPortlet to define a portlet that displays news information in a scrolling layout, based on an XML data source.

To create an OmniPortlet based on an XML data source, perform the following steps:

  1. Create a region next to the Web Services portlet (Weather Forecast) on your portal page.

  2. Add an OmniPortlet to this new region.

  3. Start the OmniPortlet Wizard by clicking the Edit Default link.

  4. On the Type page, select the XML radio button, then click Next.

  5. On the Source page, in the XML URL field, enter the following URL:

    http://www.nytimes.com/services/xml/rss/nyt/Travel.xml

    Note:

    If you do not have access to the Internet, you can use a different RSS feed, but keep in mind that your results will not match the images in this example.

  6. In the XSL Filter URL field, enter the following URL for the XSL file:

    http://www.oracle.com/technology/products/ias/portal/viewlets/omniportletnews.xsl

    Note:

    This XSL filter transforms the RSS news feed into the ROWSET/ROW structure that OmniPortlet can consume.

  7. Click Next.

  8. On the Filter page, click Next.

  9. On the View page, in the Title field, enter Travel News.

  10. Clear the Show Header Text check box.

  11. In the Footer Text field, enter Source: The New York Times.

  12. Ensure that the Show Footer Text check box is selected.

  13. Under Layout Style, select the News radio button, then click Next.

  14. On the Layout page, under News Style, select the Scrolling radio button.

  15. In the Width field, enter 475.

  16. In the Height field, enter 50.

    The News Style section of the Layout tab should now look like the image shown in Figure 4-9.

    Figure 4-9 OmniPortlet: XML Layout Tab - News Style

    Description of Figure 4-9 follows
    Description of "Figure 4-9 OmniPortlet: XML Layout Tab - News Style"

  17. Under Column Layout, next to Field 1 choose title from the Column list, Hyperlink from the Action list, and enter ##link## in the URL field, as shown in Figure 4-10.

    Figure 4-10 OmniPortlet: News Style Column Layout

    Description of Figure 4-10 follows
    Description of "Figure 4-10 OmniPortlet: News Style Column Layout"

  18. Next to Field2, choose description from the Column list and leave the default values for the other settings. Ensure this section of the Layout tab looks like Figure 4-11.

    Figure 4-11 Column Layout Section of the Layout Tab

    Description of Figure 4-11 follows
    Description of "Figure 4-11 Column Layout Section of the Layout Tab"

  19. Click Finish.

    Your portlet now displays on your portal page, as shown in Figure 4-12.

    Figure 4-12 OmniPortlet: XML Scrolling News OmniPortlet on the Page

    Description of Figure 4-12 follows
    Description of "Figure 4-12 OmniPortlet: XML Scrolling News OmniPortlet on the Page"

4.5 Building an OmniPortlet Based on a Web Page Data Source

The steps in this section will show you how to use OmniPortlet to create a portlet that displays weather information in a text format based on an existing Web Page. In this section, you will use OmniPortlet to clip and scrape content from Web sites.

To create an OmniPortlet based on a Web page data source, perform the following steps:

  1. Create a region below the XML portlet (Travel News) on your portal page.

  2. Add an OmniPortlet to this new region.

  3. Start the OmniPortlet Wizard by clicking the Edit Default link.

  4. On the Type tab of the OmniPortlet Wizard, select the Web Page radio button, then click Next.

  5. On the Source tab, click Select Web Page.

  6. On the Web Clipping Studio page that displays, in the URL Location field (Figure 4-13), enter the URL of the page you want to clip:

    http://www.wunderground.com

    Note:

    You can use a different Web page, but keep in mind that your results will not match the example in this chapter.

    Figure 4-13 URL Location Field

    Description of Figure 4-13 follows
    Description of "Figure 4-13 URL Location Field"

    Note:

    In this example, we use a third party Web site owned by The Weather Underground, Inc. Because this Web site is continually updated based on current weather forecasts, the images and steps included in this section may not reflect exactly what you see when you create this example. As you go further into this example, some of the steps may not work, as the owners may change the technology of this third party Web site.

  7. Click Start to display the Web Clipping Studio. You should see the Web page display in the Web Clipping Studio, as shown in Figure 4-14.

    Figure 4-14 Web Clipping Studio Containing the www.wunderground.com Home Page

    Description of Figure 4-14 follows
    Description of "Figure 4-14 Web Clipping Studio Containing the www.wunderground.com Home Page"

  8. On the home page, enter a zip code (for example, 94065) in the Weather field, as shown in Figure 4-15, then click the magnifying glass icon next to the field.

    Figure 4-15 Entering the Zip Code 94065 into the Weather Field

    Shows search for information using Web Clipping.
    Description of "Figure 4-15 Entering the Zip Code 94065 into the Weather Field"

  9. The weather information for Redwood City, California displays in the Web Clipping Studio. A segment of the page is shown in Figure 4-16.

    Figure 4-16 Weather Information for Redwood City, California

    Shows sectioning target Web page.
    Description of "Figure 4-16 Weather Information for Redwood City, California"

  10. In the top right corner of the Web Clipping Studio, click the Section button, as shown in Figure 4-17.

    Figure 4-17 The Section Button

    Shows how to choose the search results.
    Description of "Figure 4-17 The Section Button"

  11. After you click the Section button, you'll notice that the elements of the Web page are broken down, and that a new icon displays called Choose at the top of each section. Figure 4-18 shows a snapshot of the Web Clipping Studio.

    Figure 4-18 Web Clipping Studio Displaying the Web Page Sections

    Description of Figure 4-18 follows
    Description of "Figure 4-18 Web Clipping Studio Displaying the Web Page Sections"

  12. Find the section shown in Figure 4-19, which shows the weather information for the city you chose (in this example, San Francisco Bay Shoreline).

    Figure 4-19 Weather Information for San Francisco Bay Shoreline with the Choose Icon

    Description of Figure 4-19 follows
    Description of "Figure 4-19 Weather Information for San Francisco Bay Shoreline with the Choose Icon"

  13. Click the Choose icon for this section, located directly above the "Forecast for San Francisco Bay Shoreline" title bar, as shown in Figure 4-19. The section displays in the Web Clipping Studio, as shown in Figure 4-20.

    Figure 4-20 Weather Information Section for San Mateo County in the Web Clipping Studio

    Description of Figure 4-20 follows
    Description of "Figure 4-20 Weather Information Section for San Mateo County in the Web Clipping Studio"

  14. After you have chosen the clipping, you can refine your data further by scraping the data, that is, selecting specific cells you wish to display in your portlet. Click the Scrape button (Figure 4-21).

    Figure 4-21 The Scrape Button

    Shows scraping data in Web Clipping Studio.
    Description of "Figure 4-21 The Scrape Button"

  15. While in Scraping mode, you can identify the text pieces in the Web clipping by selecting the check boxes next to each item. You can repeat these items at the column level, row level, or table level.

    In this example, we want to show the title and the description of each resulting article from our search. We can repeat the title and description at the row level, so that each result returned by the search displays only the title and the description of every result. In general, you choose the text items in the first row that contains all the pieces you wish to repeat for each row.

    After you click the Scrape button, you'll notice that check boxes display next to each item on the Web page, as shown in Figure 4-22.

    Figure 4-22 Scraping Check Boxes

    Description of Figure 4-22 follows
    Description of "Figure 4-22 Scraping Check Boxes"

  16. Select the output you want by selecting the check boxes next to the items.Figure 4-23 shows an example of a check box.

    Figure 4-23 Check Box for San Mateo County Title

    Shows selecting title.
    Description of "Figure 4-23 Check Box for San Mateo County Title"

    Note:

    Depending on the color of the section you want to select, the check boxes may not be prominently displayed.

  17. After you select the check box for "Forecast for San Mateo County," notice that a corresponding label displays in the Data section of the Web Clipping Studio at the bottom of the screen, as shown in Figure 4-24.

    Figure 4-24 San Mateo County Label in Data Section

    Description of Figure 4-24 follows
    Description of "Figure 4-24 San Mateo County Label in Data Section"

  18. In the Name field, enter a more meaningful name, such as "SanMateoCountyForecast." Do not include spaces in the name.

  19. Select the fields you wish to display and add the corresponding labels as you select them. The following is a list of sample information we chose for this example, but you can choose your own examples depending on the current weather. You can see the following selected weather information in Figure 4-25:

    • Forecast for San Mateo County title

    • Today

    • Today's Weather

    • Thursday

    • Thursday's Weather

    Figure 4-25 Selected Weather Information

    Description of Figure 4-25 follows
    Description of "Figure 4-25 Selected Weather Information"

    Note:

    With the Web page data source, you can select URLs as part of your Web clipping. In Oracle Portal 10.1.2 and later, the context of the application is maintained. So, for example, any images that display on the hyperlinked page will be maintained.

  20. Now that you've selected the data you want to display, click the Continue button, as shown in Figure 4-26.

    Figure 4-26 The Continue Button

    Shows Continue icon in Web Clipping Studio.
    Description of "Figure 4-26 The Continue Button"

  21. On the page that displays, verify that the information in the Clipping Attributes section includes the title: "Weather Underground: Redwood City, California Forecast," as shown in Figure 4-27.

    Figure 4-27 Clipping Attributes Section of the Web Clipping Studio

    Description of Figure 4-27 follows
    Description of "Figure 4-27 Clipping Attributes Section of the Web Clipping Studio"

  22. Verify that the information in the Clipping Parameters section includes the parameters as shown in Figure 4-28.

    Figure 4-28 Clipping Parameters Section of the Web Clipping Studio

    Description of Figure 4-28 follows
    Description of "Figure 4-28 Clipping Parameters Section of the Web Clipping Studio"

  23. Select the Clipping Parameter? check box for the second parameter with the name "query."

  24. Click OK.

  25. On the Source tab of the OmniPortlet Wizard, the new title and description now display. To edit the Web clipping in the Web Clipping Studio, you can click the Select Web Page button again, as shown in Figure 4-29.

    Figure 4-29 Web Page Source Tab

    Description of Figure 4-29 follows
    Description of "Figure 4-29 Web Page Source Tab"

  26. Under the Clipping Parameters heading, you should see the clipping parameter you set on the previous page, as shown in Figure 4-30:

    Figure 4-30 Clipping Parameter to Portlet Parameter Mapping

    Description of Figure 4-30 follows
    Description of "Figure 4-30 Clipping Parameter to Portlet Parameter Mapping"

  27. Under the Portlet Parameters heading, next to Param1, set the Default Value to the zip code, 94065, as shown in Figure 4-31.

    Figure 4-31 Portlet Parameters Section

    Description of Figure 4-31 follows
    Description of "Figure 4-31 Portlet Parameters Section"

  28. Click Next.

  29. On the Filter tab, click Next.

  30. On the View tab, in the Title field, enter Weather Information.

  31. In the Footer Text field, enter Source: Weather Underground and make sure the Show Footer Text check box is selected.

  32. Under Layout Style, select the News radio button. The View tab should look like Figure 4-32.

    Figure 4-32 View Tab with the Options Selected

    Description of Figure 4-32 follows
    Description of "Figure 4-32 View Tab with the Options Selected"

  33. Click Next.

  34. Verify that the Layout tab looks like Figure 4-33.

  35. Click Finish.

  36. Your new Web Page portlet displays on the portal page, and should look like Figure 4-34.

    Figure 4-34 Weather Information Portlet on the Portal Page

    Description of Figure 4-34 follows
    Description of "Figure 4-34 Weather Information Portlet on the Portal Page"

Now that you have completed building all four example OmniPortlets, your page should look like Figure 4-35.

Figure 4-35 Portal Page Displaying the Four Example OmniPortlets

Description of Figure 4-35 follows
Description of "Figure 4-35 Portal Page Displaying the Four Example OmniPortlets"

4.6 Setting Up Portlet Parameters and Events

The steps in this section show you how to set up the portlets and page you created to use parameters. Then, when a user clicks a slice of the pie chart (generating a portlet event) that corresponds to a region (for example, New York), the Weather Forecast per Zip Code portlet (based on a Web Service) and the Weather Information portlet (based on a Web page) will display the corresponding weather information for that region (New York).

To set up portlet parameters and events, you will need to do the following:

4.6.1 Configure Portlets to Accept Parameters

The steps in this section will show you how to configure the two portlets on your page that accept parameters (the Web Service portlet that displays Weather Forecast per Zip Code information and the Web page portlet that displays Weather Information).

To configure the two portlets to accept parameters, perform the following steps:

  1. In Edit mode of the page, click the Edit Defaults icon in the top left corner of the Web Services portlet, as shown in Figure 4-36.

    Figure 4-36 Edit Defaults Icon in the Web Services Portlet

    Description of Figure 4-36 follows
    Description of "Figure 4-36 Edit Defaults Icon in the Web Services Portlet"

  2. On the Source tab, replace the value of param0 (94065) with ##Param1##, as shown in Figure 4-37.

    Figure 4-37 param0 Set to ##Param1##

    Description of Figure 4-37 follows
    Description of "Figure 4-37 param0 Set to ##Param1##"

  3. Under Portlet Parameters, set the default value of Param1 to 94065.

  4. In the Personalize Page Label field, enter Zip.

  5. In the Personalize Page Description field, enter Enter zip code, as shown in Figure 4-38.

    Figure 4-38 Portlet Parameters Section of the Web Services Source Tab

    Description of Figure 4-38 follows
    Description of "Figure 4-38 Portlet Parameters Section of the Web Services Source Tab"

  6. Click OK.

  7. On the portal page, in Edit mode, click the Edit Defaults icon for the Web page portlet, as shown in Figure 4-39.

    Figure 4-39 Edit Defaults Icon for the Web Page Portlet

    Description of Figure 4-39 follows
    Description of "Figure 4-39 Edit Defaults Icon for the Web Page Portlet"

  8. On the Source tab, since you have already mapped a portlet parameter to the clipping parameter, you can simply add a label and description to the portlet parameter Param1, as shown in Figure 4-40.

    Figure 4-40 Portlet Parameters Section of the Web Page Source Tab

    Description of Figure 4-40 follows
    Description of "Figure 4-40 Portlet Parameters Section of the Web Page Source Tab"

  9. Click OK.

You have created two portlet parameters in the Web Services and Web page portlets to accept page parameters. Next, you will map a page parameter to these two portlet parameters.

4.6.2 Map the Page Parameter to the Portlet Parameters

The steps in this section will show you how to map the page parameters to the two portlets you configured in the previous section.

To map the page parameter to the portlet parameters, perform the following steps:

  1. On the page, in Edit mode, click the Page: Properties link at the top of the screen, as shown in Figure 4-41.

    Figure 4-41 Page: Properties Link

    Description of Figure 4-41 follows
    Description of "Figure 4-41 Page: Properties Link"

  2. Click the Parameters tab.

  3. Under New Page Parameter, in the Parameter Name field, enter zip, then click Add, as shown in Figure 4-42.

    Figure 4-42 New Page Parameter

    Description of Figure 4-42 follows
    Description of "Figure 4-42 New Page Parameter"

  4. Under Page Parameter Properties, the new page parameter displays. In the Default Value field, enter 94065, as shown in Figure 4-43.

    Figure 4-43 Default Value for the "zip" Page Parameter

    Description of Figure 4-43 follows
    Description of "Figure 4-43 Default Value for the "zip" Page Parameter"

  5. Under Portlet Parameter Values, you will see a list of portlets listed. If you have followed all the steps in this chapter, you will see four instances of OmniPortlet listed. The Web Services portlet is the first in the list, and the Web Page data source is the fourth (or the bottom) instance of OmniPortlet in the list.

  6. Click the arrow next to the first instance of OmniPortlet to expand the Portlet Parameters list, as shown in Figure 4-44.

    Figure 4-44 Portlet Parameter Values Section

    Description of Figure 4-44 follows
    Description of "Figure 4-44 Portlet Parameter Values Section"

  7. Next to Param1, from the list, choose Page Parameter.

  8. From the list that displays, ensure that zip is selected.

  9. For the fourth OmniPortlet in the list, follow the same steps to set Param1 to the Page Parameter of zip, as shown in Figure 4-45.

  10. Figure 4-45 Portlet Parameters Section of the Page Parameters Tab

    Description of Figure 4-45 follows
    Description of "Figure 4-45 Portlet Parameters Section of the Page Parameters Tab"

The page parameter zip is now mapped to the portlet parameters for the Web Services and Web page portlets. Next, you will set up the chart portlet so that when a slice of the pie chart is clicked, the selected zip code will be sent to the page.

4.6.3 Configure the Chart Portlet to Use Events

The steps in this section will show you how to configure the chart portlet to use events. That is, based on an event in the portlet (such as clicking a slice in a pie chart), an event will occur. In this case, you will configure the portlet so that when a slice is clicked by an end user, the zip code associated with that slice will be sent to the page. Then, the data in the two portlets you configured in Section 4.6.1, "Configure Portlets to Accept Parameters" will refresh depending on the selected zip code.

To configure the chart portlet, perform the following steps:

  1. In the Edit mode of the page, click the Edit Defaults icon for the chart portlet, as shown in Figure 4-46.

    Figure 4-46 Edit Defaults Icon for the Chart Portlet

    Description of Figure 4-46 follows
    Description of "Figure 4-46 Edit Defaults Icon for the Chart Portlet"

  2. Click the Layout tab.

  3. Under Chart Drilldown, choose Event1 from the Action list.

  4. Notice that in Edit Defaults mode, a new tab displays in the wizard called Events. Click the Events tab.

  5. On this tab, you will configure Event1 (which you set on the Layout tab) to pass the zip code from the chart to the page as the event output.

    Set Event1Param1 to zipcode, as shown in Figure 4-47, then click OK.

  6. Figure 4-47 Events Tab for the Chart Portlet

    Description of Figure 4-47 follows
    Description of "Figure 4-47 Events Tab for the Chart Portlet"

You have configured the chart portlet so that a user can click a slice of the pie chart, and set up an event so that the zip code selected in the pie chart will be sent to the page. Next, you will set up the page to accept this event parameter.

4.6.4 Map the Chart Event to the Page

The steps in this section will show you how to map the chart event you created in the previous section to the page, so that when a user clicks on a slice of the pie chart, the zip code selected in the pie chart will be accepted by the page as the page input. The page will then display the data that corresponds to the selected zip code in the Web Service and Web page portlets.

To map the chart event to the page, perform the following steps:

  1. On the page, in Edit mode, click the Page: Properties link, then click the Events tab.

  2. Expand the second OmniPortlet in the list to display the events below it, and select Event1, as shown in Figure 4-48.

    Figure 4-48 Portlet Events Section of the Page Events Tab

    Description of Figure 4-48 follows
    Description of "Figure 4-48 Portlet Events Section of the Page Events Tab"

  3. Select the Go to page radio button, then, next to the field, click the Browse Pages icon to search for the name of your page (in this case, OmniPortlet Examples). Next to your page name, click Return Object.

    Note:

    If you do not know the name of the page, you can return to the Edit mode of the page by clicking Cancel. Then, click the Page Group: Properties link to view the display name of the page group. When you return to the Events tab of the Page Properties, you can click the Browse Pages icon to search for the page group, under which you should see the page name.

  4. Set the Page Input as shown in Figure 4-49.

    Figure 4-49 Page Input on the Events Tab

    Description of Figure 4-49 follows
    Description of "Figure 4-49 Page Input on the Events Tab"

  5. Click OK.

  6. Now, when you drag your mouse over the pie chart in the Chart portlet, you should notice that you can click one of the sections. Try clicking on the largest slice (New York). You will notice that the page refreshes.

    In the URL of the page, you should see a parameter value set after the page name, for example: OmniPortlet%20Examples?zip=10001. The Weather Forecast information changes, and looks something like Figure 4-50.

    Figure 4-50 Weather Forecast (Web Service) Portlet for New York

    Description of Figure 4-50 follows
    Description of "Figure 4-50 Weather Forecast (Web Service) Portlet for New York"

    The Weather Information portlet changes, and looks something like Figure 4-51.

    Figure 4-51 Weather Information (Web Page) Portlet for New York

    Description of Figure 4-51 follows
    Description of "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

Description of Figure 4-52 follows
Description of "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.

  5. Figure 4-53 Initial View of an OmniPortlet Using the HTML Layout

    Description of Figure 4-53 follows
    Description of "Figure 4-53 Initial View of an OmniPortlet Using the HTML Layout"

  6. You'll 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.

  7. Click the Layout tab.

  8. In the Repeating Section, look for the row with the code: <TD>##img##</TD>.

  9. Replace this code with: <TD><img src="##img##"></TD>.

  10. You can also change the column headers in the Non-Repeating Heading Section. For example, replace:

    <TH CLASS='PortletHeading1'>img</TH>"

    with

    <TH CLASS='PortletHeading1'>Weather Graphic</TH>

  11. In the Non-Repeating Heading section, delete the line:

    <TH CLASS='PortletHeading1'>Zip Code</TH>

  12. In the Repeating Section, delete the line:

    <TD>##zipCode##</TD>

  13. 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

    Description of Figure 4-54 follows
    Description of "Figure 4-54 Final View of an OmniPortlet Using the HTML Layout"