チュートリアル: カスタム フォーム要素の作成

コンテンツ エディターでsitecore/Templatesに移動し、新しいフォルダー ( Fieldsというフォルダーなど) を作成します。

コンテンツ ツリーで新しいフォルダをクリックし、FolderタブでNew Templateをクリックします。

Select nameページの「Name」フィールドにテンプレートの名前を入力し、「Base template」フィールドでFieldテンプレート(Templates/System/Forms/Fields/Field)を選択して、「Next」をクリックします。

Locationページで、テンプレートを保存するフォルダーを選択し、Nextをクリックして、Closeをクリックします。

コンテンツ ツリーで、新しいテンプレートを選択した状態で、Builderタブをクリックします。

次のテンプレートフィールドを追加します。

各テンプレート フィールドについて、DataセクションのContentタブでSharedチェック ボックスをオンにし、Messageダイアログ ボックスで変更を確認します。

コンテンツ ツリーで新しいテンプレートをクリックし、リボンのOptionsタブをクリックして、Standard valuesをクリックします。

リボンのSaveをクリックしてテンプレートを保存します。

Visual Studioで、新しいクラス ライブラリ プロジェクト ( FormsDemoなど) を作成します。

FieldViewModelクラスを追加します。たとえば、VideoViewModelクラスを追加します。

public class VideoViewModel : FieldViewModel

プロパティを追加します。たとえば、Url、Width、Heightを追加します。

namespace FormsDemo
{
  [Serializable]
  public class VideoViewModel : FieldViewModel
  {
	public string Url { get; set; }

	public int Width { get; set; }

	public int Height {get; set;}

	protected override void InitItemProperties(Item item)
  {
    // on load of the form
    base.InitItemProperties(item);
  
        Url = StringUtil.GetString(item.Fields["Url"]);
	Width = MainUtil.GetInt(item.Fields["Width"]?.Value, 0);
	Height = MainUtil.GetInt(item.Fields["Height"]?.Value, 0);
  }

InitItemPropertiesメソッドとUpdateItemFieldsメソッドをオーバーライドします。

protected override void InitItemProperties(Item item)
{
	// on load of the form
	base.InitItemProperties(item);
	
	Url = StringUtil.GetString(item.Fields["Url"]);
	Width = MainUtil.GetInt(item.Fields["Width"]?.Value, 0);
	Height = MainUtil.GetInt(item.Fields["Height"]?.Value, 0);
}

protected override void UpdateItemFields(Item item)
{
	// upon save
	base.UpdateItemFields(item);
	
	item.Fields["Url"]?.SetValue(Url, true);
	item.Fields["Width"]?.SetValue(Width.ToString(CultureInfo.InvariantCulture), true);
	item.Fields["Height"]?.SetValue(Height.ToString(CultureInfo.InvariantCulture), true);
}

プロジェクトをビルドし、FormsDemo.dllをSitecore Webサイトのbinフォルダーにデプロイします。

たとえば、video要素の場合は、Video.cshtml Razorビュー ファイルを作成します。

前に作成した新しいクラス ライブラリ プロジェクトにrazorビュー ファイルを追加します。Sitecore FormsのデフォルトのRazorビュー ファイルは、Website/Views/FormBuilder/FieldTemplatesに保存されています。たとえば、Video.cshtmlファイルをFormsDemoフォルダーに追加して保存します。

Sitecore Rocksで、コア データベースを展開し、すべてのフィールド プロパティ エディターのレイアウト パラメーターが含まれているSettingsフォルダーを右クリックします。 /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings

「 Add」をクリックし、「 New item」をクリックします。

Add New Itemダイアログボックスで、Form Parametersテンプレートを検索してクリックし、Videoなどの名前を入力して、「OK」をクリックします。

作成したVideoアイテムを右クリックし、Add、New itemの順にクリックします。

カスタム要素の新しいセクションを追加するには、FormSectionテンプレートを検索してクリックします。

新しいアイテムの名前を入力し、OKをクリックします。たとえば、「 Details 」と入力してDetailsセクションを追加します。

作成したDetailsアイテムを右クリックし、Add、New itemの順にクリックします。

たとえば、ビデオ アイテムのFieldName、Width、Height、およびURLプロパティを設定するには、標準のフォーム要素で使用されているFieldNameアイテムを再利用できます。

「 FormTextBox Parameters」を検索してクリックし、名前(「Width」など)を入力して「 OK」をクリックします。

これらの手順を繰り返して、関連するすべてのアイテム (HeightアイテムやURLアイテムなど) を作成します。

Widthアイテムを開き、Formセクションに移動します。次のフィールドを編集します。

Detailsセクションで、次のフィールドのフィールド エディターを参照します。

ControlDefinitionsフィールドでFieldnameをクリックし、前に作成したWidth、Height、URLの各項目を選択します。

FormSectionテンプレートを使用してセクション項目を作成します。たとえば、Stylingという名前を付けます。

Styling項目を編集するには、Dataセクションで、次のフィールドを編集します。