Discovering Sitecore ASP .NET Core SDK – Datasource Item Children Resolver

TL;DR

namespace Discovering.Sitecore10.Models
{
public class ChildrenBlockModel
{
[SitecoreComponentField(Name = "items")]
public IEnumerable<ItemLinkField<ContentBlockModel>> Children { get; set; }
}
public class ContentBlockModel
{
[SitecoreComponentField]
public TextField Title { get; set; }
}
}

Longer interpretation

I wanted to play around a bit with different Contents Resolvers. The default resolvers are the following under the /sitecore/system/Modules/Layout Service/Rendering Contents Resolvers item:

  • Context Item Children Resolver
  • Context Item Resolver
  • Datasource Item Children Resolver
  • Datasource Resolver
  • Folder Filter Resolver
  • Sitecore Forms Resolver

To make it work you need to set the Rendering Contents Resolver field on the Rendering item to Datasource Item Children Resolver. After setting this up, the JSON result is the following:

{
...
"placeholders": {
"discovering-sitecore10-main": [
{
...
"fields": {
"items": [
{
"id": "5603c106-09d8-4895-8aee-0ecfb3b69522",
"name": "Children1",
"displayName": "Children1",
"fields": {
"Title": {
"value": "I am the first children"
}
}
},
{
"id": "763f460b-5e60-481f-9ea9-56bf34d8ae27",
"name": "Children2",
"displayName": "Children2",
"fields": {
"Title": {
"value": "I am the second children"
}
}
}
]
}
}
]
}
}

Good, we are done all the changes in the Sitecore. Now let’s setup the model in the Rendering Host, which would be the following:

namespace Discovering.Sitecore10.Models
{
public class ChildrenBlockModel
{
[SitecoreComponentField(Name = "items")]
public IEnumerable<ChildContentBlockModel> Children { get; set; }
}
public class ChildContentBlockModel
{
[SitecoreComponentField(Name = "fields")]
public ContentBlockModel Fields { get; set; }
}
public class ContentBlockModel
{
[SitecoreComponentField]
public TextField Title { get; set; }
}
}

As you can see the model is a bit more complex than you would expect because of the extra intermediate ChildContentBlockModel class. This caused the most headache to me to find out how to build up the model – the main reason I decided to write this post, because after a few weeks I forgot how to use the Datasource Item Children Resolver.

I checked it further, because this approach looks a bit odd to me, Sitecore should have already something in SDK for it and there is, it’s called ItemLinkField. It’s a generic class which accepts any type as a parameter to map your fields to. Here is how the model looks using the ItemLinkField:

namespace Discovering.Sitecore10.Models
{
public class ChildrenBlockModel
{
[SitecoreComponentField(Name = "items")]
public IEnumerable<ItemLinkField<ContentBlockModel>> Children { get; set; }
}
public class ContentBlockModel
{
[SitecoreComponentField]
public TextField Title { get; set; }
}
}

Instead of a ModelBoundView, let’s use a ViewComponent – although it’s not really the most practical option for such simple component, but it’s a good chance to also showcase this. To able to map the JSON response to the model I use the IViewModelBinder. Here is the code:

public class ChildrenBlock : ViewComponent
{
private readonly IViewModelBinder _viewModelBinder;
public ChildrenBlock(IViewModelBinder viewModelBinder)
{
_viewModelBinder = viewModelBinder;
}
public async Task<IViewComponentResult> InvokeAsync()
{
return View(
"~/Views/Shared/Components/SitecoreComponent/ChildrenBlock.cshtml",
await _viewModelBinder.Bind<ChildrenBlockModel>(this.ViewContext));
}
}

Last but not least the View, to make this post complete:

@model ChildrenBlockModel
@foreach (var child in Model?.Children ?? Enumerable.Empty<ItemLinkField<ContentBlockModel>>())
{
@await Html.PartialAsync("/Views/Shared/Components/SitecoreComponent/ContentBlock.cshtml", child.Fields)
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s