Oracle WebCenter Portal – Dynamic Page Styles

Ok so… Moving to MuleSoft doesn’t mean I’ll stop writing about Oracle, at least not for now.

This post should help some of you that still have nightmares when you hear the word Page Style in WebCenter Portal.

The problem?

They are not difficult to build, as they can be considered like “Templates” but once they get assigned to a Page, if using a common approach, you can’t change modify a Page Style and reflect the change to an existing page, unless you RECREATE the page.

THIS IS NOT COMPLETELY TRUE

Solution

Build dynamic Page Styles, one of the most easiest ways of doing this is using “Declarative Components“.

 

If you want to know more about Declarative Components please have a look here:

v. 11.1.1.9

https://docs.oracle.com/middleware/11119/adf/tag-reference-faces/tagdoc/af_declarativeComponent.html

I’ll describe this solution for both, WebCenter Portal Framework and WebCenter Portal.

WebCenter Portal Framework

  1. Create your portal Application
  2. Create a Declarative Component
  3. Create a Page Style
  4. Reference the Declarative Component in your Page Style
  5. Create a Page based on the Page Style
  6. Modify the Declarative Component and test.

Panel Splitter

 

2015-11-22_0245

 

Panel Tab

 

delcarativecomponentsPS2015-11-22_0246

 

For now I’m just going to give you an example of how a Declarative Component might look like:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:componentDef var="attrs" componentVar="component">
    <af:panelTabbed position="above" id="dc_pt1" styleClass="AFStretchWidth" dimensionsFrom="auto">
      <af:showDetailItem id="Left" text="Tab Label 1" disclosed="true">
        <af:panelGroupLayout id="dc_pgl2">
          <af:facetRef facetName="facetLeft"/>
        </af:panelGroupLayout>
      </af:showDetailItem>
      <af:showDetailItem id="Center" text="Tab Label 2">
        <af:panelGroupLayout layout="scroll" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="dc_pgl1">
          <af:facetRef facetName="facetCenter"/>
        </af:panelGroupLayout>
      </af:showDetailItem>
    </af:panelTabbed>
    <!--af:panelSplitter id="dc_ps1" styleClass="AFStretchWidth">
      <f:facet name="first"/>
      <f:facet name="second"/>
    </af:panelSplitter-->
    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <display-name>declarativePageStyle2Layouts</display-name>
        <facet>
          <description>Left Facet</description>
          <facet-name>facetLeft</facet-name>
        </facet>
        <facet>
          <description>Center Facet</description>
          <facet-name>facetCenter</facet-name>
        </facet>
        <facet>
          <description>Right Facet</description>
          <facet-name>facetRight</facet-name>
        </facet>
        <component-extension>
          <component-tag-namespace>org.mauro.webcenter.components</component-tag-namespace>
          <component-taglib-uri>/pageStyleLib</component-taglib-uri>
        </component-extension>
      </component>
    </af:xmlContent>
  </af:componentDef>
</jsp:root>

Let’s check the important parts:

  • Facets are important as there I will hold Composer components.
  • In the code shown, I have commented a pannelSplitter and I display a pannelTab instead.
    • The example is mainly to show you that the Page Style can be modified from a pannelSplitter to a pannelTab without recreating the whole page.

Now the Page Style:


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1">
        <af:panelGroupLayout id="pgl1" styleClass="AFStretchWidth" layout="vertical">
          <pe:pageCustomizable id="hm_pgc1" inlineStyle="width:100%;">
            <cust:panelCustomizable id="hm_pnc1" layout="scroll">
              <af:panelGroupLayout id="panelGroupLayout1" layout="vertical" styleClass="AFStretchWidth">
                <af:declarativeComponent id="decps" viewId="/components/psLayoutComponent.jsff">
                  <f:facet name="facetLeft">
                    <cust:panelCustomizable id="a_pnc1" layout="scroll" showTabAction="true">
                      <af:outputText value="I'm Facet One" id="ot1"/>
                    </cust:panelCustomizable>
                  </f:facet>
                  <f:facet name="facetCenter">
                    <cust:panelCustomizable id="a_pnc2" layout="scroll" showTabAction="true">
                      <af:outputText value="I'm Facet Two" id="ot2"/>
                      <af:calendar id="c1"/>
                    </cust:panelCustomizable>
                  </f:facet>
                </af:declarativeComponent>
              </af:panelGroupLayout>
            </cust:panelCustomizable>
            <f:facet name="editor">
              <pe:pageEditorPanel id="pep1"/>
            </f:facet>
          </pe:pageCustomizable>
        </af:panelGroupLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>

What the Page Style does, is to reference the Declarative Component and inside the facets it includes the panelCustomizable component for Composer.

Create the Portal Resource for the Page Style and run your application, create a new page using the new Page Style, add something in run time using Composer, then just change the Declarative Component and test it again, your modification should be directly reflected to your page without rebuilding the whole thing, IMPORTANT, remember to leave the reference to the facets.

What’s different for WebCenter Portal?

Just how you publish this change:

  1. You can use a shared library
  2. You can use wlst (importMetadata)

This will import any change done to the Declarative Component.

If you want more information regarding importMetadata:

WebCenter Specific

http://docs.oracle.com/cd/E28280_01/webcenter.1111/e12405/wcadm_app_config_files.htm#WCADM5018

Generic

http://docs.oracle.com/cd/E28271_01/web.1111/e13813/custom_mds.htm#CHDHDCAI

Advertisements

Customize Profile for users in WebCenter Portal (Spaces/Builder)

Have you notice that when using WebCenter Portal (Spaces/Builder) you can only modify specific things from your profile? Or how about preventing the user from changing his password?

2014-05-29_0455

Well this can be customized really easily for all your users, just login as an Admin user:

2014-05-29_04502014-05-29_0451
2014-05-29_04532014-05-29_0454You can also tune your application changing the cache settings for profile sync between Portal and your LDAP:

2014-05-29_0506

 

WebCenter Portal 11.1.1.8 – Formerly WebCenter Spaces

Before moving to something more technical I wanted to share with you another feature from the latest version of WebCenter.

As you might already know, there have been some naming convention changes for this version and one of the most important was renaming Spaces to Portal. This change didn’t come alone, now you don’t create spaces you create portals and portal templates.  Another add on is the Portal Builder.

2013-10-13_1510

The creation of a Portal is not really that different from creating a Space in the previous version, you can select from OOTB templates, or create your owns:

 2013-10-13_1511  2013-10-13_1511_001

In the  final step, there is a new step to create your pages from an input-text, you can include links and system pages:

To create a page hierarchy, use +.
Example: Page 1, +Page 2, +Page 3, ++Page 4 produces this hierarchy:e

  • Page 1
    • Page 2
    • Page 3
      • Page 4

2013-10-13_1513

But now let me show the interesting part that was added to this version. You can design the Portal for different MOBILE DEVICES:

2013-10-13_1516And preview them as well:

 2013-10-18_0347  2013-10-13_1536

There are some more interesting features, but I’ll be posting about them in different posts.

Note: This is not available from WebCenter Portal Framework.

Blog at WordPress.com.

Up ↑

%d bloggers like this: