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

Transcription

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

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 Associated Function for Item display Adding and editing items in page view mode Adding an Item To a Region Editing Items in Page View Mode User Interface Templates What Are UI Templates Using UI Templates Using Substitution Tags Using Images in UI Templates Using Styles with UI Templates Using Portal Page Styles Using Custom Style Sheets Conclusion How To Design and Build Compelling Portal Interfaces Page 2

3 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 How To Design and Build Compelling Portal Interfaces Page 3

4 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. Adjust region properties to change relative spacing 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 subpage 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, How To Design and Build Compelling Portal Interfaces Page 4

5 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. Example of page with different types of regions. 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. How To Design and Build Compelling Portal Interfaces Page 5

6 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. How To Design and Build Compelling Portal Interfaces Page 6

7 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. Example of Navigation Page Published as a Portlet 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 Items How To Design and Build Compelling Portal Interfaces Page 7

8 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. How To Design and Build Compelling Portal Interfaces Page 8

9 Example Template 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 How To Design and Build Compelling Portal Interfaces Page 9

10 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. Example of Rich Text Editor 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? How To Design and Build Compelling Portal Interfaces Page 10

11 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: How To Design and Build Compelling Portal Interfaces Page 11

12 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. How To Design and Build Compelling Portal Interfaces Page 12

13 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="bordercollapse: collapse" bordercolor="#111111" width="227" background=" <tr> <td width="227" colspan="2"> <img border="0" src=" </tr> <tr> <td width="118"><br> <p style="margin-top: 0; margin-bottom: 0"><b> <font color="#658beb" face="arial" size="2">' p_displayname '</font></b></p> <p style="margin-top: 0; margin-bottom: 0"><font face="arial" size="2">' p_desc '</font></p><br> <p align="center" style="margin-top: 0; margin-bottom: 0"> <a href=" v_name '" target="_blank"> <img border="0" src=" <td width="109" align="center"> <img border="0" src=" p_image_url '" width="88" height="62"></td> </tr> <tr> <td width="118"> </td> How To Design and Build Compelling Portal Interfaces Page 13

14 <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. How To Design and Build Compelling Portal Interfaces Page 14

15 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: How To Design and Build Compelling Portal Interfaces Page 15

16 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: 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. How To Design and Build Compelling Portal Interfaces Page 16

17 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 freeform 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 How To Design and Build Compelling Portal Interfaces Page 17

18 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 Links (no dialog) Home Page / Hyperlink Home Page / URL Home Page / Image Home Page / Label Navigator / Hyperlink Navigator / URL Navigator / Image 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. Inserts the #PORTAL.HOME# placeholder. Oracle Portal places the image, text, and hyperlinks to the Oracle Portal home page. Inserts the #PORTAL.HOME.URL# placeholder. Oracle Portal displays the URL for the Oracle Portal home page. Inserts the #PORTAL.HOME.IMAGE# placeholder. Oracle Portal displays the image for the Oracle Portal home page link. Inserts the #PORTAL.HOME.LABEL# placeholder. Oracle Portal displays the text label for the Oracle Portal home page. Inserts the #PORTAL.NAVIGATOR# placeholder. Oracle Portal displays the image, text, and hyperlinks to the navigator page. Inserts the #PORTAL.NAVIGATOR.URL# placeholder. Oracle Portal displays the URL for the navigator page. Inserts the #PORTAL.NAVIGATOR.IMAGE# placeholder. Oracle Portal displays the image for the navigator page. How To Design and Build Compelling Portal Interfaces Page 18

19 Navigator / Label Help / Hyperlink Help / URL Help / Image Help / Label Logout / Hyperlink Logout / URL Logout / Label Account Info / Hyperlink Inserts the #PORTAL.NAVIGATOR.LABEL# placeholder. Oracle Portal displays the text label for the navigator page. Inserts the #PORTAL.HELP# placeholder. Oracle Portal displays the image, text, and hyperlinks to the Oracle Portal online help. Inserts the #PORTAL.HELP.URL# placeholder. Oracle Portal displays the URL for the Oracle Portal online help. Inserts the #PORTAL.HELP.IMAGE# placeholder. Oracle Portal displays the image for the Oracle Portal online help. Inserts the #PORTAL.HELP.LABEL# placeholder. Oracle Portal displays the text label for the Oracle Portal online help. Inserts the #PORTAL.LOGOUT# placeholder. Oracle Portal displays the text and hyperlink to log out of Oracle Portal Inserts the #PORTAL.LOGOUT.URL# placeholder. Oracle Portal displays the logout URL. Inserts the #PORTAL.LOGOUT.LABEL# placeholder. Oracle Portal displays the text label for logging out. 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. How To Design and Build Compelling Portal Interfaces Page 19

