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!

Advertisements

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: