Saturday, April 16, 2011

Add LoV to new and existing taskflow

Introduction

Configuring a new portal site is easy, right?! However this statement is probably made by someone who knows his way around.
To ease this process the development team can assist there portal administrators by introducing LoV (List of Values) for the available taskflows. This applies to new and existing taskflow, yes you can add List of Values to existing taskflows.
There is following types of LoV:
  • Static LOV
    To display a list of predefined values.
  • Dynamic LOV
    To display a list of values generated by evaluating an EL value that is computed when the page is run.
  • Global LOV
    To display a global list of values that can be used in any task flow in the application.
  • Picker
    To display all values in a picker format, for example, a document picker.
This post will only go through a Static example, however the other options are straight forward.

Configuration

Assume following scenario to understand the context:
Step one create a new WebCenter Portal Project, add a desired navigation, add few pages, make sure they are customizable and support composer. All pages will be empty so the administrator has to add the taskflow  using the Runtime administration and edit the page.
It will look something like this:
image
The parameters now are open text boxes that is completely open, even though we declared them mandatory, one problem here is that we cannot guarantee the value the user will enter
There is an remedy for this, by using the new Oracle Composer extension file, pe_ext.xml
We are now going to introduce LoV for parameters  Colour and Language parameter, the process below can be repeated for any taskflow, new or existing.
Create new XML file called pe_ext.xml under Portal\adfmsrc\META-INF
Add following xml chunk:
<?xml version="1.0" encoding="UTF-8" ?> <pe-extension xmlns="http://xmlns.oracle.com/adf/pageeditor/extension">  
  <lov-config>
  </lov-config>
</pe-extension>

Now we are going to add the taskflow reference for the affected taskflow
Add following:
<task-flow-definition taskflow-id="/oracle/webcenter/siteresources/scopedMD/shared/taskflow/demo-taskflow.xml#demo-taskflow">

</task-flow-definition>
The best approach to find the id for the taskflow is to open the resource catalog in runtime and copying it
image
Now the final part, each parameter can now be configured with one of the four options of LoV, below is two static examples:
Parameter Colour
<name>Colour</name>  
     <enumeration inline="true">    
             <item>      
                      <name>Blue Colour</name>      
                           <value>Blue</value>
                           <description>Select ... Blue</description>    
              </item>    
              <item>      
                   <name>Green Colour</name>      
                   <value>Green</value>      
                   <description>Select ... Green</description>   
               </item>  
         </enumeration>
</input-parameter-definition>

Parameter Language
<input-parameter-definition>   
      <name>Language</name>  
      <enumeration inline="true">
             <item>      
                 <name>English</name>      
                 <value>en</value>      
                 <description>Select ... English</description>    
            </item>    
            <item>      
                  <name>Swedish</name>
                  <value>sv</value>      
                  <description>Select ... Swedish</description>    
             </item>  
         </enumeration> </input-parameter-definition>

The entire xml should look like this:
image
Deploy the Portal project to see following result:
image

References

For more information on how to configure LoV see documentation:
http://download.oracle.com/docs/cd/E17904_01/webcenter.1111/e10148/jpsdg_page_editor_adv.htm#CACGHHAI

Thursday, April 7, 2011

Maximize WebCenter Content Presenter

Introduction

When the portal require more than application features and the business likes to involve the best people to manage the content and structure on the site. Then there is a good remedy use Oracle WebCenter Portal together with Oracle Site Studio. Today Oracle offers Out of the box integration between the products. This Post will help you understand one design pattern that will minimize the training of the business users and maximize the integration.

Configuration

- Oracle JDeveloper 11gR1PS3
- Oracle Universal Content Manager 11gR1PS3
- Oracle HTTP Services (OHS)

How-To

Step 1: Configure Site Studio using Site Studio Designer (11gR1PS3)
1.1
image
Create new site in the Site Studio Designer – The name of the Site is just to group your site studio assets. However the site will never be used in runtime, it only will be used when you want archive or export the assets
1.1.1
image
Browse to http://[host]:[port]/cs
Navigate to Administration/Admin Applets/Configuration Manager
Add new Field called “Brand”, optional add two value options [Nissan, Toyota]
Click “Update Database Design”
Publish the new information (Options menu)
1.2
image
The diagram illustrates the assets that has to be created prior consuming them via Content Presenter. The Image assets we are using is just for demo purposes to prove the dynamic region generation based on IDOC queries embedded with Content Presenter.
Recommendation is to create the assets from bottom up in the diagram.
1.2.1
Open RT_TITLE and add IDOC and HTML to generate title content
Example:
<div>
    <h1>
        <!--$wcmElement("PT_TITLE")-->   
    </h1>
</div>
<div>
    <h2>
        <!--$wcmElement("PT_SUBTITLE")-->   
    </h2>
</div>

1.2.2
Open RT_BODY and add IDOC and HTML to generate body content
Example:
<div style="bae_product_class">
    <!--$wcmElement("WY_BODY")-->
</div>

1.2.3
Open RT_BODY and add IDOC and HTML to generate body content
Example:
<!--$dDocName=SS_DATAFILE-->
<!--$executeService("DOC_INFO_BY_NAME")-->
<!--$QueryText = "xBrand <MATCHES> `" & xBrand & "` <AND> xComments <MATCHES> `MM`" -->
<!--$SortField="dInDate"-->
<!--$SortOrder="Desc"-->
<!--$ResultCount=wcmElement("MULTIMEDIA_COUNT")-->
<!--$executeService("SS_GET_SEARCH_RESULTS")-->

<table>
<tr>
<!--$loop SearchResults-->
        <td>
            <img src="
http://<!--$HttpServerAddress--><!--$URL-->" alt="<!--$dDocTitle-->" width="150" height="150" />
        </td>
<!--$endloop-->
</tr>
</table>


Step 2: Create WebCenter Portal Application
2.1
image
Call the project ContentPresenterSample
2.2
image
The highlighted files above is the important files we will work with in this portion of the work:
- default-navigation-model.xml
- home.jspx + related page-definition file
- pageTemplate_globe.jspx + related page-definition file
2.2.1
image
1. Open default-navigation-model .xml
2. Remove Page Hierarchy
3. Add the home.jspx as a link
4. Add a URL parameter with name product and set the value to Nissan
5. Set the Title to Nissan 
6. Add the home.jspx as a link
7. Add a URL parameter with name product and set the value to Toyota
8. Set the Title to Toyota
image
2.2.2
In the home.jspx page we are basically taking of the page customizable component and moving it to the pageTemplate_globe.jspx, remember to also move the taskflow bindings from the page definition to the page definition for the pageTemplate_globe.jspx.
Example:
pageTemplate_globe.jspx
image
pageTemplate_globePageDef.xml
image
As you can see in the image above the pageeditorpanel taskflow is now add to the page template

home.jspx
image
homePageDef.xml
image
As you can see in the image above the pageeditorpanel taskflow is now removed and is now loaded in the page template instead
2.2.3
Integrate the content to the page template by using the Content Presenter Taskflow. There is a quick way of getting a Content Presenter taskflow configured.
1. Before proceeding with the Portal project login in to UCM and make sure your data files are in a Contribution Folder location so you can find the asset from JDeveloper via the Content Server Connection
2. Create a content server connections to UCM in your JDeveloper project
3. Navigate to the Datafile you want to base your Content Presenter Taskflow on by navigating in the new content server connection.
4. Drag’n’Drop the data file onto the pageTemplate_globe.jspx
image

5. Update the  Task Flow Binding properties, as following:
5.1.  datasource: #{'UCM#dDocName:CDF_'}#{navigationContext.defaultNavigationModel.currentSelection.parameters['product']}
The EL expression above is in the
- first section a CMIS notation pointer to the content ID
- second section the current select product form the current navigation context by referring to the “product”. “product” is the URL parameter added to the default-navigation-model for each node in the navigation tree.
5.2. templateView: ${‘RT_TITLE’}
5.3. regionTemplate: #{true}
image
6 Repeat step 3 to 5.3 for each Content Presenter, change 5.2 to templateView: ${‘Template ID”}. I.e RT_BODY or RT_MM
The JDeveloper project used for the references above can be download from here:
https://docs.google.com/leaf?id=0B1XNnGqYt91rNGE5NzZhMTItOWMxMS00Y2FjLWJiZDUtMzFlZGY4Y2M2MTBl&hl=en&target=_blank
Step 3: WebCenter Portal and UCM setup
To be able to edit data files directly from WebCenter portal by clicking the pen symbol (see below), the WC Portal project need share host address with the UCM instance. I.E.
- UCM: [http://localhost:7777]/cs
- WC Portal: [http://localhost:7777]/sample
This can be achieved by adding both applications context to the Oracle HTTP Server configuration. For more information around this see:
http://download.oracle.com/docs/cd/E17904_01/webcenter.1111/e12405/wcadm_app_http.htm#BABHIGHC&target=_blank

Result

image
To get the contribution mode (se the blue borders and edit actions, press ctrl+shift+c)
When clicking the pen the Site Studio Contributor shows and in this view the editor can control all regions of the page since the content presenters are sharing the same data file. Try to set the MULTIMEDIA_COUNT to “2”. This should result in two images showing for the bottom part of the page.
image
As extra option you could add showDetailedFrame around each content presenter, this will allow you to move the components in runtime when pressing (ctrl+shift+e)
<cust:showDetailFrame text="showDetailFrame 1" id="sdf1">