How To Design and Build Compelling Portal Interfaces · How To Design and Build Compelling Portal Interfaces Page 4 when viewing an Oracle Portal page is either a portlet or an item

How To Design and Build Compelling Portal Interfaces An Oracle White Paper November 2004

How To Design and Build Compelling Portal Interfaces Page 2

How To Design and Build Compelling Portal Interfaces

Executive Overview.......................................................................................... 3 Introduction ....................................................................................................... 3 Publishing with Oracle Application Server Portal........................................ 3

Page Basics..................................................................................................... 4 Page Regions.................................................................................................. 4

Region Display Properties....................................................................... 4 Item Display Properties........................................................................... 4 Portlet Display Properties ....................................................................... 5 Sub-Page Properties ................................................................................. 5

Page Styles...................................................................................................... 6 Region Attributes and Style .................................................................... 6

Separating Content and Publishing: The Key to Page Groups.............. 6 Page Navigation ............................................................................................ 6 Navigation Pages........................................................................................... 7 Built-in Navigation Item Types .................................................................. 7 Subpages......................................................................................................... 8 Tabs................................................................................................................. 8 Page Templates ............................................................................................. 8 Publishing Static Content on the Page ...................................................... 9 Repurposing Content for Multiple Applications...................................... 9 Building Pages Using the Rich Text Editor ............................................ 10

Associated Function for Item display .......................................................... 10 Adding and editing items in page view mode ............................................. 15

Adding an Item To a Region..................................................................... 15 Editing Items in Page View Mode ........................................................... 16

User Interface Templates ............................................................................... 17 What Are UI Templates............................................................................. 17 Using UI Templates ................................................................................... 17 Using Substitution Tags ............................................................................. 18 Using Images in UI Templates ................................................................. 23 Using Styles with UI Templates................................................................ 23

Using Portal Page Styles ........................................................................ 23 Using Custom Style Sheets ................................................................... 24

Conclusion........................................................................................................ 29


How To Design and Build Compelling Portal Interfaces

EXECUTIVE OVERVIEW Oracle Portal enables you to build a visually compelling, fully featured enterprise portal using a browser-based, wizard-driven, declarative interface. Portal’s powerful environment emphasizes productivity through the use of this wizard-driven functionality. Simple wizards walk you through the process of creating, editing, and managing the portal building blocks, eliminating the need for complex coding. This wizard-driven interface is present at all levels in Oracle Portal. So, for example, while business users use a wizard-driven interface to define portal views and publish content, portal designers may also use a wizard-driven interface to integrate information and content from different data sources, such as a spreadsheet or a Web Service.

INTRODUCTION In this paper we will explore the capabilities and features built into Oracle Portal for designing a compelling portal interface and provide some tips and tricks for easily manipulating Portal default functionality to get the custom effect desired.

PUBLISHING WITH ORACLE APPLICATION SERVER PORTAL In this section we will examine the major features in Oracle Portal for building your portal page interface and supporting features for defining the layout, style, navigation, and templates, as well as features used by page designers and content contributors to publish content to the page.

The basic building block of an Oracle Portal is the page. Each page consists of one or more regions each of which contain either portlets or items. Everything you see


when viewing an Oracle Portal page is either a portlet or an item (with the exception of tabs and other “region” related decorative elements). A portlet is a reusable building block for easily publishing information and applications to your community. An item is a lower level building block used to display content, such as documents, URLs, text, and images, or to provide navigation. For the purposes of this paper, we subsequently refer to both items and portlets as content.

Page Basics Portal allows you to create different types of pages, depending on the content and the intended use of the page. The types of pages that Portal supports are Standard, URL, Mobile, PL/SQL, and Java Server Page (JSP). Sub pages can be created to implement a hierarchical taxonomy.

Page Regions Each page is divided into one or more regions. Each region has a set of properties that dictate what that region can contain and how content contained in the region is displayed. Adding and removing regions easily changes the layout of a page. Each region may contain items, portlets, or a list of sub pages. A user with appropriate privileges can change this property if the region does not yet contain any objects.

Below is an example of a way to divide a page into 4 regions.

Add Below Add Right Add Below

You can add regions to the left, right, above, and below and existing region. When a new page is created, one region is created on the page by default.

Region Display Properties

After finalizing the set of regions required for your page layout, the properties of the regions can be set to adjust the relative width of each region on the page and to determine what type of content the region should display; portlets, items, or sub-page links. For example, region properties include Display Name, Width, Height, and Number of Columns.

Item Display Properties

Item type regions have their own unique set of display properties available in addition to the region display properties. These properties control the order, grouping and spacing used for displaying items within the region. For example,

Adjust region properties to change relative spacing


