Sitecore JSS Custom RenderingContentresolver help

Question

We are using JSS for one of our clients. We have a requirement to fetch child items upto n level.So we built a custom rendering content resolver for it. It's working well in connected mode.

Now if we ought to use this resolver in disconnected mode i.e. the relevant rendering should by default get created with the Custom rendering content resolver instead of default resolver when we deploy the code in Sitecore.

Where should we specify the custom content resolver name in react code?

Answer 1

Rendering contents resolvers are not supported in the disconnected mock Layout Service used by the JSS sample apps. Rendering contents resolvers are server-based aspects of Layout Service and therefore you need to create them with C#/.NET. In order to use rendering contents resolvers in disconnected mode, you would essentially need to duplicate your effort and create the resolver(s) for both JavaScript and .NET. On top of that, there's no way to "translate" a disconnected resolver that is built with JavaScript into a .NET-based resolver that would be executed by Sitecore Layout Service.

All of that said, if you want to declare which rendering contents resolver a rendering should be using and have that value materialized during import, you would need to customize the import process to set the Rendering Contents Resolver field. You can start by attaching arbitrary data to your rendering definition objects in the JSS manifest like so:

  manifest.addComponent({
    name: 'ContentBlock',
    displayName: 'Content Block',    
    fields: [
      { name: 'heading', type: CommonFieldTypes.SingleLineText },
      { name: 'content', type: CommonFieldTypes.RichText },
    ],
    testProp: '{GUID-OF-MY-CUSTOM-RENDERING-CONTENTS-RESOLVER-ITEM}',
  });

And when the manifest is created, the arbitrary data will be added as a property to both the datasource template definition and the rendering definition, e.g.

sitecore-import.json

  // other data

  "renderings": [
    {
      "name": "ContentBlock",
      "displayName": "Content Block",
      "testProp": "{GUID-OF-MY-CUSTOM-RENDERING-CONTENTS-RESOLVER-ITEM}",
      "exposedPlaceholders": [],
      "dataSourceTemplate": "ContentBlock"
    },    

  // other data

In order to actually use that arbitrary data, you'll need to extend the JSS import process. When the manifest data are deserialized in the import process, any "extra" data properties on manifest objects are exposed as a dictionary property named AdditionalData on the deserialized import models.

For renderings specifically, you can find this property declaration in Sitecore.JavaScriptServices.AppServices.Models.RenderingDef.

To edit/update the value of the Rendering Contents Resolver field in a rendering definition item using data from the AdditionalData prop, you would want to extend the Sitecore.JavaScriptServices.AppServices.Pipelines.Import.ProcessRenderings processor found in the import pipeline declared in App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.config.

The config node is: /configuration/sitecore/pipelines/group[@groupName='javaScriptServices']/pipelines/import

Specifically, you'll probably want to sub-type the ProcessRenderings class with something like the following:

public class CustomProcessRenderings : ProcessRenderings
{
  protected override Item CreateRendering(RenderingDef renderingDef, ImportPipelineArgs args, IdManager idManager, AppConfiguration app, IDatasourceStrategy datasourceStrategy = null) {
    var renderingItem = base.CreateRendering(renderingDef, args, idManager, app, datasourceStrategy);

    if (renderingItem == null) {
      return null;
    }

    // Check for the existence of the data you're using to declare the custom rendering contents resolver. We're using `testProp` to align with the sample manifest code above.
    if (renderingDef.AdditionalData == null || !renderingDef.AdditionalData.ContainsKey("testProp")) {
      return renderingItem;
    }

    renderingItem.Editing.BeginEdit();
    renderingItem["Rendering Contents Resolver Field Name or ID"] = renderingDef.AdditionalData["testProp"];
    renderingItem.Editing.EndEdit();

    return renderingItem;
  }
}

DISCLAIMER: the above code is completely untested, so I wouldn't expect it to work as-is. But it should provide you with a starting point and where to explore customization options.