2

I'm attempting to make a multi-value Component link inline editable using DD4T2's XpmExtension methods to render the XPM markup. I'm using SDL Web 8.5.

Setup:

I have a Component List Schema with the following fields:

Component List Schema

The linked Component fields are as follows:

General Component Schema

First Approach

This is a simplified view to render the Component list:

<div class="gridspan24">
    @if (XpmExtensions.XpmMarkupService.IsSiteEditEnabled())
    {
        @Model.StartXpmEditingZone()
    }

    <section class="listblocks">
      <h2>@Model.XpmEditableField(x => x.Title)</h2>

        @if (XpmExtensions.XpmMarkupService.IsSiteEditEnabled())
        {
            if (Model.BodyText != null)
            {
              @Model.XpmEditableField(x => m.BodyText)
            }
        }
        else
        {
          @Model.BodyText
        }

        @if (Model.Components != null && Model.Components.Any())
        {
            foreach (var component in Model.Components)
            {
                // Partial view for linked component list
            }
        }
    </section>
  </div>

This renders:

<div class="gridspan24">
  <!-- Start Component Presentation: {"ComponentID" : "tcm:18-615", "ComponentModified" : "2017-06-21T10:31:57", "ComponentTemplateID" : "tcm:18-601-32", "ComponentTemplateModified" : "2017-06-22T05:22:25", "IsRepositoryPublished" : false} -->
  <section class="listblocks">
    <h2><!-- Start Component Field: {"XPath":"tcm:Content/custom:component_list/custom:title"} -->Full List Block</h2>    

    <!-- Start Component Field: {"XPath":"tcm:Content/custom:component_list/custom:body_text"} --><p>Test</p>

    <article class="listblock__item">
      <img class="listblock__img" alt="" src="" srcset="">
      <div class="listblock__content">
        <h3><!-- Start Component Field: {"XPath":"tcm:Content/custom:general_content/custom:title"} -->List Block - Component A</h3>

        <div class="listblock__copy">
          <!-- Start Component Field: {"XPath":"tcm:Content/custom:general_content/custom:body_text"} --><p>Test</p>
        </div>

        <div class="listblock__ctas">
          <p class="listblock__cta">
            <a href="" class="">Notice Block<span class="visuallyhidden"> Hidden Text </span></a>
          </p>
          <p class="listblock__cta">
            <a href="" class="">Internal Link Text<span class="visuallyhidden"> Internal Link Summary </span></a>
          </p>
        </div>
      </div>
      </article>

      // Other linked components    
  </section>
</div>

It was made clear to me that XPM won't have the context of the inner linked Components to know the difference. The result is that when editing the content and updating the Component list's body text, it would clear the linked Component's body text too.

Second Approach

I followed the given example and read the reference:

This suggested that for each Component to be rendered in the Component list, I have to render the Start Component Presentation XPM markup inside the <article> element.

The following markup was hard-coded for testing purposes:

<div class="gridspan24">
    <!-- Start Component Presentation: {"ID": "cp_1", "ComponentID" : "tcm:18-618", "ComponentModified" : "2017-06-22T09:09:31", "ComponentTemplateID" : "tcm:14-600-32", "ComponentTemplateModified" : "2017-06-22T07:30:20", "IsRepositoryPublished" : false} -->
    <article class="listblock__item">
        <div class="listblock__content">
            <div class="listblock__copy">
                <!-- Start Component Field: {"ID": "cp_1", "XPath":"tcm:Content/custom:component_list/custom:body_text"} -->
                <p>Test</p>
            </div>
            <div class="listblock__ctas">
                <p class="listblock__cta">
                    <a href="http://www.google.co.uk/" class="" aria-describedby="extdisclaimer">Google<span class="visuallyhidden">  </span></a>
                </p>
            </div>
        </div>
    </article>

    <article class="listblock__item">
        <!-- Start Component Presentation: {"ID": "cp_2", "ComponentID": "tcm:13-617", "ComponentTemplateID": "tcm:14-600-32"}-->
        <img class="listblock__img" alt="" src="" srcset="">
        <div class="listblock__content">

            <h3><!-- Start Component Field: {"ID": "cp_2", "XPath":"tcm:Content/custom:component_list/custom:components[0]/custom:general_content/custom:title"} -->List Block - Component A</h3>
            <div class="listblock__copy">
                <!-- Start Component Field: {"ID": "cp_2", "XPath":"tcm:Content/custom:component_list/custom:components[0]/custom:general_content/custom:body_text"} -->
                <p>Test</p>
            </div>
            <div class="listblock__ctas">
                <p class="listblock__cta">
                    <a href="" class="">Notice Block<span class="visuallyhidden"> Hidden Text </span></a>
                </p>
                <p class="listblock__cta">
                    <a href="" class="">Internal Link Text<span class="visuallyhidden"> Internal Link Summary </span></a>
                </p>
            </div>
        </div>
    </article>
