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:
* 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
----------------------------------------------------
No comments:
Post a Comment