X

Best Practices from Oracle Development's A‑Team

Enable Content editing of Iterative components

Introduction

The key aspect of this architectural solution is to support a data type that allows for grouping of editable elements like Plain text, Images and Rich Text, each group of elements must support a infinite amount of grouped repetitions (Rows).  Let me introduce you to the old fashion Static List Element, the best data type for such scenarios that is within reach for the Content Presenter offering for Oracle WebCenter Portal.  A Static List Element can be modeled to support a table like definition where each column of the table can be of any Element type. When you later create a instance of the Region Definition that contains the Static List Element the end user will be able to dynamically create rows of the group element definition (elements).

Main Article

So far I have probably not discussed any news, however how do you consume and present such Static List data type using WebCenter Content Presenter task flow? Easiest way to describe this is by giving you an example:

Static List Definition:
EnableContentEditing_1

The above Region Definition model presents the entire editorial asset, however the main focus for this post is on the SL_BC_TABS.

As you can see above the SL_BC_TABS (of type Static List Element) has two elements:

  • Title:  A plain text element that allows the user to enter plain text, the purpose of this element is to act as the Tab header
  • Body: A WYSIWYG element that allows the user to enter rich text including media assets like images, the purpose of this element is to act as the Tab body content

Content Presenter Template Definition

<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"     xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates"     xmlns:af="http://xmlns.oracle.com/adf/faces/rich"     xmlns:f="http://java.sun.com/jsf/core">    <dt:contentTemplateDef var="node">       <af:panelGroupLayout layout="vertical" valign="top" halign="left" id="pgl1" styleClass="AFStretchWidth">          <af:panelTabbed id="tabs" childCreation="lazyUncached" dimensionsFrom="auto" rendered="#{node.propertyMap['RD_BC_LANDING:TABS'].hasValue}">             <af:iterator value="#{node.propertyMap['RD_BC_LANDING:TABS'].values}" var="row" id="i1">                <af:showDetailItem text="#{row.nestedValue[0].value}" id="sdi1" stretchChildren="first">                   <af:panelGroupLayout layout="vertical" id="tt" inlineStyle="padding:5px;">                      <af:outputText escape="false" value="#{row.nestedValue[1].value}" id="ld1"/>                   </af:panelGroupLayout>                </af:showDetailItem>             </af:iterator>          </af:panelTabbed>       </af:panelGroupLayout>    </dt:contentTemplateDef> </jsp:root>

The above template snipped is a live example of a tab rendering in a content presenter using the node data that is coming from the current data file, pay extra attention to the detail around the iterator and the access of the static list rows

<af:iterator value="#{node.propertyMap['RD_BC_LANDING:TABS'].values}" var="row" id="i1">

Pay attention to how the above line gets the values of the static list element

Furthermore you can also see how we later can address the row variable that is produced for each iteration of the static list data

<af:showDetailItem text="#{row.nestedValue[0].value}" id="sdi1" stretchChildren="first"> <af:outputText escape="false" value="#{row.nestedValue[1].value}" id="ld1"/>

Pay attention to how the above lines leverage the index of the elements and how they are presented in template as either a showDetailItem (in this case a tab), and a output text (in this case the body)

Data File editing with Site Studio Contributor

EnableContentEditing_2

As you can see above the two elements is presented as two columns:

  • Title: The title of the tab that will be rendered for the end user
  • Tab Body: The body of the tab

The author can now with very limited knowledge add more rows and set the title and body accordingly and provision information in a very structured and synchronized manner.

Content Presenter Result

EnableContentEditing_3

The final result for the end user, since this post is focused on the tab pattern which you can see at the end of the above screenshot, the above content that was edited in a table format is now presented as tabs that is delivered to the end user when selecting each tab. This model now enables the business to present simple editorials in a very scalable and presentable views. This also removes the complex elements of UI styling and advanced programming from the author.

Based on above pattern and leveraging the available design assets in ADF you can simply convert this UI in to an according view by simply changing few lines in the template. This can even be done after the editors has published the information since the dynamic template will be applied to the contributed content.

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha

Recent Content