</div>

This resolved clearing the linked Component when I'm editing the title body text of my Component list but this is not allowing me to edit the linked Component.

Update:

I've also had a look at Nuno's answer here but I'm unable to find an IsDynamic attribute in the documentation.

Summary:

Is there something I'm missing with how my XPM markup has been rendered or how the HTML has been structured?

1

The XPM markup is documented here https://docs.sdl.com/LiveContent/content/en-US/SDL%20Web-v5/GUID-0E2E2491-53B9-4372-B0D3-4A1A12867879

You are correct in noting that there is no IsDynamic attribute, I'm not sure what Nuno was referring to. Maybe he wanted to say that you should mark the Component Presentation as a Dynamic Component Presentation, which you could do through the IsQueryBased and IsRepositoryPublished attributes, but neither of them are required in this case for as far as I recal.

The problem you encounter is the fact that you are using TCMURIs out of different Publications which is something XPM cannot handle. Look at a simplified extract of what you are using:

<div>
    <!-- Start Component Presentation: {... "ComponentID" : "tcm:18-618", 
                                    "ComponentTemplateID" : "tcm:14-600-32" ...} -->
    <article>
        ...
    </article>

    <article>
        <!-- Start Component Presentation: {... "tcm:13-617",
                         "ComponentTemplateID": "tcm:14-600-32"}-->
            <div>
                <!-- Start Component Field: { ... } -->
            </div>
        </div>
    </article>
</div>

The first Component Presentation uses a Component from Publication ID: 18, and Template from Publication ID: 14. The second Component Presentation uses a Component from Publication ID: 13, and Template from Publication ID: 14.

You have to make sure all the TCMURIs mentioned in your Page are from the same reference Publication as the Page is. Then in your XPM settings you can configure an alternative BluePrint structure to identify where the items need to be edited/created (https://docs.sdl.com/LiveContent/content/en-US/SDL%20Web-v5/GUID-DB96F4C4-1B66-4D1D-AC29-623CE23DDE38). If that is not done, XPM might ask you to localize the Component before you are allowed to edit it.

note: you have placed the first Start Component Presentation markup outside of the article element, so it will use the borders of the div above it, that might cause undesired effects of overlaying borders and it would be advisable to place that inside the article element.

update

Reading your comment I see I missed one more detail, you are displaying the linked Components as a Component Presentation with a Component Template. These Component Presentations are indeed not on the Page, so you will have to set the IsQueryBased attribute to true (set IsRepositoryPublished to true if the CT is a Dynamic one), and make sure that the Component Template you use is indeed linked to the Schema that the Components are based on (it has to be a valid combination, you can't just use any CT). Furthermore the HTML must be valid and well formed, else XPM might also disable the editing because it will run into issues adding the overlays.

  • Thanks, Bart. I'll double check the points you've raised. – Tim Alonso Aug 22 '17 at 12:34
  • No clue anymore on what I meant to say 4 years ago :) – Nuno Linhares Aug 22 '17 at 14:53
  • Hi, Bart. I've made sure that the components rendered are from the same publication now. I've made sure that linked components have the "Start Component Presentation" markup and use its linked component id and it's parent component template id. When editing, I'm unable to edit any content on the page. Removing the "Start Component Presentation" from the linked component allows me to render the component list title and body text but not the linked components. I've tried various markup within the linked component such as using an index or calling fields from linked component context but no luck. – Tim Alonso Aug 23 '17 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.