region properties include Space Between Items, Space Around Items, Group By, Sort By and Sort Order.

Portlet Display Properties

Portlet type regions also have their own set of display properties available. These properties control the spacing between and around portlets as well as what kinds of links are displayed on the portlet headers displayed in the region. The links may or may not display depending on whether or not the link functionality is coded into the portlet.

Below is an example of what a page could look like after regions 1,2, and 4 are configured to hold portlets, region 3 is configured to hold items and the relative widths of regions 2, 3, and 4 have been adjusted by changing the regions’ properties.

It is always possible to continue to fine-tune the region layout and properties of your page even after items and portlets have been added.

Sub-Page Properties

Sub page regions also have their own set of display properties available. These properties control the level of subpages to be displayed, whether icons should show for the sub-pages and if so, what icon to use. There are also properties controlling if the sub-page description and rollover images should be displayed.

Example of page with different types of regions.


Page Styles You use styles to control the colors and fonts used for displaying content. Using a single style, you can control the look for items, portlets, and tabs. There is no need to create multiple styles to control the look of these different elements.

When editing a style, you must choose the ‘Style Element Type’ in order to see the associated properties for that type.

Region Attributes and Style

You can apply a predefined style to pages or regions; therefore, item regions can either inherit the style of the page or use its own style. This allows you to enforce a uniform style throughout the page or create regions with distinct styles. Everything from the background to the fonts can change from one item region to the next on the same page.

You can control the display of item and portlet attributes in a page region through the selections you make for attribute display and style. Attribute display controls the information that is displayed with the item or portlet (author, create date, description, and so forth) and is set at the region level, therefore, a different set of attributes may be chosen for display in each region. Note that only those attributes that have a value will be displayed. Additional controls for spaces, carriage returns, and blank lines allow the spacing and format of attributes to be fine-tuned.

Separating Content and Publishing: The Key to Page Groups You manage pages using page groups. Page groups hold related portal objects, such as pages, templates, styles, navigation pages and more. Page groups can be configured in a number of ways to support different types of applications. The most common configuration involves separate page groups that allow for the distinction of where content is managed and where content is published. By separating the management and publishing of your content, the content can be repurposed for multiple applications. The page group used to manage the content will contain the attribution to define the content. The page group used to publish the content will contain the default styles, templates and navigation pages.

Page Navigation When designing and building pages, you want to structure the pages in a manner that simplifies the user’s efforts to navigate to the content. You also want to implement functionality that allows users to navigate directly to specific content or areas of the portal. Oracle Portal provides a number of ways for you to implement navigation controls in your portal. Used in combination, these techniques enable you to build a portal that offers multiple, intuitive paths requiring a minimal amount of steps to content and areas of interest.


Navigation Pages Navigation pages are special pages that you can easily use as reusable banners or navigation bars on pages. Navigation pages provide a way for authorized users to create pages that are intended for use as navigation units. Each navigation page, if published as a portlet, is shown as a choice as the ‘Navigation Page For Banner’ when creating a page or template. Navigation pages do not show up in your regular page hierarchy. You can either select a navigation page as a banner during page creation or add it to a page as a portlet at any time. The example below shows a page banner built using a navigation page. The navigation page was then published as a portlet to the Velocity Home page.

Built-in Navigation Item Types Built-In Navigation Items provide you with a set of tools for adding page controls, navigation elements, and page management related links to a navigation page, template or standard page. You add navigation items to the page using the same Add Item wizard that you use to add content items, such as File items, Text items, and so forth.

In the example below, the navigation items from the navigation page on the Velocity Home page are highlighted. A combination of Portal Smart Links, Login/Logout Link, and Object Map Link are used.

Example of Navigation Page Published as a Portlet

Example of Navigation Items


Subpages By building a hierarchy of pages of sub-pages you physically organize your content across multiple pages. This is most useful when your content is sufficiently complex that it warrants its own:

• Security, for example, personal pages or pages owned by a specific organization within the company.

• Style, for example, if pages specific to a country have their own branding.

• Approval process, for example, if each organization has its own approval route.

Tabs You can further arrange the content on a page into tabs. On each tab you create one or more regions for content. The content is only displayed when the tab is active.

Use tabs if you want the content to be accessible on one page, but still need to logically divide the content. Tabs allow you to increase the amount of data your page can display by effectively doubling (or tripling, quadrupling, and so on) the amount of real estate available. Tabs also allow you to group tasks that are common to a subject area, organization, specific role, and so forth. To support such an implementation you can hide or secure tabs from users or groups of users.

Page Templates In many portal implementations, administrators find that page creation is most efficient if new pages are built on top of pre-defined templates. Templates perform this function by insuring that all pages use the template display, template-defined content/portlets, template layout, and region property settings. Note that a template is simply a page that is used as the basis for other pages.

