Editing WebCenter Spaces’ Page Template in JDeveloper

Here’s a quick post on how one can leverage the new mechanism of “Extending Spaces” to edit Spaces’ resources (like Page Templates) in JDeveloper.

Step 1: Make a copy of “WebCenter Spaces Side Navigation” and Download it from Spaces

Step 2: Open the workspace (DesignWebCenterSpaces.zip available here) and import the Page Template archive (.ear)

Step 3: Make a few changes a) drag and modify the width of the side “panel” b) add a panel customizable so we can add taskflows from the resource catalog

Step 4: Save and right-click on template and select “Upload Portal Resource”

Step 5: See the changes show up in Spaces instantly!  Further edit template using composer.

Step 6: Add a spaces switcher or any other taskflow.

Save and you are done!


Extending WebCenter Spaces Using JDeveloper

In addition to being able to customize WebCenter Spaces using the browser-based tools, you can now also customize and “extend” WebCenter Spaces in many ways in JDeveloper.  You can take a resource like a Page Template, modify it using JDeveloper, and directly upload it with one-click from within JDeveloper.  This is really helpful if you want to develop these resources in an iterative way.

Here are quick links to the relevant document and supporting JDeveloper Workspace from “Oracle WebCenter Suite White Papers and Technical Notes” OTN page.

Bullet Extending WebCenter Spaces Using JDeveloper ( | Supporting Files (3 MB) February 2011

In addition to this, WebCenter Spaces platform continues to support the mechanism of “extending” OOTB spaces by adding custom code, custom taskflow, and so on via deploying custom shared libraries.   You can access the newly release white paper and supporting sample JDeveloper workspace on the same page.  Here are the quick links.

Bullet Using WebCenter Spaces Extension Samples ( | Supporting Files (24 MB) February 2011

WebCenter Spaces PS3 includes a standard shared library – “extend.spaces.webapp.war”. This .WAR file includes a deployment descriptor (weblogic.xml) which can reference one or more library references that contain WebCenter Spaces customizations. This development model provides an easy way to utilize additional shared libraries in WebCenter Spaces from multiple contributors, including developers, customers, and partners.


Branding WebCenter Spaces with custom Page Templates, Navigation, and Skins

“Branding” WebCenter Spaces in PS3 is easy!  There is support for complete management of “Site Resources” (like Page Templates, Navigations, Skins, etc.).  Powerful browser-based tooling allows business users to easily create, edit, and manage these resources.  Part III of User’s Guide covers these topics in detail.

A great post (and video) by John Brunswick here shows an example on how one can quickly create a new Page Template with “flyout-menus” using CSS.

Here are some screen shots of a Page Template we built using similar techniques.

Flyout menus include links and content (images) defined in the Navigation Model

Flyout menu surfacing Administration links for the space

Customizing WebCenter Spaces’ System pages

One of the themes for the new WebCenter Spaces platform in PS3 has been to empower the users to brand, customize, and tailor the application to their needs.   One such feature is “System Page customization”.

System pages are essentially the “seeded” or “pre-configured” pages of WebCenter Spaces.  These pages can be customized to apply your company brand, inject additional functionality, etc.  The system page Task Flow Edit provides an environment for customizing all instances of a seeded task flow in a given scope in one operation.  These customizations can be applied at different levels or “scopes” – e.g. at the whole application level or at a given space level.

If you login as an administrator and click on “Administration>Pages>System Pages”, you will see a list of system pages for the application.  Customizing these will customize the pages at an application-level.   However, you can customize the system pages at a space-level by going to “Manage>All Settings>Pages>System Pages”.

Clicking on “Customize” will launch the page in composer, where you can traverse the UI element you want to customize.

You can also drill down on a Taskflow on the page and start customizing it in runtime.

Here is a snapshot of the “My Profile” system page I customized using this technique.

For more detailed information, please refer to “Working with System Pages” in WebCenter’s User Guide.

%d bloggers like this: