Walkthrough: Creating a view component with custom logic

In the Content Editor, right-click the /sitecore/Templates/Project/MyProject folder and click Insert, New Template.

In the Select name window, in the Name field, enter My Service and click Next.

In the Location window, confirm that the template is created in the path you just chose and click Next and Close. The Content Editor automatically opens the My Service template.

In the My Service template, on the Builder tab, create a section named My Service Template Fields and two fields:

Save the My Service template.

In the Content Editor, right-click the /sitecore/Layout/Renderings/Project/MyProject folder and click Insert, Json Rendering.

In the Message window, enter MyService and click OK. The Content Editor automatically opens the MyService JSON rendering.

In the MyService JSON rendering, on the Content tab, in the Editor Options section, configure the following fields:

Save the MyService JSON rendering.

In the Content Editor, click the /sitecore/Layout/Placeholder Settings/Project/MyProject/MyProject-main placeholder item.

In the MyProject-main placeholder, on the Content tab, in the Data section, above the Allowed Controls field, click Edit.

In the Select Items window, on the Editors tab, in the All pane, click Layout/Renderings/Project/MyProject/MyService and click the blue arrow to copy the MyService JSON rendering to the Selected pane. Then click OK.

Save the MyProject-main placeholder.

In the Content Editor, click sitecore/Content/MyProject/Home.

On the Publish tab, click Publish site.

In the Publish Site window, select the Republish check box and click OK.

In the Experience Editor, go to the MyProject/Home page.

On the Home tab, click Component and click one of the Add here handlers that let you add a rendering to the MyProject-main placeholder.

In the Select a Rendering window, click My Service and Select.

In the Select the Associated Content window, on the Create New Content tab, in the Name field, enter MyService data source and click OK.

Save the MyProject/Home page.

On the Home tab, click Publish.

In the Publish Item window, select the Smart publish and Publish related items check boxes and click Publish.

Visit the rendering host and check that the MyService JSON rendering prints Unknown Component 'MyService'.

In the rendering host log, check that you see the MyService component with the MyService data source ID and the blank header texts in the Sitecore Layout Service response:

{
  "uid": "efe02844-bd57-4d31-be93-384440aa8d0c",
  "componentName": "MyService",
  "dataSource": "{79F7E3DF-DD72-4575-AFB7-64E174AC6401}",
  "params": {},
  "fields": {
    "DateHeader": {
      "value": ""
    },
    "ValueHeader": {
      "value": ""
    }
  }
}

In Visual Studio with administrator privileges, in Solution Explorer, right-click the RenderingHost project and click Add, New Folder. Name the folder Services.

Right-click the RenderingHost/Services folder and click Add, New Item.

In the Add New Item window:

In the IFakeService.cs file, replace the content with the following code:

using System;
using System.Threading.Tasks;
namespace MyProject.Services
{
    public interface IFakeService
    {
        DateTime FakeDate { get; }
        Task<int> GetFakeValueAsync();
    }
}

Save the IFakeService.cs file.

In Visual Studio, in Solution Explorer, right-click the RenderingHost/Services folder and click Add, New Item.

In the Add New Item window:

In the FakeService.cs file, replace the content with the following code:

using System;
using System.Threading.Tasks;
namespace MyProject.Services
{
    public class FakeService : IFakeService
    {
        public DateTime FakeDate => DateTime.Now;
        public async Task<int> GetFakeValueAsync()
        {
            return await Task.Run(() => new Random().Next());
        }
    }
}

Save the FakeService.cs file.

In Visual Studio, in Solution Explorer, in the RenderingHost project, double-click the Startup.cs file.

In the Startup.cs file, add the MyProject.Services namespace:

using MyProject.Services;

In the Startup class, in the ConfigureServices method, add FakeService:

public void ConfigureServices(IServiceCollection services)
{
  services.AddTransient<IFakeService, FakeService>();
}

Save the Startup.cs file.

In Visual Studio, in Solution Explorer, right-click RenderingHost/Models and click Add, New Item.

In the Add New Item window:

In the MyServiceModel.cs file, replace the content with the following code:

using System;
using Sitecore.AspNet.RenderingEngine.Binding.Attributes;
using Sitecore.LayoutService.Client.Response.Model.Fields;
namespace MyProject.Models
{
    public class MyServiceModel
    {
        public TextField DateHeader { get; set; }
        public TextField ValueHeader { get; set; }
        public DateTime ServiceDate { get; set; }
        public int ServiceValue { get; set; }
        [SitecoreContextProperty]
        public bool IsEditing { get; set; }
    }
}

The DateHeader and ValueHeader properties inherit from IField and are automatically bound to the Sitecore Layout Service response. This is how they get populated with the MyService data source header texts.

The ServiceDate and ServiceValue properties are populated by the MyServiceViewComponent class from FakeService.

The IsEditing property is bound to SitecoreContext with the [SitecoreContextProperty] attribute.

Save the MyServiceModel.cs file.

In Visual Studio, in Solution Explorer, right-click the RenderingHost project and click Add, New Folder. Name the folder ViewComponents.

Right-click the RenderingHost/ViewComponents folder and click Add, New Item.

In the Add New Item windows:

In the MyServiceViewComponent.cs file, replace the content with the following code:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using MyProject.Models;
using MyProject.Services;
using Sitecore.AspNet.RenderingEngine.Binding;
namespace MyProject.ViewComponents
{
    public class MyServiceViewComponent : ViewComponent
    {
        private readonly IViewModelBinder modelBinder;
        private readonly IFakeService fakeService;

        // Use the view component support for dependency injection to inject
        // FakeService and the
        // Sitecore.AspNet.RenderingEngine.Binding.IViewModelBinder service.
        public MyServiceViewComponent(IViewModelBinder modelBinder, IFakeService fakeService)
        {
            this.modelBinder = modelBinder;
            this.fakeService = fakeService;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            // Bind MyServiceModel to the Sitecore Layout Service response
            // when the view component is invoked.
            var model = await modelBinder.Bind<MyServiceModel>(this.ViewContext);

            if (model.IsEditing)
            {
                // Set mock values to be displayed in edit mode only.
                // This avoids invoking FakeService in the Experience Editor and
                // can be very helpful for content authors, especially if
                // FakeService requires authentication or the user values are
                // not available in edit mode.
                model.ServiceDate = DateTime.MinValue;
                model.ServiceValue = 42;
            }
            else
            {
                // Invoke FakeService to populate the date and value of the model.
                var serviceResult = await fakeService.GetFakeValueAsync();
                model.ServiceDate = fakeService.FakeDate;
                model.ServiceValue = serviceResult;
            }

            // Return the model to the Default.cshtml Razor view.
            return View(model);
        }
    }
}

Save the MyServiceViewComponent.cs file.

In Visual Studio, in Solution Explorer, right-click the RenderingHost/Views/Shared/Components folder and click Add, New Folder. Name the folder MyService.

Right-click the RenderingHost/Views/Shared/Components/MyService folder and click Add, New Item.

In the Add New Item window:

In the Default.cshtml file, replace the content with the following code:

@model MyProject.Models.MyServiceModel
<h2 asp-for="DateHeader"></h2>
@Model.ServiceDate.ToString("R")
<h2 asp-for="ValueHeader"></h2>
@Model.ServiceValue

Save the Default.cshtml file.

In Visual Studio, in Solution Explorer, in the RenderingHost project, double-click the Startup.cs file.

In the Startup.cs file, in the Startup class, in the ConfigureServices method, in the AddSitecoreRenderingEngine service registration, add the MyService view component option:

services.AddSitecoreRenderingEngine(options =>
{
  options
    .AddModelBoundView<ContentBlockModel>("ContentBlock")
    .AddViewComponent("MyService")
    .AddDefaultPartialView("_ComponentNotFound");
})

Save the Startup.cs file.

In the Experience Editor, go to the MyProject/Home page.

To insert your own header text values into the MyService data source, click [No text in field].

Save the MyProject/Home page.

On the Home tab, click Publish.

In the Publish Item window, select the Smart publish and Publish related items check boxes and click Publish.

Visit the rendering host to check that you see the MyServiceViewComponent view component with your header text values.