The region properties that you set for each region on your template will be retained and enforced for each page based on that template. You cannot add additional regions to a page based on a template. Also, you cannot change the type, style, and attribute settings for a region in a page that is built on a template.

In each region you create on your template, you have the option to specify if pages based on that template can include their own content in that region. By checking the ‘Enable Pages To Include Content In This Region’ checkbox, users with appropriate privileges will be able to add content to the region in addition to any content already present in the template.

If a page is built based on the example template shown below, you can add additional content to the white regions, but no the black regions.


The black regions would only display the content originally added into those regions on the template. You cannot modify the region properties set on the template in the pages that are created based on the template. Note that the lines between regions will not be displayed when the page is displayed.

Using templates, you can restrict a page designer’s ability to specify a unique style or access control settings. Use the “Style Override Setting” option to dictate that every page that uses the template will use the style of the template. Use the “Access Override Setting” option to dictate that every page that uses the template will use the access settings of the template.

Publishing Static Content on the Page As part of the design of your portal, you publish content that rarely changes, such as corporate branding, copyright messages, and welcome messages. To publish this type of content directly to an item type region on the page, template or navigation page, you must decide what type of content you are publishing. Each item on a page is of a specific item type. Oracle Portal provides different types of default item types for your use:

• File: Uploads a file and stores it in the page group.

• URL: Adds a link to another Web page, Web site or document URL either internal or external to the page group.

• Text: Adds text (up to 32KB) to display in the page.

• Image: Uploads an image item.

Repurposing Content for Multiple Applications If you have separated the management of your content into its own page group, and want to publish this content through other page groups, you have a number of publishing options from which to choose.

Page Portlets: Any standard page can itself be published as a portlet. A user with appropriate privileges can make a page available via the Portlet Repository for use on other pages as a portlet. To a page designer, a page portlet appears in the Portlet

Example Template


Repository as any other portlet does. Collections of content can be published in this manner for reuse throughout the Portal.

Auto Query Custom Searches: A Custom Search portlet that uses the “Auto Query” feature automatically invokes a search and displays the results every time the page (on which the portlet resides) is rendered. You can place such a Custom Search portlet on the page designed to publish the content, and specify the page group in which the portlet will search for content. You can define any number of Custom Search portlets with the Auto Query feature so the same content can be published in multiple places.

Omniportlet: The OmniPortlet provides a wizard based interface for querying and formatting content stored in external repositories—users see consistent formatting and presentation, regardless of the originating content store or application. An OmniPortlet can be based on almost any kid of data source, such as a spreadsheet (CSV), XML, Web Services, database (JDBC), or even application data from an existing Web page. To retrieve personalized data, the page designer can define the parameters for each type of data source to filter the result of a query and the credential information used to access secured data.

Building Pages Using the Rich Text Editor Content contributors can build static pages within the portal by using the Text item type. In Internet Explorer, by default, when users add or edit a text item, the area of the page where they enter the text includes a WYSIWYG rich text editor. If you are unfamiliar with HTML, you can use this editor to enter formatted text and graphics. Alternatively, you can enter HTML tags to format the content. Because the content contributor is using a Text item type to create the page content, features like templates and navigation can still be enforced on the page.

ASSOCIATED FUNCTION FOR ITEM DISPLAY Out-of-the-box Portal allows you to display attributes like Display Name, Author or Create Date using Region Properties. But what if you want to display a different icon for each item type, or have a border around the item itself?

Example of Rich Text Editor


The solution is to create a custom item type with a procedure attached that implements the required functionality. Then, using settings in the Region Properties, you select the Associated Function display attribute to implement this procedure in your Item display. This option is available on the Attributes/Style tab when editing the region properties.

Using this technique, you can implement any display style for items that is not provided out-of-the-box.

For example, suppose we have a Custom Item Type called Product. When a new item of type Product is added, the following default Add Item wizard is shown:

When an item of type Product is rendered on a page, we want it shown in the following format:


Since Products are a File item type, when the end user clicks Learn More, the actual Product file will be opened. In this example, the file is PrinterDesc.HTML.

Let’s see what is needed in order to create this specialized display for the Product item type. First, we use an HTML editor to mock up how the item should display. HTML text is used to specify where certain item attributes should display, such as the Display Name and Description. Then a table is created, along with various images and background images, to help specialize the display.

The purpose of this exercise is to obtain the HTML needed in order to recreate the HTML with PL/SQL. To output the HTML for display, we use the HTP.P PL/SQL procedure. Just concatenate the HTML text and any dynamic information or parameter values together for output through HTP.P.


The procedure code used to create the specialized Product item display is shown below.

