チュートリアル: カスタム ロジックを使用したビュー コンポーネントの作成

コンテンツ エディタで、/sitecore/Templates/Project/MyProjectフォルダを右クリックし、Insert、New Templateの順にクリックします。

Select nameダイアログのNameフィールドにMy Serviceと入力し、Nextをクリックします。

Locationダイアログで、選択したパスにテンプレートが作成されていることを確認し、「Next」と「Close」をクリックします。コンテンツ エディターでMy Serviceテンプレートが自動的に開きます。

My ServiceテンプレートのBuilderタブで、My Service Template Fieldsという名前のセクションと2つのフィールドを作成します。

My Serviceテンプレートを保存します。

コンテンツ エディタで、/sitecore/Layout/Renderings/Project/MyProjectフォルダを右クリックし、Insert、Json Renderingの順にクリックします。

Messageダイアログで、「MyService」と入力し、「OK」をクリックします。コンテンツ エディタ は、MyService JSONレンダリングを自動的に開きます。

MyService JSONレンダリングのContentタブのEditor Optionsセクションで、次のフィールドを設定します。

MyService JSONレンダリングを保存します。

コンテンツ エディターで、/sitecore/Layout/Placeholder Settings/Project/MyProject/Mainプレースホルダー アイテムに移動します。

MainプレースホルダーのContentタブのDataセクションのAllowed ControlsフィールドでEditをクリックします。

Select ItemsダイアログのEditorsタブのAllペインで、Layout/Renderings/Project/MyProject/MyServiceをクリックし、青い矢印をクリックして、MyService JSONレンダリングをSelectedペインにコピーします。次に、「OK」をクリックします。

Mainプレースホルダーを保存します。

コンテンツ エディタで、sitecore/Content/MyProject/Homeに移動します。

Publishタブで、「Publish site」をクリックします。

Publish Siteダイアログで、「Republish」チェックボックスを選択し、「OK」をクリックします。

エクスペリエンス エディターで、MyProject/Homeページに移動します。

HomeタブでComponentをクリックし、Mainプレースホルダにレンダリングを追加できるAdd hereハンドラの1つをクリックします。

Select a Renderingダイアログで、「My Service」をクリックしてSelect。

Select the Associated Contentダイアログの「Create New Content」タブの「Name」フィールドに「MyService data source」と入力し、「OK」をクリックします。

MyProject/Homeページを保存します。

Homeタブで、「Publish」をクリックします。

Publish Itemダイアログで、「Smart publish」および「Publish related items」チェックボックスを選択し、「Publish」をクリックします。

レンダリング ホストにアクセスし、MyService JSONレンダリングでUnknown Component 'MyService'が印刷されることを確認します。

レンダリング ホスト ログで、MyServiceデータ ソース のIDとSitecore Layout Serviceレスポンスの空白のヘッダー テキストを含むMyServiceコンポーネントが表示されていることを確認します。

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

管理者権限を持つVisual Studio、Solution ExplorerでRenderingHostプロジェクトを右クリックし、Add、New Folderの順にクリックします。フォルダにServicesという名前を付けます。

RenderingHost/Servicesフォルダを右クリックし、Add、New Itemの順にクリックします。

Add New Itemダイアログで、次の操作を行います。

IFakeService.csファイルで、内容を次のコードで置き換えます。

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

IFakeService.csファイルを保存します。

Visual StudioのSolution Explorerで、RenderingHost/Servicesフォルダを右クリックし、Add、New Itemの順にクリックします。

Add New Itemダイアログで、次の操作を行います。

FakeService.csファイルで、内容を次のコードで置き換えます。

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());
        }
    }
}

FakeService.csファイルを保存します。

Visual Studio、Solution Explorer、RenderingHostプロジェクトで、Startup.csファイルをダブルクリックします。

Startup.csファイルに、MyProject.Services名前空間を追加します。

using MyProject.Services;

StartupクラスのConfigureServicesメソッドで、次のFakeServiceを追加します。

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

Startup.csファイルを保存します。

Visual StudioのSolution Explorerで、RenderingHost/Modelsを右クリックし、Add、New Itemの順にクリックします。

Add New Itemダイアログで、次の操作を行います。

MyServiceModel.csファイルで、内容を次のコードで置き換えます。

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; }
    }
}

DateHeaderプロパティとValueHeaderプロパティはIFieldから継承され、Sitecore Layout Serviceレスポンスに自動的にバインドされます。このようにして、MyServiceデータソースヘッダーテキストが入力されます。

ServiceDateプロパティとServiceValueプロパティは、FakeServiceのMyServiceViewComponentクラスによって設定されます。

IsEditingプロパティは、SitecoreContextProperty属性でSitecoreContextにバインドされます。

MyServiceModel.csファイルを保存します。

Visual StudioのSolution Explorerで、RenderingHostプロジェクトを右クリックし、Add、New Folderの順にクリックします。フォルダにViewComponentsという名前を付けます。

RenderingHost/ViewComponentsフォルダを右クリックし、Add、New Itemの順にクリックします。

Add New Itemダイアログで、次の操作を行います。

MyServiceViewComponent.csファイルで、内容を次のコードで置き換えます。

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);
        }
    }
}

MyServiceViewComponent.csファイルを保存します。

Visual StudioのSolution Explorerで、RenderingHost/Views/Shared/Componentsフォルダを右クリックし、Add、New Folderの順にクリックします。フォルダにMyServiceという名前を付けます。

RenderingHost/Views/Shared/Components/MyServiceフォルダを右クリックし、Add、New Itemの順にクリックします。

Add New Itemダイアログで、次の操作を行います。

Default.cshtmlファイルで、内容を次のコードで置き換えます。

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

Default.cshtmlファイルを保存します。

Visual Studio、Solution Explorer、RenderingHostプロジェクトで、Startup.csファイルをダブルクリックします。

Startup.csファイル、Startupクラス、ConfigureServicesメソッド、AddSitecoreRenderingEngineサービス登録で、MyServiceビューコンポーネントオプションを追加します。

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

Startup.csファイルを保存します。

エクスペリエンス エディターで、MyProject/Homeページに移動します。

独自のヘッダーテキスト値をMyServiceデータソースに挿入するには、「 No text in field」をクリックします。

MyProject/Homeページを保存します。

Homeタブで、「Publish」をクリックします。

Publish Itemダイアログで、「Smart publish」および「Publish related items」チェックボックスを選択し、「Publish」をクリックします。

レンダリング ホストにアクセスして、ヘッダー テキスト値と共にMyServiceViewComponentビュー コンポーネントが表示されていることを確認します。