Example 10: Presentation Editing

Insite Editing (PRESENTATION-EDITING): Describes how to render insite tags so that user can choose templates while editing. This section also deals with how to render content so that IN-CONTEXT and PRESENTATION-EDITING can be combined.

* How templates can be coded to allow non-technical users to control presentation of content. This section presents information on “context” and on how to make a presentation change local (i.e. visible only on a given web page), or global (i.e. changing the presentation on one page can propagate the same change to multiple pages on the site). Controlling presentation includes being able to select which page layout to select to render an entire web page, being able to select which content layout to select to render an asset in a given portion of a web page, and being able to select arguments sent to a pagelet template.

1. DEFINING A SLOT FOR PRESENTATION EDITING

* If you want to allow non-technical users to choose which presentation (i.e. which pagelet                              template) to use in order to render a particular page (say an article page), you must define a SLOT, TITLE (slot name) and add the templates in VARIANT attribute (Add multiple templates using variant="Detail.*")

 <insite:calltemplate slotname="HelloSlot"  title="Article Detail Area" tname="HelloDetail"                                variant="HelloDetail|Detail" args="c,cid" />

* The slot defined in our example above is only meant for presentation editing and is not a
 content-editable slot (not a droppable zone).

2. CONTROLLING TEMPLATE ARGUMENTS
* If you want any argument(for eg: image-align to align an image on the page) to be passed, we have to do following:

• The "image-align" argument has to be registered as a legal argument for the
 HelloDetail template. If this step is skipped, contributors will not be able to set its
 value from the editorial UI.
• In order to make sure that caching works properly, the new argument has to be
 declared as a cache criteria.
• Finally, the template code is modified in order to use the newly defined argument.

1. Declare "image-align" as a legal argument of our HelloDetail template asset.
a. From the Admin interface, edit the HelloDetail template asset.
b. For Legal Arguments, enter “image-align” and click Add Argument.
c. Select Required.
d. For Argument Description enter “Image Alignment”.
e. For LegalValues, add the following descriptions:
- For Value: left enter “Value Description: Aligned Left”.
- For Value: right enter “Value Description: Aligned Right”.
f. Click Save.
2. Remember to sync the change made in WebCenter Sites with the WSDT workspace.
3. Use the WebCenter Sites Developer Tools plug-in to add image-align to the set of
  cache criteria.
a. Right-click the HelloDetail Template in the Sites workspace.
b. Select Properties.
c. In the Cache Criteria field, append image-align to the end of the list.
d. Click Submit.
4. Optionally, a default value could be defined by using the "Additional element
  parameters" field and specifying the following value, for instance: "imagealign=right".
5. Modify the HelloDetail pagelet template code

<insite:edit field="largeThumbnail" assettype="AVIImage"                                                                                         assetid='<%=ics.GetVar("imageId")%>' >
<img class='photo <ics:getvar name="image-align"/>' src='<ics:getvar name="imageURL" />' />
</insite:edit>

* When going to the slot properties panel, assuming HelloDetail is the currently selected
layout, the Advanced tab now shows dropdown to select the legal arguments (left or right)

3. EDITING PRESENTATION AND CONTENT SIMULTANEOUSLY
* The insite:calltemplate tag allows editorial users to edit associated content and edit the layout.
 This section explains the difference between a content-editable slot and a presentation-editable                     slot and how to combine the functionality of both to allow editorial users to edit both
 the associated content and the template used to render the content.

1. Understanding CONTENT-EDITABLE Slots and PRESENTATION-EDITABLE Slots

  * Content-editable slots allow users to edit associated content by providing a “droppable zone” for the             user. Presentation-editable slots allow users to select a different template to render the content.

  * To create a CONTENT-EDITABLE slot (creates a “droppable zone” for the user) the                                 insite:calltemplate tag is used with the following defined parameters:
• assetid: The edited asset ID.
• assettype: The edited asset type.
• field: The edited field.
• cid: The ID of the asset to be rendered by the called template.
• c: The asset type to be rendered by the called template.
• tname: The pagelet template used to render the associated asset.
  * This code defines a content-editable slot that creates a “droppable zone” for the user:
