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

What a great day…. WebCenter Portal 12c is out

I couldn’t wait to share this news, after some years waiting for this version and after being part of the Beta Program is great to announce that the official release of Oracle WebCenter Portal 12c (12.2.1) is out:

http://www.oracle.com/technetwork/middleware/webcenter/portal/downloads/index.html

2015-10-24_0431

Why is this so important?:

  • This version is based on ADF12c meaning: JSF2, Jersey 2, Oracle REST.
  • Performance was improved, average response time: 1s
  • Page Draft Mode!!!!!!!!!!!!!!!
  • New Content Task flows.
  • Alta mobile UI
  • Native HTML5 tag support
  • REST APIs

http://www.oracle.com/technetwork/middleware/webcenter/portal/documentation/wcp-release-notes-2686521.html

More to come in following posts.

WebCenter Patch 11.1.1.9

I have been out for some time, but wanted to share the new WebCenter Release, I’ll create another post to provide a personal feedback.
JDeveloper 11.1.1.9
 
Download:
 
WebCenter Portal 11.1.1.9
 
Download:
 
What’s New:
 
WebCenter Content 11.1.1.9
 
Download:

http://www.oracle.com/technetwork/middleware/webcenter/content/downloads/index.html

What’s New:

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 Pagelet Producer – Part 1

In one of my previous posts I wrote about Web Clipping, this time I’ll like to write something about WebCenter Pagelet Producer :

  1. How to create a Resource
  2. How to extract Content
  3. How to Inject Content (In the extracted content)
  4. How to consume a Pagelet

WebCenter Pagelet Producer

Allows you to publish content from back-end applications via pagelets. A pagelet is a reusable UI component that can run on any web page or web application. 

In other words is a Mashup Enabler.

Example: You have a requirement where you need to integrate different pieces of content from an external page/system into your Web Application/ Portal ( HR Intranet wants to display content from Finance Intranet)

Hands On

Requirements

  1. Oracle WebCenter Server
  2. Have WC_Portlet Managed Server Running
  3. Admin user (ex. weblogic)
  4. The URL of the Application where you want to extract information
    I’ll use infoMENTUM’s.

Login to WebCenter Pagelet Producer Admin:
http://server:8889/pagelets/admin

2014-04-05_2042
To create a resource (Pagelet and its resources):
2014-04-05_2042_002

2014-04-05_2043
For the Source URL make sure to keep it generic so in the future you can access all the levels of the Application (ex. http://www.infomentum.com/uk/). It’s recommended to always select DHTML Rewriting.
2014-04-05_2048
Now the important part, the Pagelet.
2014-04-05_2058
Insert the General information for your Pagelet.

In the URL Suffix include the rest of the URL to access the resource you want to access (ex. about-us/media-centre/videos-and-webcasts/generationc).

The final URL will look like this when browsed for Content: http://www.infomentum.com/uk/about-us/media-centre/videos-and-webcasts/generationc

2014-04-05_2139
To extract the content you’re looking for, go to the Clipper section and create a new one:
2014-04-05_2136_001
To extract content you have two different ways of doing it:
Graphical Clipper: It will open a window with the content URL so you select the piece of content you want to clip to your Pagelet.
Advanced Clipper: You need to add the tag and an attribute of that tag so it gets recognized by the Clipper.

 

2014-04-05_2140

 

2014-04-05_2141

 

2014-04-06_0300
Now let’s use a bit of Injection:
2014-04-06_1349
Select where do you want to inject your content, this can be as simple as a string.

2014-04-06_1354
Write the content you want to inject:

 

2014-04-06_1357
Final Result:2014-04-06_1402

If you want to know how to access your Pagelet go to the Documentation section:
2014-04-06_0242_001
You can select your preferred method for integration, REST or Javascript.

That’s it for a basic Pagelet I’ll talk about Advance Features in a following post.

 

Blog at WordPress.com.

Up ↑

%d bloggers like this: