Expand Link Field Rendering Parameters In Layout Service

After four Headless implementations, I had no idea this existed. It turned out it also wasn’t initially documented as such but we had a ways back, built a way to expand, in particular, Link Field Rendering Parameter Fields. We did this because when we were initially working on Headless implementations, whenever we used DropLink field types inside of a Rendering Parameter Template, all we would end up with was GUID values.

When you think of it, there is a reason for this. If by default the Link Field of a Rendering Parameter was always expanded, depending on the number of components on the page, this can drastically increase the size of the Layout JSON.

We had built a way to expand Rendering Parameters and append them to the layout. But it always depended upon the “value” returned being contained in the same field name. As it turned out, this solution was there all along.

Example

Here I’ve setup a simple Rich Text component with a Rendering Parameter Template that has a DropLink field containing values for padding.

• Small
• Medium
• Large

Using Experience Editor I’ve selected the medium option.

After saving, we can then examine what the layout service would render for this particular component and as we can see, the padding field only shows a GUID value.

The Solution to Fixing GUID Values Appearing

We can solve this by creating a patch file for LayoutService.DetailedRenderingParams as by default, it’s set to false.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="LayoutService.DetailedRenderingParams" value="false">
        <patch:attribute name="value">true</patch:attribute>
      </setting>
    </settings>
  </sitecore>
</configuration>

The result, as of patching and changing the value to true, we can now see the padding has been expanded showing the complete breakdown of the field.

In our front-end solution we can create a function to part it such that it can be used appropriately.

interface PaddingProps {
  title: { value: string };
  body: { value: string };
  value: { value: string };
}

We can convert it to a JSON object using a function similar to the following:

function parsePadding(paddingString: string): PaddingProps {
  return JSON.parse(paddingString) as PaddingProps;
}

The simple Rich Text component might then look something like the following:

import React from 'react';
import { Field, RichText as JssRichText } from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
  Text: Field<string>;
}

interface PaddingProps {
  title: { value: string };
  body: { value: string };
  value: { value: string };
}

export type ExampleRichTextProps = {
  params: { [key: string]: string };
  fields: Fields;
};

function parsePadding(paddingString: string): PaddingProps {
  return JSON.parse(paddingString) as PaddingProps;
}

export const Default = (props: ExampleRichTextProps): JSX.Element => {
  const text = props.fields ? (
    <JssRichText field={props.fields.Text} />
  ) : (
    <span className="is-empty-hint">Rich text</span>
  );
  const id = props.params.RenderingIdentifier;
  const parsedPadding = parsePadding(props.params.padding || '{}');

  // Now you can access parsedPadding.title.value, parsedPadding.body.value, etc.

  return (
    <div
      className={`component rich-text ${props.params.styles.trimEnd()} ${
        parsedPadding.value.value
      }`}
      id={id ? id : undefined}
    >
      <div className="component-content">{text}</div>
    </div>
  );
};