20 Page Links Community / Hyperlink Community / URL Inserts the #PORTAL.COMMUNITY# placeholder. Oracle Portal displays the image, text, and hyperlinks to the Portal Community Web site. 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. Customize / Hyperlink Customize / URL Customize / Label Edit Page / Hyperlink Edit Page / URL Edit Page / Label Refresh Page / Hyperlink Inserts the #PAGE.CUSTOMIZEPAGE# placeholder. Oracle Portal displays the text and hyperlink to the Customize Page dialog box. Inserts the #PAGE.CUSTOMIZEPAGE.URL# placeholder. Oracle Portal displays the URL for the Customize Page dialog box. Inserts the #PAGE.CUSTOMIZEPAGE.LABEL# placeholder. Oracle Portal displays the text label for the Customize Page link. Inserts the #PAGE.EDITPAGE# placeholder.oracle Portal displays the text and hyperlink for page editing. Inserts the #PAGE.EDITPAGE.URL# placeholder. Oracle Portal displays the text label for page editing. Inserts the #PAGE.EDITPAGE.LABEL# placedholder. Oracle Portal displays the text label to allow page editing. Inserts the #PAGE.REFRESH# placeholder. Oracle Portal displays the text and hyperlink for refreshing the page. How To Design and Build Compelling Portal Interfaces Page 20

21 Subpage Links Help User Version Page Style Refresh Page / URL Refresh Page / Label (no dialog box) Login Name Full Name Page Style Tag Inserts the #PAGE.REFRESH.URL# placeholder. Oracle Portal displays the URL for refreshing the page. Inserts the #PAGE.REFRESH.LABEL# placeholder. Oracle Portal displays the text label for refreshing the page. Inserts the #PAGE.SUBPAGELINKS# placeholder. Oracle Portal displays the text and URLs for subpages. <<<COMMENT: For creating subpages???>>> Inserts the #HELPSCRIPT# and #HELPLINK# placeholders. Oracle Portal generates the Javascript function used to open a window to display the Oracle Portal online help Inserts the #USER# placeholder. Oracle Portal displays the login name of the user who is currently logged on. 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. Inserts the #VERSION# placeholder. Oracle Portal displays the version of current installation of Oracle Portal. 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. How To Design and Build Compelling Portal Interfaces Page 21

22 Page Base Background Color Background Image Image Page Style URL Page Base Tag Page Base URL (no dialog) (no dialog) (no dialog) 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. 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. 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. 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# >. 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# >. 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 >. How To Design and Build Compelling Portal Interfaces Page 22

23 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. How To Design and Build Compelling Portal Interfaces Page 23

24 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 Bodyid1siteid0 RegionHeaderid1siteid0 RegionHeaderTextid1siteid0 RegionNoBorder RegionBorder RegionHeaderColor PageColor LeftCurve RightCurve Description Determines the color or image used for the background of the page or region. Determines the color, height, and alignment of text in the banners that appear above each region in a page. size, font style, and font decoration of regular text in the banners that appear above region in a page. Determines what to display when no border is selected (usually set to nothing). Determines the color, width, and style of the table border used to display a region. Determines the color, background color, width, and style of the table and border used to display a region header. Determines the color of the page s background. Determines the image and image position of the left side of a region header. Determines the image and image position of the right side of a region header. Tab Styles Style Element LeftSubTabid1siteid0, LeftTabForeSlantid1siteid0, RightSubTabid1siteid0, RightTabForeCurveid1siteid0, Description Determines the color and images to use for the active main or sub tab (that is, the currently displayed tab). How To Design and Build Compelling Portal Interfaces Page 24

