In this lesson, as a developer at design time, you will customize the content on a specific page in the page hierarchy of your WebCenter Portal: Framework application, adding that page and its content to the hierarchy so you can set permissions for user access and editing, or modification of document content.
You will also drag and drop documents in HTML format from your UCM repository on to a consignable panel component in a new
.jspx page and render that page as a Content Presenter task flow. The Content Presenter task flow lets you add content to your portal application, in this case, using the Documents service to display that document content stored in your content repository. The Documents service provides a user-friendly interface to manage, display, and search documents at runtime.
In the last step, you will enable authenticated users to edit the content of those HTML pages in-context at runtime. A pop-up window will open an editing session for adding or modifying content stored in your UCM repository.
At the end of this lesson, the home page you created in the previous lesson will look like Figure 7-1 when in-context editing of HTML content is enabled on the Contact Us page at runtime.
This lesson contains the following steps:
Before you begin the steps in this lesson, ensure you have followed the steps up to this point in the Tutorial.
Building on the steps of the previous lesson (Chapter 6), we can now move ahead to customize specific pages in our WebCenter Portal application, thus setting page permissions and user access.
To accomplish this task, we first need to create a new
.jspx page, in this case,
contacts.jspx, and then add that page to the Page Hierarchy. By adding the page to the hierarchy, we can set page permissions, and in so doing, we can specify user access to those pages for security purposes.
To customize pages and set page permissions in our portal application:
In JDeveloper, navigate to the
pages folder in Application Navigator.
Right-click New, expand Web Tier, select JSF and select the JSF Page, which launches the Create JSF Page dialog, as shown in Figure 7-2.
contacts.jspx in the File Name field and ensure that the checkbox Create as XML Document (*.jspx) is checked.
contacts.jspx and open it in Source view (Figure 7-3).
Now in Application Navigator, select the
home.jspx file, which resides in the
pages folder, open it in Source view and select the code line, which specifies the
value attribute, shown in Figure 7-4. Note that this is needed so the page picks up the template changes that occur at runtime.
Now copy the code line highlighted in Figure 7-4, which displays the
value attribute that specifies the page template bindings, and paste this code line into the
contacts.jspx file where the value attribute is located, as shown in Figure 7-5.
home.jspx file, right-click the file, and choose the Go to Page Definition menu item, shown in Figure 7-6. This opens the
homePageDef.xml file in Source view, select and copy the code snippet specifying the
viewID attribute for the page template and the
id for the page template binding, as shown in Figure 7-7 and in Example 7-1.
contacts.jspx file, right-click the file, and choose the Go to Page Definition menu item, as shown in Figure 7-6, when you opened the
Now open the
contactsPageDef.xml file in Source view and paste the code snippet you copied from the previous step, replacing the code lines shown in Figure 7-8. These code lines specify the
id attributes for the contacts page definition file.
In Composer, navigate down the items in the list to the
Page Customizable component and drag and drop that component on to the
contacts.jspx file in the space between the code lines
<f:facet name="content"> and
</f:facet>, as shown in Figure 7-9.
Page Customizablecomponent denotes the customizable part of a page and appears in the Composer toolbar in Edit mode at runtime. Components enclosed within a
Page Customizablecomponent can be customized and edited.
Now expand the UCM connection in JDeveloper, as shown in Figure 7-10, and drag and drop the
contactus.html file on to the
When the pop-up menu appears, choose the Create menu item and navigate to the Documents - Content Presenter task flow sub menu item shown in Figure 7-11 to render the HTML content.
Tip:The Content Presenter task flow lets you conveniently add content to your portal application. You can select a single item of content, multiple content items, or query for content, and then select a template to render that content on a page in your application. In so doing, Content Presenter enables you to precisely customize the selection and presentation of your content in your WebCenter Portal application.
Note that the Content Presenter task flow is available only when the connected content repository is Oracle Content Server and your WebCenter administrator has completed the prerequisite configuration. For more information about managing content repositories and UCM, see Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter Portal
The Documents service enables you to display content from a content server or file system directly within your application. End users can then view and manage documents, as well as other types of content stored in content repositories.
The Edit Task Flow Binding dialog appears, as shown in Figure 7-12. Note that in the Input Parameters section, there is a UCM value for the
Return to the portal application and navigate to the
pagehierarchy folder. Now open the
pages.xml file, shown in Figure 7-13.
pages.xml Page Hierarchy pane opens, drag and drop the
contacts.jspx file into the Root node (Figure 7-14).
contacts in the Root node and in the Page Hierarchy pane, uncheck the Visible checkbox, which is shown as checked in Figure 7-14.
Now navigate to the
default-navigation-model.xml file in the navigations folder and open it in Design view, as shown in Figure 7-15.
Navigate to the
pages folder, select the
contacts.jspx file and drag it to the default-navigation-model node (Figure 7-16),
Choose the Page Link item and select the Add new node icon to add a link to the navigation model.
The navigation dialog opens, as shown in Figure 7-17, with
contacts entered in the Id field. In the URL Attributes pane, enter the Display Value as
Return to Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.
Now that we have customized our Contacts Page in our application, dragging and dropping the
contacts.html document from our UCM repository on to the
panelCustomizable component in
contacts.jspx and rendering it as a Content Presenter task flow, we can move on to the task of enabling in-context HTML editing capability to our documents.
In Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.
Once the application opens in a web browser with Contact Us as part of the navigation model, click the Contact Us link in the banner to the right of the Menu link. The Contact Us page displays the page on which you can enter document content, as shown in Figure 7-19.
Log in to the Home page as
contentadmin with the password you entered when installing the product (Figure 7-20).
Once you have successfully logged in, click the content of the page and press
CTRL + SHIFT + C on your keyboard. The Home page in the web browser appears at the center with a hash-marked outline and an edit icon below the navigation bar in the upper right corner, indicating that the outlined portion of the Home page can be edited for document content, as shown in Figure 7-21.
Tip:By entering the
CTRL + SHIFT + Ckeys, you will enable the content contributions mode, which allows you to edit in-context HTML content stored in the UCM content repository. You won't need to edit the page using Composer.
Note that editing or customizing pages requires using a different set of tools and procedures, which enable you to add taskflows and portlets, for example, or to otherwise modify the page itself, and not just the document content on the page at runtime.
Navigate in the outlined portion of the browser page to the edit icon and click the icon to enable editing, as shown in Figure 7-22.
An Edit window pops up at the center of the page where authenticated users can add content to the
home.html page and edit that content using a rich text editor, as shown in Figure 7-23. Note that the document content is stored in the UCM content repository for easy access and retrieval.
Users can then save their edits by clicking the Save button in the upper left corner of the window (Figure 7-24).
In this lesson, you have learned how to customize specific pages in the page hierarchy of your WebCenter Portal: Framework application and how to add those pages to the hierarchy so you can set permissions for user access. You have also learned how easy it is to enable runtime HTML editing of your document content stored in the UCM repository by adding new content to the page and making it editable at runtime.