Created: 7 Mar 2019, last update: 30 Jan 2022
JSS Customizing Layout Service Rendering Output
How to add an extra field to all components in the Sitecore JSS JSON output. Or more specific how to add the display name field to all components.
There are multiple way to do that, see the JSS documentation: Customizing Layout Service Rendering Output
- Use JSS GraphQL Support, (Intergrated GraphQL)
- Create your own Contents Resolver
- Extending Context Data (that is not the place for placeholder components)
Another option is to place a new processor in the renderJsonRendering pipeline. Out of the box here you found the AddComponentName processor, this processor adds the Rendering name to each component. This componentName is at the root level of the component data in the JSON. The code below will place the displayname in the Fields object.
// Based on
// Decompiled with JetBrains decompiler
// Type: Sitecore.JavaScriptServices.ViewEngine.LayoutService.Pipelines.RenderJsonRendering.AddComponentName
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.LayoutService.Configuration;
using Sitecore.LayoutService.Presentation.Pipelines.RenderJsonRendering;
using Newtonsoft.Json.Linq;
using Sitecore.JavaScriptServices.ViewEngine.ItemRendering;
namespace Stockpick.Jss.LayoutService.Pipelines.RenderJsonRendering
{
public class AddDisplayName : BaseRenderJsonRendering
{
public AddDisplayName(IConfiguration configuration) : base(configuration)
{
}
protected override void SetResult(RenderJsonRenderingArgs args)
{
Assert.ArgumentNotNull((object)args, nameof(args));
Assert.IsNotNull((object)args.Result, "args.Result should not be null");
if (args.Rendering == null || args.Rendering.Item == null)
return;
Item item = args.Rendering.Item;
if (item == null)
return;
var renderedJsonRendering = new RenderedJsonRendering(args.Result);
if (renderedJsonRendering.RenderingParams == null)
{
return;
}
JObject contents = (JObject)renderedJsonRendering.Contents;
if (contents != null)
{
JToken token;
if (!contents.TryGetValue("displayName", out token))
{
contents["displayName"] = item.DisplayName;
}
}
args.Result = (RenderedJsonRendering)renderedJsonRendering;
}
}
}
And patch the config
<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<pipelines>
<group groupName="layoutService">
<pipelines>
<renderJsonRendering>
<processor
type="Stockpick.Jss.LayoutService.Pipelines.RenderJsonRendering.AddDisplayName, Stockpick.Jss"
resolve="true" />
</renderJsonRendering>
</pipelines>
</group>
</pipelines>
</sitecore>
</configuration>