25 TabForegroundColorid1siteid0 TabForegroundTextid1siteid0 LeftTabBgSlantid1siteid0, RightTabBgCurveid1siteid0, SubTabBgTextid1siteid0, TabBackgroundColorid1siteid0 TabBackgroundTextid1siteid0 size, font style, and font decoration of the text on the active tab (that is, the currently displayed tab). Determines the color and images to use for inactive main or sub tabs. size, font style, and font decoration of the text on inactive tabs. Item Styles Style Element GroupHeaderid1siteid0 GroupHeaderTextid1siteid0 GroupHeaderLinkid1siteid0 defaultattribute subpagetitleid1siteid0 itemfunctionid1siteid0 authorid1siteid0 Description Determines the color, height, and alignment of text in the banners that appear above each group of items in a page. of regular text in the banners that appear above each group of items in a page. of links in the banners that appear above each group of items in a page. of any attribute that is not explicitly listed. of the sub page title. of the associated functions attribute. How To Design and Build Compelling Portal Interfaces Page 25

26 of the author attribute. wwsbr_itemtype_id1siteid0 wwsbr_category_id1siteid0 wwsbr_updatedate_id1siteid0 wwsbr_expirationperiod_id1siteid0 wwsbr_updator_id1siteid0 wwsbr_page_id1siteid0 wwsbr_pagegroup_id1siteid0 wwsbr_portletname_id1siteid0 wwsbr_publishdate_id1siteid0 createdateid1siteid0 creatorid1siteid0 descriptionid1siteid0 of the base item type attribute. of the category attribute. of the date-updated attribute. of the expiration period attribute. of the last updated by attribute. of the page attribute. of the page group attribute. of the portlet name attribute. of the publish date attribute. of the create date attribute. of the creator attribute. of the description attribute. How To Design and Build Compelling Portal Interfaces Page 26

27 titleid1siteid0 titleorimageid1siteid0 documentsizeid1siteid0 expiredateid1siteid0 help_urlid1siteid0 inplacedisplayid1siteid0 keywordsid1siteid0 perspectivesid1siteid0 portletidid1siteid0 provideridid1siteid0 Providernameid1siteid0 scoreid1siteid0 of the display name attribute. of the display name and image link attribute. of the document size attribute. of the expire date attribute. of the help URL attribute. of the item content attribute. of the keywords attribute. of the perspectives attribute. of the portlet ID attribute. of the provider ID attribute. of the provider name attribute. of the score attribute. How To Design and Build Compelling Portal Interfaces Page 27

28 Portlets Style Element PortletHeaderColor PortletHeaderText PortletHeaderLink PortletHeaderStyle PortletSubHeaderColor PortletSubHeaderText PortletSubHeaderLink PortletBodyColor PortletHeading1 PortletText1 PortletHeading2 PortletText2 PortletHeading3 PortletText3 Description Determines the color of portlet headers. size, font style, and font decoration of regular text in portlet headers. size, font style, and font decoration of links in portlet headers. Determines whether portlet headers have square or rounded edges. Determines the color of portlet subheaders. size, font style, and font decoration of regular text in portlet subheaders. size, font style, and font decoration of links in portlet subheaders. Determines the color of the main body of portlets. size, font style, and font decoration of text in portlets marked with the PortletHeading1 tag. size, font style, and font decoration of text in portlets marked with the PortletText1 tag. size, font style, and font decoration of text in portlets marked with the PortletHeading2 tag. size, font style, and font decoration of text in portlets marked with the PortletText2 tag. size, font style, and font decoration of text in portlets marked with the PortletHeading3 tag. size, font style, and font decoration of text in portlets marked with the PortletText3 tag. How To Design and Build Compelling Portal Interfaces Page 28

29 PortletHeading4 PortletText4 size, font style, and font decoration of text in portlets marked with the PortletHeading4 tag. size, font style, and font decoration of text in portlets marked with the PortletText4 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 Page 29

30 How to Design and Build Compelling Portal Interfaces November 2004 Author: Candace Fender Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA U.S.A. Worldwide Inquiries: Phone: Fax: 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.