11

I'm currently working on a Tridion 2011 SP1 implementation were we push all content to a broker database as XML and retrieve this with a .Net front-end.

Is it possible to use Tridion UI (formerly known as SiteEdit, and in Tridion 2013 as Experience Manager) to edit data in our front-end? I've read the Tridion UI manual but found only references to the Tridion Page model in combination with Tridion UI.

Can anyone give some directions on how to implement this? Thanks!

Update: Implemented basic POC that works!

After Bart's comment on using the Tridion practice project I've tried to implement it, but without luck so far. Then I implemented Frank's suggestion of using a dummy page, fooling the Tridion UI by let it think we use the Tridion page model. I've used the following html code on a plain html page for a POC:

<!DOCTYPE html>
<html>
<head>
<style>
body{
    width: 450px;
    margin: 0 auto 0 auto;
    background: #adf;
    font-family:Helvetica, Arial;
}
#wrapper {
    background-color: #fff;
    padding: 40px;
}
</style>
</head>
<body>
<div id="wrapper">
    <!-- Page Settings: {'PageID':'tcm:101-352626-64','PageModified':'2013-07-15T17:01:27','PageTemplateID':'tcm:101-11294-128','PageTemplateModified':'2006-06-30T13:30:54'} -->
    <div class="component-wrapper">
        <!-- Start Component Presentation: { 'ComponentID' : 'tcm:101-238839', 'ComponentModified' : '2012-06-18T21:19:46', 'ComponentTemplateID' : 'tcm:101-232316-32', 'ComponentTemplateModified' : '2012-08-15T10:59:46', 'IsRepositoryPublished': true, 'IsQueryBased': true } -->

        <h1><!-- Start Component Field: {'XPath' : 'tcm:Content/custom:Content/custom:ArticleName[1]'} -->Name of the component</h1>
        <div><!-- Start Component Field: {'XPath' : 'tcm:Content/custom:Content/custom:Description[1]'} -->This is the description...</div>
    </div>
</div>
<script type="text/javascript" language="javascript" defer="defer" src="http://SERVERURL/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" id="tridion.siteedit"></script>
</body>
</html>

As you can see I've put in a reference to a dummy page and a component.

The component is rendered in Tridion as a dynamic XML fragment: Tridion CT settings

When clicking the SDL Tridion button on the html page we are being redirected to the Tridion UI, which shows the following: enter image description here

As you can see the page has a blue border, and both fields can be edited and saved. Thanks for all the good suggestions that pointed me in the right direction!

Improve this question
7
  • Is there anything wrapping the <!-- Start Component Presentation:? If so, can you also show that HTML? SiteEdit and Experience Manager latch onto the containing element, so it is quite important to see that.
    – Frank van Puffelen
    Jul 15, 2013 at 12:42
  • I've now included the complete html of the sample page.
    – Remco Rakers
    Jul 15, 2013 at 13:01
  • 1
    I only now notice that you say you don't use pages. You will need to mark your Component Presentations as "not on page" (check the Tridion practice page for 'IsRepositoryPublished': true and 'IsQueryBased': true) and might need to point to a dummy page.
    – Frank van Puffelen
    Jul 15, 2013 at 13:08
  • I just added a screenshot of the CT settings (published dynamically as XML fragment). I also tried several combinations for IsQueryBased and IsRepositoryPublished, but the fields are still not editable in Tridion.
    – Remco Rakers
    Jul 15, 2013 at 14:36
  • 1
    In that case I suggest adding a reference to a dummy page. It allows Experience Manager to map its functionality there. Even though that is not what you want, it will probably get you closest to a working solution. And I'm not sure if Experience Manager is able to handle page-less scenarios without it.
    – Frank van Puffelen
    Jul 15, 2013 at 14:39

1 Answer 1

Reset to default
11

As explained on the Tridion Practice project, you can easily add your own markup for SiteEdit (or Experience Manager for that matter).

Basically all that is needed for SiteEdit to work is the correct markup around your Component Presentations and the fields you want inline editable. Add to that the Page markup and bootstrap script and your Page will be fully editable, no matter how you assemble the content.

The template functions as described in the Tridion Practice project are designed for a DWT template model, but you can use the source to implement something similar in your own .Net front-end.

update

SiteEdit does need a Page context, if you only publish Component Presentations from SDL Tridion and don't have any Pages, you will want to create at least 1 Page and use its ID as a dummy Page to allow editing your Component Presentations.

Improve this answer
5
  • Thanks for your solution, Bart. I've updated my question with an attempt to use the code from the Tridion Practice project, but no luck so far...
    – Remco Rakers
    Jul 15, 2013 at 12:40
  • 1
    I agree to what @Frank has commented, you will need to have a dummy page, as Experience Manager is working page based. So add the markup for the page as is demonstrated in the MarkPage method, use an existing ID of a Page in your CMS (you can use one URI for all your pages) and place that just above the </body> tag. So outside of the div for the Component Presentation you have marked. One last question I have, your screenshot doesn't explain if that is a Preview in the CMS or if it's actually the Experience Manager view? (XPM won't work in the CMS preview like the old SiteEdit)
    – Bart Koopman
    Jul 16, 2013 at 8:03
  • Thanks for your suggestions! The preview image is the html page rendered in the Tridion UI 2012.
    – Remco Rakers
    Jul 17, 2013 at 13:03
  • Then I would think that indeed XPM is missing the Page information and thus doesn't show you anything.
    – Bart Koopman
    Jul 17, 2013 at 13:11
  • Yes, that's right. When I included a reference to a dummy page the content became editable in the Tridion UI. For now the POC is working!
    – Remco Rakers
    Jul 17, 2013 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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