When working with the page layouts for catalog items, depending on the quantity of managed properties you want to show on the page, you could quickly end up with a couple of catalog item reuse web part and / or content by search web parts. The catalog item reuse web part renders the values server side, the downside about it is that you are limited with the value render options. If you need some custom value rendering, the option you have is to switch to client side rendering. In one of my previous blog posts I explained how you could client side render values with the catalog item reuse web part: Client side managed property value formatting for catalog item page layouts.
In my case, I needed to define some custom rendering for email values, so that they rendered as a link instead of just the email address as text value, and I also needed some date time formatting because the default didn’t fulfill. This can easily be done by using a content by search web part and custom display templates, but as I mentioned, this will not be available for the search engines.
You could do it either by using the catalog item reuse web part or the content by search web part. I’ll explain this by using the catalog item reuse web part (because it requires a bit less code), at the end of the post I’ll add the code for the content by search web part.
The first step is to add a web part to your page layout with the value you want to render. I used the method I explained in this post: Client side managed property value formatting for catalog item page layouts to specify custom display templates for the catalog item reuse web part.
As you can see, I specified a custom item template via the ItemTemplateId property to do my custom rendering for an email value.
The code for this item display template looks like this:
Nothing very special in this template, it will just retrieve the value and format it as an anchor tag. The most important part of this template it the CrawlerXSLFile property, this property defines which XSL template will be used for sever side rendering. This property can also be filled in the SharePoint UI.
When editing the display template in the SharePoint UI, you’ll find the Crawler XSL File property.
If this property is filled in, the XSL template can be created. The default XSL template can be found under “/_catalogs/masterpage/Server Style Sheets/ServerRenderTemplate.xsl”. I made a copy of this file to my custom location, and started to strip everything out of this XSL file which I didn’t need. This is how my XSL file content looks like:
The last thing to do is to configure the web part to make sure that it renders the values server side instead of client side. The configuration for this is really simple, the only thing you need to change is the AlwaysRenderOnServer property to True and you are done.
The end result looks like this:
The content by search web part way
This is the code of how you could achieve this with a content by search web part:
The biggest difference when using the content by search web part to achieve it is the DataProviderJSON property, this isn’t needed if you are using the catalog item reuse web part, because it reuses the dataprovider.