Rendering params object undefined when DetailedRenderingParams true and no parameter fields set

[bewards]

Description

According to this PR, the rendering parameters params object will be present in the JSON response even if rendering doesn't have parameters assigned yet.

I'm noticing on XM Cloud with Next.js that if the Sitecore setting LayoutService.DetailedRenderingParams is set to true and a new component is added to the page (where no rendering parameters are yet to be set), the params object is undefined.

Additional information

No response

[illiakovalenko]

Hey @Rmatkovsky @sc-dawidrutkowski @alan-null Can I ask one of you, please, to share some insights on this configuration? I believe it falls more within your expertise. Would be nice to understand if it's a bug or it's an expected behavior

[sc-dawidrutkowski]

@illiakovalenko The change @bewards is referring to was done ages ago - in 2019. At that time the SXA team was maintaining projects like Layout Service or Sitecore.JavaScript.Services which are now owned by the DevEx team.
Sorry but I won't help you here, I simply don't remember what was that change about.

[bewards]

For example, any SXA OOTB components render the class params as [Object object]. I don't have control over the FEaaS component since it's from the npm package:

To resolve this for SXA react components I can control, I write a method called getRenderingParam that detects if the value is a string, json string, or object:

const DefaultContainer = (props: ComponentProps): JSX.Element => {
  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
  const styles = `${getRenderingParam(props.params.GridParameters)} ${containerStyles}`.trimEnd();

type CustomRenderingParameter = KeyValuePair | RenderingParamGrid | string | null;

export const getRenderingParam = (param: CustomRenderingParameter): string => {
  let renderingParam = '';

  if (!param) return renderingParam;

  if (typeof param === 'string') {
    if (!param.startsWith('{')) {
      return param;
    }
    try {
      const paramObj = JSON.parse(param);
      if (paramObj.Value) {
        renderingParam = paramObj.Value.value;
      } else if (paramObj.Class) {
        renderingParam = paramObj.Class.value;
      }
    } catch (e) {
      logError({ e, pre: 'getRenderingParam error:' });
    } finally {
      // if we already have a string, return it
      return param;
    }
  } else if ('key' in param) {
    renderingParam = param.value.value;
  } else if ('Class' in param) {
    // support for RenderingParamGrid (SXA Grid Params when LayoutService.DetailedRenderingParams = true)
    renderingParam = param.Class.value;
  }

  return renderingParam;
};

[art-alexeyenko]

@bewards ooh, this is interesting, definitely looks to be a bug.
Can I clarify the repro steps with you? Roughly it would be:

1. Set LayoutService.DetailedRenderingParams to true in Sitecore configuration.
2. Setup and render a FEAAS component on page
3. It will have invalid class.

Would that be right?

[bewards]

Hey @art-alexeyenko - those steps are correct. You can also see the bug when using any of the OOTB SXA React Components when LayoutService.DetailedRenderingParams is set to true, since those components handle the rendering params Styles as a string instead of an object.

[art-alexeyenko]

Thanks a lot - and sorry for the delay.
I've put this bug into backlog for us to investigate and fix.

[bewards]

Hey @art-alexeyenko, would you happen to know if this bug carried across to content sdk? I can report back with my own findings as well.