Updating SiteEdit Tags to allow adding compoments to a page in UI 2012 without DWT templates

Question

I am trying to update site edit from a Tridion 5.2 installation + custom framework, to Tridion 2011 SP1 HR1 UI 2012

The old ASP.NET pages contains tags that were used for SiteEdit. These tags still work with UI 2012, although they might nog be fully HTML compliant. the following code allows the body text to be edited.

<span id="_SE_FLD" _se_fld="tcm:Content/custom:SectionHomepage/custom:Body[1]/custom:Text[1]">
    <asp:Literal ID="bodyText" runat="server"></asp:Literal>
</span> 

My quetion is about components (HighlightItems) that are on this page. These are rendered in the repeater below. Although u user can now change the highlight on the page, the functionality of adding or removing HighlightItems doesn't work.

<asp:Repeater ID="rpHighlights" runat="server" OnItemDataBound="rpHighlights_ItemDataBound">
    <HeaderTemplate>
        <div class="list_boxes">
            <h2>Cases</h2>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <span id="_SE_FLD" _se_fld="tcm:Content/custom:SectionHomepage/custom:HighlightItems[<%#Container.ItemIndex %>]">
        <li>
            <asp:Image ID="imgHLImage" runat="server" />
            <h3><%# Eval("Title") %></h3>
            <p><%# Eval("Body") %></p>
            <p class="more"><asp:HyperLink ID="hpHighlightLink" runat="server" ></asp:HyperLink></p>
        </li>
        </span>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
        </div>
    </FooterTemplate>
</asp:Repeater> 

I have tried to change the tags to the new format, and also changed 'IsMultiValued' to true and false

<!-- Start SiteEdit Component Field: {
    "ID" : "_SE_FLD", 
    "XPath" : "tcm:Content/custom:SectionHomepage/custom:HighlightItems[<%#Container.ItemIndex + 1 %>]", 
    "IsMultiValued" : false
} -->

but this also doesn't allow adding or removing highlights

I am not using DWT templates, because of the custom framework. can someone provide me the rendered template code for a similar scenario

Answer 1

The comments all need to be inside of an encapsulating HTML element. Common use is a DIV element for Component Presentations and SPAN elements for fields.

Example markup taken from the UI Update for 2011 documentation (requires login):

<div>
<!-- Start Component Presentation: {
  "ComponentID" : "tcm:2-635",
  "ComponentTemplateID" : "tcm:2-599-32",
  "ComponentModified" : "2011-01-22T11:25:12",
  "IsRepositoryPublished" : false
} -->
  <span>
  <!-- Start Component Field: {
    "XPath" : "tcm:Content/custom:Content/custom:NewField[1]"
  } -->
    HTML contents of the field
  </span>
</div>

Answer 2

In the Tridion Practice project on Google code there is a custom function source defined to aid in marking up your HTML for use with Experience Manager -> https://code.google.com/p/tridion-practice/wiki/TridionUI2012FunctionsForUseInHtmlTemplates

Now this is a custom function source and thus meant to be used as Template Callable functions for inside a DWT template, so from that aspect not useful for you directly. However you can use the source to create a similar set of methods for use inside your own custom framework. Something similar is also done in the DD4T project where they use a SiteEditHelper

As for your direct question, if I understand the question correctly you want to edit the single value of a multi value (embedded) field. For that I think this is the snippet you are looking for:

<h3>
  <!-- Start Component Field: {    
    "XPath" : "tcm:Content/custom:SectionHomepage/custom:HighlightItems[<%#Container.ItemIndex %>]/custom:Title"
  } -->
  <%# Eval("Title") %> 
</h3>

It is the snippet for editing the Title field (using h3 as the encapsulating HTML element), and a similar one could be used for the Body field and your link. One remark, the indexes for Experience Manager are 1 based, so <%#Container.ItemIndex %> should return 1 for the first item (and not 0 as most programming languages do), which means you might need to add +1 to it.

Answer 3

Don't know if only with this is ok (without SiteEdit)

<!-- Start Component Field: { 'XPath' : 'tcm:Content/custom:SectionHomepage/custom:HighlightItems[<%#Container.ItemIndex %>]'} -->

maybe you have to include also the Component Presentation tag.