create or replace Procedure PRODUCT_DISPLAY (

p_displayname IN VARCHAR2,

p_desc IN VARCHAR2,

p_image_url IN VARCHAR2,

p_url IN VARCHAR2)

as

v_name varchar2(60);

begin

select name into v_name -- get item GUID

from portal.wwsbr_all_items

where id = p_url;

htp.p('<table border="0" cellpadding="0" cellspacing="0" style="border-

collapse: collapse" bordercolor="#111111" width="227"

background="http://websvr:7778/pls/portal/docs/1/2626.GIF">

<tr>

<td width="227" colspan="2">

<img border="0"

src="http://websrv:7778/pls/portal/docs/1/2628.GIF"></td>

</tr>

<tr>

<td width="118"> 



'

|| p_displayname ||

'

'

|| p_desc ||

' 



<a href="http://websvr:7778/pls/portal/url/ITEM/'

|| v_name ||

'" target="_blank">

<img border="0"

src="http://websvr:7778/pls/portal/docs/1/2630.GIF"></a></td>

<td width="109" align="center">

<img border="0" src=" http://websvr:7778/pls/portal/docs/1/'

|| p_image_url ||

'" width="88" height="62"></td>

</tr>

<tr>

<td width="118"> </td>


<td width="109" align="center"> </td>

</tr>

</table>');

exception

when others then

null;

end;/

Most item attributes are readily available to pass. Note that the item ID, item description, display name, and image have all been passed to the procedure as parameters.

Now that the PRODUCT_DISPLAY( ) procedure has been created, the procedure must be associated with the Product item type. Edit the custom item type Product and go to the Procedures tab. Use the Associated Function attribute to associate the procedure with the item typeBecause this HTML should be displayed for the item when the page is rendered, make sure you check the checkbox labeled “Display Procedure Results With Item”. If this checkbox is left unchecked, a link is displayed and the procedure will not execute until the link is clicked.


The last step is to ensure the region that contains items of the type Product has its region properties set on the Style/Attributes tab to display Associated Functions.

ADDING AND EDITING ITEMS IN PAGE VIEW MODE For many Portal endusers, taking a page into edit mode can be a daunting task. With a little trick, you can create your own add and edit links that appear while the page is in view mode. This trick requires little to no coding.

Adding an Item To a Region When a page is in edit mode, you simply click a region’s Add Item icon when you want to add an item. The Add Item wizard appears and, when you’ve completed the wizard, you are placed back on the page. The new item is in the correct region, and all invalidations needed for the page have been performed. How can you accomplish this same task with the page still in view mode? By modifying the Add Item wizard’s URL.

In the page shown below, an “Add Product” image, which is actually a hyperlink, has been added to the left side of the page. .

Figure 1

To add more Products to this page would require entering edit mode and clicking the Add Item icon for the appropriate region. Instead, you can copy the URL that would have been invoked had you clicked the icon, which looks something like this:


http://websvr:7778/pls/portal/PORTAL.wwv_additem.selectitemtype

?p_cornerid=1&p_siteid=494&p_regionid=25375&p_looplink=http%3A%

2F%2Fwebsvr%3A7778%2Fportal%2Fpage%3F_pageid%3D494%2C1%26_dad%3

Dportal%26_schema%3DPORTAL%26_mode%3D16&p_containerpageid=1

Although the URL is long, it does reveal what siteid (pagegroup) and what region the new item should go in. The other important part of the URL is the looplink, which tells where to return when the Add Item wizard Finish or Cancel button is pressed.

Portal knows whether to show a page in view or edit mode depending on whether the page URL is passed a parameter or not. Provided you have permissions, appending the URL parameter “_mode=16” to any Portal page URL places the page in edit mode. Looking at the above URL, notice that the looplink calls the page back in edit mode. By removing “%26_mode%3D16” from the looplink; the URL should now resemble the following:

http://websvr:7778/pls/portal/PORTAL.wwv_additem.selectitemtype

?p_cornerid=1&p_siteid=494&p_regionid=25375&p_looplink=http%3A%

2F%2Fwebsvr%3A7778%2Fportal%2Fpage%3F_pageid%3D494%2C1%26_dad%3

Dportal%26_schema%3DPORTAL&p_containerpageid=1

You can now create a URL item, or any item that calls this URL, on your page. Clicking the new URL item invokes the Add Item wizard, exactly the same as clicking the Add Item icon in edit mode. And, because the “_mode=16” parameter was removed from the looplink URL, the user will be returned to the page in view mode after clicking the wizard’s Finish button.

Editing Items in Page View Mode Using a similar technique as shown above for adding items to a page, we can figure out the URL used to edit an item. Editing items on a page in view mode is a little trickier than adding an item to a page in view mode. The reason being is that the URL to add items to a region is always the same while the URL to edit an item is unique for each item in the region.

If you investigate multiple URLs that get invoked when you click on the item edit icon for items in a specific region, you will find that the only difference in the URL is the identifier for which item to edit. In figure 1 above, all items in the “Items” region show a pencil icon next to them while the page is in View mode. This was done with an associated function for the item. The associated function shows an image and constructs the URL with the appropriate Item ID. The Items ID is passed to the PL/SQL procedure when the procedure is associated with the item type as shown in the “Associated Functions for Item Display” section of this whitepaper. As with the Add Item URL, the looplink section of the Edit Item URL must have the “_mode=16” parameter removed so the page is returned to View mode.

The code for the associated function is shown below.


A more generic Edit Item procedure can be created by querying the PORTAL.WWSBR_ALL_ITEMS view to determine the siteid, region value, item type, and any other information needed for the URL based on the ItemID.

USER INTERFACE TEMPLATES

What Are UI Templates Oracle Portal UI templates enable to Oracle Portal users to change the look and feel of their portal pages and change the way portal pages are displayed by default. You can use UI templates to affect the surroundings of the content on the page, for example, to add a standard banner, footer, or corporate logo. However, if you want to control the layout of the page, include common content, or provide

common security, you should use page templates. UI templates can include free-form HTML, embedded PL/SQL scripting, and some navigation item types through the use of substitution tags. UI templates cannot contain items or portlets, are not cached (unless the page definition and content is cached), and cannot be translated. You can apply a UI template to a page template.

Using UI Templates You use the UI template to establish where on the page Oracle Portal places the content, but not the actual page content itself. For example, you cannot use a UI template to place content onto different regions or tabs.

There are two types of UI templates, structured (created with a wizard) and unstructured (created using custom HTML). UI templates override the style settings of the page or page template to which they are applied, but you can configure a UI template to use the page style.

To allow page designers to apply UI templates to their portal pages, you must first configure the page group to use UI templates. To do so, select the Enable Pages


to Use UI Templates check box on the Configure tab, which is accessible from the Edit Page Group page.

Using Substitution Tags Although you can create an unstructured UI template as you would any other Web page, a UI template must indicate where Oracle Portal should place its content, called a Components section. You can indicate Components section in the HTML source of your template with a special marker (#BODY#), which Oracle Portal will then substitute with the page content. There can only be one of these tags in a template, and it must be located between the <body> and </body> HTML tags.

In the template, you can use the various substitution tags to add Oracle Portal controls to the template. The available substitution tags are:

Tool Dialog Choices Value set

Page

(no dialog) Inserts a #BODY# placeholder. Oracle Portal places the regions of the page here. You must have one and only one of these in the UI template.

Links

Home Page / Hyperlink

Inserts the #PORTAL.HOME# placeholder. Oracle Portal places the image, text, and hyperlinks to the Oracle Portal home page.

Home Page / URL Inserts the #PORTAL.HOME.URL# placeholder. Oracle Portal displays the URL for the Oracle Portal home page.

Home Page / Image Inserts the #PORTAL.HOME.IMAGE# placeholder. Oracle Portal displays the image for the Oracle Portal home page link.

Home Page / Label Inserts the #PORTAL.HOME.LABEL# placeholder. Oracle Portal displays the text label for the Oracle Portal home page.

Navigator / Hyperlink

Inserts the #PORTAL.NAVIGATOR# placeholder. Oracle Portal displays the image, text, and hyperlinks to the navigator page.

Navigator / URL Inserts the #PORTAL.NAVIGATOR.URL# placeholder. Oracle Portal displays the URL for the navigator page.

Navigator / Image Inserts the #PORTAL.NAVIGATOR.IMAGE# placeholder. Oracle Portal displays the image for the navigator page.


Navigator / Label Inserts the #PORTAL.NAVIGATOR.LABEL# placeholder. Oracle Portal displays the text label for the navigator page.

Help / Hyperlink Inserts the #PORTAL.HELP# placeholder. Oracle Portal displays the image, text, and hyperlinks to the Oracle Portal online help.

Help / URL Inserts the #PORTAL.HELP.URL# placeholder. Oracle Portal displays the URL for the Oracle Portal online help.

Help / Image Inserts the #PORTAL.HELP.IMAGE# placeholder. Oracle Portal displays the image for the Oracle Portal online help.

Help / Label Inserts the #PORTAL.HELP.LABEL# placeholder. Oracle Portal displays the text label for the Oracle Portal online help.

Logout / Hyperlink Inserts the #PORTAL.LOGOUT# placeholder. Oracle Portal displays the text and hyperlink to log out of Oracle Portal

Logout / URL Inserts the #PORTAL.LOGOUT.URL# placeholder. Oracle Portal displays the logout URL.

Logout / Label Inserts the #PORTAL.LOGOUT.LABEL# placeholder. Oracle Portal displays the text label for logging out.

Account Info / Hyperlink

Inserts the #PORTAL.ACCOUNTINFO# placeholder. Oracle Portal displays the text and hyperlink to the Account Information dialog box.

Account Info / URL Inserts the #PORTAL.ACCOUNTINFO.URL# placeholder. Oracle Portal displays the URL for the Account Information dialog box.

Account Info / Label

Inserts the #PORTAL.ACCOUNTINFO.LABEL# placeholder. Oracle Portal displays the text label for the Account Information dialog box.


Community / Hyperlink

Inserts the #PORTAL.COMMUNITY# placeholder. Oracle Portal displays the image, text, and hyperlinks to the Portal Community Web site.

Community / URL Inserts the #PORTAL.COMMUNITY.URL# placeholder Oracle Portal displays the URL for the Portal Community Web site.

Community / Image Inserts the #PORTAL.COMMUNITY.IMAGE# placeholder Oracle Portal displays the image for the Portal Community Web site.

Community / Label Inserts the #PORTAL.COMMUNITY.LABEL# placeholder. Oracle Portal displays the text label for the Portal Community Web site.

Page Links

Customize / Hyperlink

Inserts the #PAGE.CUSTOMIZEPAGE# placeholder. Oracle Portal displays the text and hyperlink to the Customize Page dialog box.

Customize / URL Inserts the #PAGE.CUSTOMIZEPAGE.URL# placeholder. Oracle Portal displays the URL for the Customize Page dialog box.

Customize / Label Inserts the #PAGE.CUSTOMIZEPAGE.LABEL# placeholder. Oracle Portal displays the text label for the Customize Page link.

Edit Page / Hyperlink

Inserts the #PAGE.EDITPAGE# placeholder.Oracle Portal displays the text and hyperlink for page editing.

Edit Page / URL Inserts the #PAGE.EDITPAGE.URL# placeholder. Oracle Portal displays the text label for page editing.

Edit Page / Label Inserts the #PAGE.EDITPAGE.LABEL# placedholder. Oracle Portal displays the text label to allow page editing.

Refresh Page / Hyperlink

Inserts the #PAGE.REFRESH# placeholder. Oracle Portal displays the text and hyperlink for refreshing the page.


Refresh Page / URL Inserts the #PAGE.REFRESH.URL# placeholder. Oracle Portal displays the URL for refreshing the page.

Refresh Page / Label

Inserts the #PAGE.REFRESH.LABEL# placeholder. Oracle Portal displays the text label for refreshing the page.

Subpage Links

(no dialog box) Inserts the #PAGE.SUBPAGELINKS# placeholder. Oracle Portal displays the text and URLs for subpages. <<<COMMENT: For creating subpages???>>>

Help

Inserts the #HELPSCRIPT# and #HELPLINK# placeholders. Oracle Portal generates the Javascript function used to open a window to display the Oracle Portal online help

User

Login Name Inserts the #USER# placeholder. Oracle Portal displays the login name of the user who is currently logged on.

Full Name Inserts the #USER.FULLNAME# placeholder. Oracle Portal displays the full name of the user who is currently logged on. The full name includes the user's first, middle, and last names.

Version

Inserts the #VERSION# placeholder. Oracle Portal displays the version of current installation of Oracle Portal.

Page Style

Page Style Tag Inserts the #PAGE.STYLE# placeholder. Oracle Portal generates and displays the LINK element that brings in the Portal page style to control how tabs, portlets, and items are displayed.

See the chapter in the Oracle Application Server Portal User’s Guide (Release 10g (9.0.4)) “Using Styles with UI Templates” for more information.

This tag must be between the <HEAD></HEAD> tags.


Page Style URL Inserts the #PAGE.STYLE.URL# placeholder. Oracle Portal generates and displays the URL to the page style. This is useful in certain circumstances, for example when JavaScript is used to decide the page style to render depending on the browser type.

Page Base

Page Base Tag Inserts the #PAGE.BASE# placeholder. Oracle Portal generates an HTML <base> element for the base URL of the document.

This tag must be between the <HEAD></HEAD> tags.

Page Base URL Inserts the #PAGE.BASE.URL# placeholder. Oracle Portal generates and displays the base page URL. This is useful under certain circumstances, for example, when JavaScript is used to control which base to use depending upon the group to which the user belongs.

Background Color

(no dialog) Inserts the #PAGE.BGCOLOR# placeholder. Oracle Portal generates the HTML color tag to match the page background color with the page style background colors.

This tag must be inside an attribute of the body tag, such as <BODY BGCOLOR=”#PAGE.BGCOLOR#” …>.

Background Image

(no dialog) Inserts the #PAGE.BGIMAGE# placeholder. Oracle Portal generates the URL to the page background image for the page style.

This tag must be inside an attribute of the body tag, such as <BODY BACKGROUND=#PAGE.BGIMAGE# …>.

Image

(no dialog) Inserts the #IMAGE_PREFIX# placeholder. Oracle Portal generates the URL fragment to the Portal images directory as specified in the plsql.conf configuration file

This tag must be inside an attribute of the img tag, such as <IMG src=#IMAGE_PREFIX#myfile.gif …>.


Using Images in UI Templates It is desirable to reference local images from your UI Template. Within the HTML code in your template you may have an image link like the following:

<img border="0" src="/my_images/abc.gif">

In order for the image to be found during execution, you must place the images on the Portal Mid-Tier. In the above example, the image abc.gif is located in a folder called my_images.

You must ensure the following folder structure exists:

• <OraMidTier>

• Apache

• Apache

• htdocs

• my_images

Using Styles with UI Templates In Oracle Portal, you can use a structured or unstructured UI template to customize the appearance of the surrounding page. The visual appearance of the regions in the page - the portlets, tabs, and items – is controlled by the use of styles. By using an Oracle Portal page style or by creating a custom style sheet, the visual appearance of the content of the page can be coordinated with the UI template.

Using Portal Page Styles

An Oracle Portal page style defines the colors and fonts used by the tabs, portlets, and items displayed in a region. By default, a region on a page will inherit the style of the page. If no page style is defined, then it will inherit the style defined in the page group. If no style is chosen for the page group, the region will inherit the default Portal system page style.

When you create a new UI template by default, a page that uses this template will not inherit style information from Oracle Portal. With no style information defined, the end user’s browser defaults will be used to display the tabs, portlets, and items on a page, and these default browser colors and fonts may not be complementary with the colors and fonts defined in the UI template.

One way to ensure that tabs, portlets, and items on a page are displayed correctly on every user’s browser is to use a Portal page style. Ensure a Portal style is used by inserting the substitution tag #page.style# into the page header of the UI template. At runtime, this tag will pull in the Portal page style information that is used to render the tabs, portlets, and items.


Using Custom Style Sheets

You can also control the appearance of tabs, portlets, and items on a portal page that uses an unstructured UI template by using conventional cascading style sheets. A cascading style sheet must contain all the styles that control the appearance of tabs, portlets, and items that are provided with Portal. The following table describes the elements in the style sheets:

Common Styles

Style Element Description

Bodyid1siteid0 Determines the color or image used for the background of the page or region.

RegionHeaderid1siteid0 Determines the color, height, and alignment of text in the banners that appear above each region in a page.

RegionHeaderTextid1siteid0 Determines the color, font face, font size, font style, and font decoration of regular text in the banners that appear above region in a page.

RegionNoBorder Determines what to display when no border is selected (usually set to nothing).

RegionBorder Determines the color, width, and style of the table border used to display a region.

RegionHeaderColor Determines the color, background color, width, and style of the table and border used to display a region header.

PageColor Determines the color of the page’s background.

LeftCurve Determines the image and image position of the left side of a region header.

RightCurve Determines the image and image position of the right side of a region header.

Tab Styles


LeftSubTabid1siteid0, LeftTabForeSlantid1siteid0, RightSubTabid1siteid0, RightTabForeCurveid1siteid0,

Determines the color and images to use for the active main or sub tab (that is, the currently displayed tab).


TabForegroundColorid1siteid0

TabForegroundTextid1siteid0 Determines the color, font face, font size, font style, and font decoration of the text on the active tab (that is, the currently displayed tab).

LeftTabBgSlantid1siteid0, RightTabBgCurveid1siteid0, SubTabBgTextid1siteid0, TabBackgroundColorid1siteid0

Determines the color and images to use for inactive main or sub tabs.

TabBackgroundTextid1siteid0 Determines the color, font face, font size, font style, and font decoration of the text on inactive tabs.

Item Styles


GroupHeaderid1siteid0 Determines the color, height, and alignment of text in the banners that appear above each group of items in a page.

GroupHeaderTextid1siteid0 Determines the color, font face, font size, font style, and font decoration of regular text in the banners that appear above each group of items in a page.

GroupHeaderLinkid1siteid0 Determines the color, font face, font size, font style, and font decoration of links in the banners that appear above each group of items in a page.

defaultattribute Determines the color, font face, font size, font style, and font decoration of any attribute that is not explicitly listed.

subpagetitleid1siteid0 Determines the color, font face, font size, font style, and font decoration of the sub page title.

itemfunctionid1siteid0 Determines the color, font face, font size, font style, and font decoration of the associated functions attribute.

authorid1siteid0 Determines the color, font face, font


size, font style, and font decoration of the author attribute.

wwsbr_itemtype_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the base item type attribute.

wwsbr_category_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the category attribute.

wwsbr_updatedate_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the date-updated attribute.

wwsbr_expirationperiod_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the expiration period attribute.

wwsbr_updator_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the last updated by attribute.

wwsbr_page_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the page attribute.

wwsbr_pagegroup_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the page group attribute.

wwsbr_portletname_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the portlet name attribute.

wwsbr_publishdate_id1siteid0 Determines the color, font face, font size, font style, and font decoration of the publish date attribute.

createdateid1siteid0 Determines the color, font face, font size, font style, and font decoration of the create date attribute.

creatorid1siteid0 Determines the color, font face, font size, font style, and font decoration of the creator attribute.

descriptionid1siteid0 Determines the color, font face, font size, font style, and font decoration of the description attribute.


titleid1siteid0 Determines the color, font face, font size, font style, and font decoration of the display name attribute.

titleorimageid1siteid0 Determines the color, font face, font size, font style, and font decoration of the display name and image link attribute.

documentsizeid1siteid0 Determines the color, font face, font size, font style, and font decoration of the document size attribute.

expiredateid1siteid0 Determines the color, font face, font size, font style, and font decoration of the expire date attribute.

help_urlid1siteid0 Determines the color, font face, font size, font style, and font decoration of the help URL attribute.

inplacedisplayid1siteid0 Determines the color, font face, font size, font style, and font decoration of the item content attribute.

keywordsid1siteid0 Determines the color, font face, font size, font style, and font decoration of the keywords attribute.

perspectivesid1siteid0 Determines the color, font face, font size, font style, and font decoration of the perspectives attribute.

portletidid1siteid0 Determines the color, font face, font size, font style, and font decoration of the portlet ID attribute.

provideridid1siteid0 Determines the color, font face, font size, font style, and font decoration of the provider ID attribute.

Providernameid1siteid0 Determines the color, font face, font size, font style, and font decoration of the provider name attribute.

scoreid1siteid0 Determines the color, font face, font size, font style, and font decoration of the score attribute.


Portlets


PortletHeaderColor Determines the color of portlet headers.

PortletHeaderText Determines the color, font face, font size, font style, and font decoration of regular text in portlet headers.

PortletHeaderLink Determines the color, font face, font size, font style, and font decoration of links in portlet headers.

PortletHeaderStyle Determines whether portlet headers have square or rounded edges.

PortletSubHeaderColor Determines the color of portlet subheaders.

PortletSubHeaderText Determines the color, font face, font size, font style, and font decoration of regular text in portlet subheaders.

PortletSubHeaderLink Determines the color, font face, font size, font style, and font decoration of links in portlet subheaders.

PortletBodyColor Determines the color of the main body of portlets.

PortletHeading1 Determines the color, font face, font size, font style, and font decoration of text in portlets marked with the PortletHeading1 tag.

PortletText1 Determines the color, font face, font size, font style, and font decoration of text in portlets marked with the PortletText1 tag.








To apply a cascading style sheet, you must edit all page groups and pages that use the UI template and set the Portal Style to Main Style. Doing so ensures that the style names reference the correct portal style ID.

You should not use a cascading style sheet and a Portal page style on the same page or page group, as the results can be unpredictable in some browsers. If you have inserted an Oracle Portal page style substitution tag as discussed in the previous section, you will need to remove it before using the custom style sheet.

CONCLUSION Oracle Portal is expanding the boundaries of what people think of as a portal and how content is published. Using Oracle Portal’s browser-based, wizard-driven, declarative interface, you can easily build a visually compelling, fully featured enterprise portal. It provides unparalleled breadth of functionality for portal administration, deployment, development, and web content management, and content integration all within an integrated user interface. Knowing a few tricks in addition to the Portal out-of-box functionality such as investigating the URL’s that Portal uses and how User Interface templates can be used to define custom HTML and custom Cascading Style Sheets, CSS, to be used in conjunction with Portal pages gives unparalleled productivity to Oracle Portal page designers.

How to Design and Build Compelling Portal Interfaces November 2004 Author: Candace Fender Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA 94065 U.S.A. Worldwide Inquiries: Phone: +1.650.506.7000 Fax: +1.650.506.7200 www.oracle.com Copyright © 2004, Oracle. 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 is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.

Documents

How To Design and Build Compelling Portal Interfaces · How To Design and Build Compelling Portal Interfaces Page 4 when viewing an Oracle Portal page is either a portlet or an item