View SiteStudio Dynamic List on WebCenter Portal application

Last week my coworker Daniel wanted to view the results of a Dynamic List on a WebCenter Portal Content Presenter Template. After a few test we saw that this feature is not suppported.

Under a Content Presenter Template (CPT) you can show any field of the DataFile, simple text, WYSWYG, static list of elements, but seems that the Dynamic List was missing by WebCenter developers ;-)

To solve this issue we created a custom TaskFlow that is capable of listing the elements of a Dynamic List (Element Definition).

First I've created a new Element Definition (ED) of type "Dynamic List", this ED will perform this query:

dExtension <matches> `docx`

This will retrieve all Word documents of the WebCenter Content (WCC).

Next, I've created a Region Definition (RD) with two fields, one of type "Single Text" and another with the DynamicList (ED) just created.

After that, I've created a DataFile based on that Region Definition, this is the resulting XML content:

<wcm:root version="8.0.0.0" xmlns:wcm="http://www.stellent.com/wcm-data/ns/8.0.0">
  <wcm:element name="text">This is a simple text</wcm:element>
</wcm:root>

As you see, there is not track about the ED with the DynamicList, but if you edit that DataFile on WCC interface this is how it looks

So, where is the information of the "Documents" section stored? In the Element Definition called "ED-DYNLIST".

This is the content of the ED file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<elementDefinition xmlns="http://www.oracle.com/sitestudio/Element/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.oracle.com/sitestudio/Element/ http://www.oracle.com/sitestudio/ss_element_definition.xsd">
    <property value="3" name="type"/>
    <property value="" name="description"/>
    <complexProperty name="flags">
  ...
  ...
    </complexProperty>
    <property value="" name="height"/>
    <complexProperty name="dynlistaddregioncontent">
  ...
  ...
    </complexProperty>
    <dataProperty name="querytext">dExtension <matches> `docx`</dataProperty>
    <property value="dDocTitle" name="sortfield"/>
    <property value="asc" name="sortorder"/>
    <property value="20" name="resultcount"/>
    <property value="false" name="limitscope"/>
    <property value="" name="targetnodeid"/>
</elementDefinition>

As you see the query is stored on <dataProperty> TAG.

Now that we have all the needed information, we can create the TaskFlow that parses the WCC query stored on the ED file, and show the results of that query under a Content Presenter.

Diagram of our TaskFlow

This is how it looks like at the end

Download Links

• ADF JAR Library
• Project sources (JDeveloper)

Documentation

• Understanding Site Studio Web Sites

ADF Twitter timeline

Yesterday I was playing with twitter widgets, specifically I was trying to add the timeline to my blog, Is quite simple and these are the steps.

Log-in on your twitter account and go to "setup" menu item.

Now go to "Widgets" option and try to create a new one.

You can create timeline by user or by hashtag, in this example is created with #webcenter hashtag.

After the creation, the page will give you the HTML code to embed the timeline on your website. We have to look the <a> tag and save the "href" and "data-widget-id"

<a class="twitter-timeline" href="https://twitter.com/search?q=%23webcenter" data-widget-id="385306900536885248">Tweets sobre "#webcenter"</a>

Now we have the HTML to add the timeline in any page, but this won't work on an ADF application. Lets move this code to a TaskFlow, the first step is to create a JSF fragment for our taskflow that handles the HTML code provided by twitter. This is my fragment code:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <af:panelGroupLayout id="pgl1" layout="vertical">
    <a class="twitter-timeline" href="${pageFlowScope.href}" data-widget-id="${pageFlowScope.id}">Tweets by @${pageFlowScope.referer}</a>
    <trh:script generatesContent="true" id="jsTwitter">
    !function(d,s,id)
    {
        var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id))
        {
            js=d.createElement(s);
            js.id=id;
            js.src="https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document,"script","twitter-wjs");
    </trh:script>
  </af:panelGroupLayout>
</jsp:root>

As you see, href and id are taskflow input parameters, when you add the taskflow on your page you have to add the parameters that were kept from last step.

Create a TaskFlow with the previous view as main view. Also add the both parameters as input for the taskflow.

After all, you only have to drop your TaskFlow as a region on a test page, this is my sample configuration:

Finally this is the result of the ADF TaskFlow after loading the twitter timeline.

Download the sample (link) and export as a ADF TaskFlow for the use on your ADF application.