Marketplace に登録されている WPF(Web Part Framework)を使用すると、 Web Part をサイトコアの定義アイテム(コンテンツツリー上のアイテム)として定義し、個人ごとにカスタマイズを行えるポータルページを作成することができます。[Sitecore WPF]Sitecore Web Part Framework の Web Part Node を使ってみるのページで WebPartZone に表示するコンポーネントをWeb Part Node型のアイテムを使用して定義する方法をご紹介しました。

今回は Sitecore Web Part Framework をインストールしたときにインストールされる ReferenceRendering データテンプレートを使用するサンプルを使用します。 ReferenceRendering データテンプレートを使用すると、サイトコアで定義されている サブレイアウトやレンダリング、コントロールやWebPart定義アイテムを1つのWeb Part として登録することができるようになります。また、ReferenceRendering を使用すると コンテンツエディター上で ReferenceRendering型のアイテムに設定した各コンポーネントにデータソースを設定できるようになります。

本記事でサンプルを示しますが、ReferenceRendering型のアイテムを /sitecore/システム/モジュール/Web Parts 配下に作成することで、 サンプルページ (/WPF Sample.aspx)のカタログモードの Available Web Parts から、 WebPartZoneにWeb Part を配置することができるようになります。 

1.サンプル用のサブレイアウトの作成

ReferenceRendering 型のアイテムで使用する DisplayName というサブレイアウトを作成しました。定義例を以下に記載します。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DisplayName.ascx.cs" Inherits="SCWebPartsSample.Web.layouts.wpf.DisplayName" %>
<asp:Literal runat="server" ID="ltlText"></asp:Literal>

サブレイアウトのコードビハインド(UserInfo.ascx.cs) の実装例をお願いします。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sitecore.Data.Items;

namespace SCWebPartsSample.Web.layouts.wpf
{
    public partial class DisplayName : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var sublayout = this.Parent as Sitecore.Web.UI.WebControls.Sublayout;

            string dataSource = string.Empty;
            if (sublayout != null)
            {
                dataSource = (string)sublayout.DataSource;
            }

            if (!string.IsNullOrEmpty(dataSource))
            {
                Item item = Sitecore.Context.Database.GetItem(dataSource);
                ltlText.Text = item.Name + item["Title"];
            }
            else
            {
                ltlText.Text = Sitecore.Context.Item.Name;
            }
            ltlText.Text += "<br />";

        }
    }
}

非常に単純ですが ReferenceRenderingを構成するサブレイアウトを作成しました。

2. ReferenceRendering 型のアイテムの作成

上記で作成した DisplayName と  [Sitecore WPF]Sitecore Web Part Framework の Web Part Node を使ってみるで作成した LoginInfo というサブレイアウトから構成される ReferenceRendering 型のアイテムを 作成します。

下図のように /sitecore/システム/モジュール/Web Parts 定義アイテムのサブアイテムを作成します。

 

データテンプレートとして /テンプレート/WebPart Framework/ReferenceRendering を選択します。今回は TestReferenceRendering という名前の定義アイテムを作成しました。

作成した TestReferenceRendering 定義アイテムを選択してエディターペインに表示される コンテンツタブでフィールドを編集します。フィールドには TItle と Reference, DataSources というフィールドがあります。Titleフィールドは WebPartの名前として使用されます。ReferenceにWeb Part を構成するコンポーネント(サブレイアウトやXSLTレンダリングなど) の ID(GUID) をパイプ区切りで設定します。DataSources にReferenceフィールドで設定した 各コンポーネントにデータソースとして指定したいアイテムのID(GUID) をパイプ区切りでコンポーネントの位置に一致する場所に設定します。

以上で準備が完了です。Web Part Frameworkモジュールをインストールしたときに作成される WPF Layout.aspx のマークアップには /sitecore/システム/モジュール/Web Parts アイテム配下のアイテムをカタログモードの画面からaspx上の WebPartsZone に配置できるようにすでに設定されています([Sitecore WPF]Sitecore Web Part Framework をインストールしてみる参照)。

3.Web Sampleページを表示してみる

パブリッシュして /WPF Sample.aspx のページをブラウザで表示し、ページのモードを Catalog Mode に設定します。Catalog Modeになったら Catalog ZoneのAvailable Web Parts をクリックします。

すると、下図のように Availabe Web Parts の領域が表示され、 作成した TestReferenceRendering アイテムが表示されます。表示名は Title フィールドで設定した文字列になります。

 

TestReferenceRenderingをチェックして WebPartZoneを選択して Add ボタンをクリックすることでページに配置することができます。

4.まとめ

説明は以上となります。 Sitecore Web Part Module の ReferenceRendering を使用することで 複合のコンポーネントを1つのWeb Part として取り扱うことができるようになります。また、 /sitecore/システム/モジュール/Web Parts アイテム配下にReferenceRendering のアイテムを作成することで Catalog Zone の Available Web Parts の中から コンポーネントをページに配置することができるようになります。