<insite:calltemplate 
assetid=" "
assettype=" "
field=" "
cid=" "
c=" "
tname=" " >
</insite:calltemplate>

  * To create a PRESENTATION-EDITABLE slot (allows users to select a different template to                        render content) the insite:calltemplate tag is used with the following defined parameters:
• slotname: This attribute defines an identifier for the slot that is being filled with the
   called template. It should be reasonably easy to understand and should be unique
   across all templates.
• cid: The id of the asset to be rendered by the called template.
• c: The asset type to be rendered by the called template.
• tname: The default pagelet template to be called.
  * This code defines a presentation-editable slot that allows users to select a different template to                        render the content:
<insite:calltemplate
slotname=" "
cid=" "
c=" "
tname=" ">
</insite:calltemplate>

2. Combining CONTENT-EDITABLE Slots and PRESENTATION-EDITABLE Slots

  * To combine the functionality of both content-editable slots and presentation-editable slots,
    the insite:calltemplate tag is used along with all the attributes required for both a
    content-editable slot and a presentation-editable slot.
• These attributes are required for a content-editable slot (creates a “droppable zone” for the                            user):
- field, assetid, assettype
• This attribute is required to define a presentation-editable slot (allows users to select a
 different template to render the content):
- slotname

  * This code combines the attributes for a content-editable slot and a presentation-editable slot:
    <insite:calltemplate
slotname=" "
assetid=" "
assettype=" "
field=" "
cid=" "
c=" "
tname=" ">
</insite:calltemplate>

for eg:
<insite:slotlist field="relatedStories" slotname="relatedStoriesSlot">
<ics:listloop listname="relatedStories">
<ics:listget listname="relatedStories" fieldname="value" output="articleId" />
<insite:calltemplate tname="Summary/SideBar" c="AVIArticle"                                                                        cid='<%=ics.GetVar("articleId")%>' variant="Summary.*"/>
</ics:listloop>
</insite:slotlist>

  * This is the same code used previously, except that we have specified a slotname attribute,
    and a variant attribute (in this case, the list of available templates is restricted to all pagelet
    templates starting with Summary). Because slotname was included inside the insite:slotlist tag, it                      is not required to add it for the inner insite:calltemplate tag. The value is automatically inherited, as is the value of tname and field.
For example:
<insite:slotlist slotname=" " field=" ">
<insite:calltemplate tname=" " c=" " cid=" " />
</insite:slotlist>
                     The Summary/SideBar now behaves as a default template for the related articles. By right                              clicking any related article and selecting the Change Content Layout feature, it now becomes                        possible to select alternate templates.

INFO:

• Insite Editing topic is a very big topic and one has to seriously read developer guide and work on it.
• Other topics like: Understanding the CONTEXT System Variable and Enabling Content Creation for Web Mode are needed for developers to understand to make full use of insite editing.

----------------------------------------------------

SUGGESTIONS/COMMENTS ARE INVITED

----------------------------------------------------

ALL TUTORIALS

Example 9: In-Context Content Editing

Insite Editing (IN-CONTEXT) : Describes how to render insite editing tags for different attribute types with different formatting.

1. STRING: 
<insite:edit field="attribute_name" value="value from variable"/>
or 
<insite:edit field="headline" list="from list" column="value" />

2. TEXT with CkEditor:
<insite:edit list="bodyList" column="value" editor="ckeditor" field="body" params="{width:                               '500px', height: '350px'}" />

3. DATE:
* Insite editing for date is little bit tricky as it depends on how we are formatting date
* With timezone and timezoneID:
************** First, format the date **************
<dateformat:create name="df" datestyle="long" timestyle="long" timezoneid="IST"/>
<dateformat:getdate name="df" varname="formattedDate" valuetype="jdbcdate"                                                    value='<%=ics.GetVar("postDate") %>' />

* If TIMESTAMP is needed, then use
<dateformat:getdatetime name="df" varname="formattedDate" valuetype="jdbcdate"                                      value='<%=ics.GetVar("postDate") %>' />

