Page editor experience with XSL Rendering in Sitecore

This article will focus on achieving page editor experience for a static page (page whose html content resides within the sitecore item fields) using XSL rendering in Sitecore.

Questions like when to use XSL rendering and is it suggested to use XSL rendering in Sitecore MVC is out of this tutorial’s scope. If you are looking for such info then this blog post could help you.

1. Creation of XSLT file

Create an XSLT file with below content and place it inside the website folder in the path: Website/xsl/Home.xslt.

Home.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:sc="http://www.sitecore.net/sc"  
  xmlns:sql="http://www.sitecore.net/sql"
  exclude-result-prefixes="sc sql">

  <!-- output directives -->
  <xsl:output method="html" indent="no" encoding="UTF-8"  />

  <!-- sitecore parameters -->
  <xsl:param name="lang" select="'en'"/>
  <xsl:param name="id" select="''"/>
  <xsl:param name="sc_item"/>
  <xsl:param name="sc_currentitem"/>

  <!-- entry point -->
  <xsl:template match="*">    
      <div>
        <sc:text field="text" />
      </div>
  </xsl:template>
</xsl:stylesheet>

2. Creation of Sitecore XSL Rendering

• Right click on Renderings (Layout->Renderings) in Sitecore, click on insert and the select Xsl rendering. Name it as ‘TestXslRendering’
• Provide the Path as “/xsl/Home.xslt” and save it.

3. Applying XSL rendering

• Consider the default item in Sitecore content tree – ‘Home’. Now we shall apply XSL rendering to this item/page.
• Select Home item, go to the Presentation tab and then Details. Edit the default details by clicking on Edit.
• Select some layout for the page here. Go to Controls and click on ‘add’ to add the XSL rendering what we have created (i.e., ‘TestXslRendering’). Provide the placeholder as per the layout file. Check the option ‘Open the Properties dialog box immediately.’ below and click on select.
• Then a dialog box appears. Under data source, browse and select the Home item. Then click Ok until everything is saved and closed.

Now go to Home item and edit the ‘text’ field using the Edit html link. Enter some html content to it and save. Now browse the home item in the browser. You can see the content of ‘Text’ field of Home item being rendered on the page.

Then login to Sitecore as Page Editor and try to edit this page. You will be able to edit and save the edited content. Once you save it, all your changes will reflect in the Text field. That’s it! Now you can directly edit this page content, save and publish without using content editor.

4. How it works?

• The Home item uses the ‘Sample Item’ template (/sitecore/templates/Sample/Sample Item) which has by default two data fields – ‘Title’ (of type text) and ‘Text’ (Rich Text).

• The name of the field (‘Text’) is mentioned in the XSLT file what we have created and then we have passed the Home item as data source to the XSL rendering. Thus the edited content is moved between the page and Text field.