Technology

Inline Editing in Content Presenter for Multiple Data Files

Posted by: on May 3, 2012 | No Comments
If you are not familiar with Content Presenter, please stop reading this post and look into the documentation, after that you might want to come back to this post. I guarantee it will be really useful in the future.

As you might already know now, Content Presenter task flow only allows inline editing for single data files (CDF). Many customer have requested the same functionality when displaying multiple CDFs simultaneously, for example, as a result of a CMIS query. Such feature is currently not supported by Content Presenter, however there is a way of accomplishing such functionality by tweaking your content presenter template. Let me explain the trick here.

I’ve created 2 content presenter templates. The first one displays a list of data files.

   1:  <?xml version = '1.0'?>
   2:  <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
   3:            xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
   4:            xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates"
   5:            xmlns:f="http://java.sun.com/jsf/core">
   6:     <dt:contentListTemplateDef var="nodes">
   7:        <af:panelGroupLayout layout="vertical" id="nodeListPanel" valign="top"
   8:                             inlineStyle="#{composerContext.subView == 'contentContribution' ? 'border:2px dashed blue' : ''}">
   9:              <af:iterator rows="0" var="node" varStatus="iterator"
  10:                           value="#{nodes}" id="i1">
  11:                 <af:panelGroupLayout id="pgl1" layout="vertical">
  12:                    <dt:contentTemplate node="#{node}"
  13:                                        view="templates.mytemplate.item"
  14:                                        nodesHint="#{nodes}" id="ct1"/>
  15:                    <f:facet name="separator">
  16:                       <af:spacer height="15px" id="s1"/>
  17:                    </f:facet>
  18:                 </af:panelGroupLayout>
  19:              </af:iterator>
  20:        </af:panelGroupLayout>
  21:     </dt:contentListTemplateDef>
  22:  </jsp:root>
Line 8 adds the blue dashed line around the contribution area. It’s a nice thing to add to your template ‘cause it will give the same look and feel as the standard content presenter.

The second template renders a single data file, and it is in here that we do the magic.

   1:  <?xml version = '1.0'?>
   2:  <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
   3:            xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
   4:            xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates"
   5:            xmlns:f="http://java.sun.com/jsf/core">
   6:    <dt:contentTemplateDef var="node">
   7:      <af:panelGroupLayout layout="vertical" id="pgl3">
   8:        <af:panelGroupLayout id="pgl1" layout="horizontal"
   9:                             rendered="#{pageEditorPanelBean.view eq 'CC_VIEW'}"
  10:                             halign="right">
  11:          <af:commandImageLink id="gil1" shortDesc="#{dlBndl.OPEN_SS_CONTRIBUTOR}"
  12:                               icon="/adf/webcenter/edit_ena.png">
  13:            <af:showPopupBehavior popupId="psvPopup"/>
  14:          </af:commandImageLink>
  15:          <af:commandLink id="psvCtb3" shortDesc="#{dlBndl.SS_REFRESH_SHORT_DESC}"
  16:                          actionListener="#{backingBeanScope.presenterBacking.handleRefresh}">
  17:            <af:image source="/adf/webcenter/refresh_ena.png" id="img1"/>
  18:          </af:commandLink>
  19:          <f:facet name="separator">
  20:            <af:spacer width="10" height="10" id="s1"/>
  21:          </f:facet>
  22:        </af:panelGroupLayout>
  23:        <af:outputFormatted value="#{node.propertyMap['RD_EXAMPLE:BODY'].asTextHtml}"
  24:                            id="ot1"/>
  25:      </af:panelGroupLayout>
  26:      <af:popup id="psvPopup" contentDelivery="lazyUncached">
  27:        <af:panelWindow id="psvPw2" title="#{dlBndl.EDIT_DOCUMENT_MENU_LABEL} #{node.propertyMap['dDocName'].value}"
  28:                        modal="true" stretchChildren="first" contentWidth="600"
  29:                        contentHeight="500" resize="on">
  30:          <af:inlineFrame id="psvReg1"
  31:                          source="../../cs/idcplg?IdcService=WCM_EDIT_DATA_FILE&amp;dDocName=#{node.propertyMap['dDocName'].value}"/>
  32:        </af:panelWindow>
  33:      </af:popup>
  34:    </dt:contentTemplateDef>
  35:  </jsp:root>

A you can see, in line 27 I invoke the Site Studio Contributor window through the url http://<ucm_server>:<port>/cs/idcplg?IdcService=WCM_EDIT_DATA_FILE&dDocName=#{node.propertyMap['dDocName'].value}.

The other interesting tip is #{pageEditorPanelBean.view eq 'CC_VIEW'}. It will only render the contribution toolbar if the user is in Contributor mode (Ctrl + Shift + C).

All the other boilerplate code is just to make the app look nicer.

You can download the source code from here.