JSS Customizing output

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>