************** Render date using insite tag **************
<insite:edit field="postDate" value='<%=ics.GetVar("formattedDate") %>' params="                                        {constraints:{formatLength: 'long'} , timePicker:true, timeZoneID:'IST'}"/>

* Without timezone and timezoneID, just remove timestyle, timezoneid while formatting and while                     rendering remove timepicker and timezoneid.

4. BINARY FIELDS:
* We require imageID and list where it would be saved as followed:
<assetset:setasset name="image" type="AVIImage" id='<%= ics.GetVar("imageId")%>'/>
<assetset:getattributevalues name="image" listvarname="largeThumbnailList"                                                              typename="ContentAttribute" attribute="largeThumbnail"/>

* Render image using insite tag:
<render:getbloburl outstr="imageURL" c="AVIImage" cid='<%=ics.GetVar("imageId") %>'                               field="largeThumbnail" />
<insite:edit field="largeThumbnail" assetid='<%=ics.GetVar("imageId")%>'                                                         assettype="AVIImage" list="largeThumbnailList" column="value">
<img class="photo left" src='<%=ics.GetVar("imageURL")%>' />
</insite:edit>

* Following options are available on hovering with toolbaar:
• Upload
• Edit with Clarkii (displays the Clarkii image editor)
• Clear

5. ASSET FIELDS(Single Valued):
* Instead of calling templates with render:calltemplate use insite:template; provide proper                                  c,cid,fieldname
* fieldname values can change for
- type:asset subtype:AVIArticle --> fieldname="attribute_name"
- association --> fieldname="Association-named:<associationName>"
- parent asset --> fieldname="Group_<parentDefinitionName>"

6. NUMBER FIELDS(i.e. integer, double and money):
* For example: attribute_name=price
* Create currency object and display with insite edit as followed:
<currency:create name="curname" isocurrency="USD" separator="comma|dot|default"/>
<currency:getcurrency varname='curout' name="curname" value='<%=price %>'/>

<insite:edit field="price" value='<%=ics.GetVar("curout")%>' params="{currency:'USD'}"/>

7. MULTIVALUED FIELDS
* When dealing with multivalued fields, beyond editing the existing values, editors need to access                       more features such as:
• adding a new value
• removing an existing value
• reordering existing values

a) Editing Multivalued Text Fields (having CKEDITOR)
* Editing all the text fields (attribute type - text (MULTIPLE))
* Following code just enables to edit every text list

<ics:listloop listname="teaserList">
<ics:listget listname="teaserList" fieldname="#curRow" output="currentRowNb" />
<insite:edit assetid='<%=ics.GetVar("cid")%>' 
assettype='<%=ics.GetVar("c")%>'
field="teaserText"
list="teaserList"
column="value"
index='<%=ics.GetVar("currentRowNb")%>'
editor="ckeditor" />
</ics:listloop>

* Following code includes adding, removing, and reordering values

<insite:list field="teaserText"
editor="ckeditor"
assetid='<%=ics.GetVar("cid")%>'
assettype='<%=ics.GetVar("c")%>'>
<ics:listloop listname="teaserList">
<insite:edit list="teaserList" column="value" />
</ics:listloop>
</insite:list>

* In the case of asset reference fields, we will use the insite:slotlist tag instead of the insite:list tag.
 In this case, rather than nested insite:edit tags, we will have nested insite:calltemplate tags.
 
<insite:slotlist field="relatedStories">
<ics:listloop listname="relatedStories">
<ics:listget listname="relatedStories" fieldname="value" output="articleId" />
<insite:calltemplate tname="Summary/SideBar" c="AVIArticle"                                                                          cid='<%=ics.GetVar("articleId")%>' />
</ics:listloop>
   </insite:slotlist>

INFO:

• This examples were simple taken from Oracle WebCenter Sites developer guide.
• All asset types, examples and attributes were used from AVISPORTS site.
• User was given all sites privileges and roles to AVISPORTS site.

----------------------------------------------------

SUGGESTIONS/COMMENTS ARE INVITED

----------------------------------------------------

ALL TUTORIALS