Client side managed property value formatting for catalog item page layouts

February 25, 2014

In the last two blog posts, I covered how you could check which managed properties are available for the catalog item and I also explained a problem with DateTime values. In this post I'll cover the topic on how you could format the values on the client side.

The reason I created this post, is because there isn't much information available around this topic. The last couple of weeks I experimented a lot with the possibilities of cross-site publishing. One of the most important things is how you could format these managed properties. Sometimes the out-of-the-box value formatting won't fit your needs, that's why I started looking at the possibilities to do the formatting via different ways.

Normally the catalog item reuse web part renders the values on the server side, but with this method you don't have a lot of flexibility. For example you only have two options to visualise a DateTime value, with or without the time.

In this post I'll cover how you could format these values with the catalog item reuse web part and the content search web part with display templates.

Client Side Value Formatting

As an example I'll explain how you could format a DateTime value.

Catalog Item Reuse Web Part

In this section I'll cover how you could use the catalog item reuse web part to format values on the client side.

The first thing to do is to open you catalog item page layout (master page gallery: CatalogItem-<your term set>.html), and add a new catalog item reuse web part.

Important: you will need to update the SelectedPropertiesJson attribute with your managed property name.

The next step is to apply your own display templates to the catalog item reuse web part. By default the catalog item reuse web part always loads two display templates:

  1. RenderTemplateId: /_catalogs/masterpage/display templates/system/control_catalogdefault.js
  2. ItemTemplateId: /_catalogs/masterpage/display templates/system/item_catalogdefault.js

Note: if you know why they load these templates, please let me know, because they don't seem to be used by default.

If you want to change the display templates to be loaded, you'll need to specify the RenderTemplateId in your web part (the web part only checks on this property if it's specified, otherwise it will load the default ones). The good thing about these templates is that they have a clean mark-up, they don't add unnecessary elements.

For this example I created a new display template that will be used for the DateTime formatting (the link to the display template can be found at the bottom). Here is how the web part code block looks like:

At the moment, the web part still renders the value server side. To change this behaviour you need to change a couple of things to the web part. This are the thing you need to change:

  • UserServerSideRenderFormat attribute should be set to False;
  • UseSharedDataProvider attribute should be set to False;
  • A new property needs to be added: DataProviderJSON and it should contain the query that needs to be executed against the correct result source.

Important: if you search for the "DataProviderJSON" value in the page layout, you'll find the correct value to use for your environment.

After a page refresh you see the value appear:

Client side value rendering

Client side value rendering

The ASPX code looks like this:

Content Search Web Part

Another possibility is to use the Content Search Web Part to render the managed property values.

The ASPX code for this block looks like this:

The output is just the same as the previous one:

Client side value rendering

Client side value rendering

Overwrite the property mapping

To override the default property mapping, you need to specify the managed property in the following attributes:

  • PropertyMappings: PropertyMappings="DateTime:PublicationDate"
  • SelectedPropertiesJson: SelectedPropertiesJson="[&quot;PublicationDate&quot;]"

Download

With this method, a lot more possibilities are possible.

Here is the template that is used for this post: Item_CatalogDateTime

Comments