ウォークスルー

フィールドテンプレートを作成する

Sitecoreテンプレートはフォーム要素を定義します。新しい要素を作成するには、まずフィールドテンプレートを作成します。

フィールドテンプレートを作成するには:

1. コンテンツエディターで sitecore/Templates に移動し、新しいフォルダ(例えば Fieldsというフォルダ)を作成します。
2. コンテンツツリーで新しいフォルダをクリックし、 フォルダタブで 「 新しいテンプレート」をクリックします。
3. 「名前選択」ページの「名前」欄でテンプレートの名前を入力し、ベーステンプレート欄で「フィールドテンプレート(Templates/System/Forms/Fields/Field)」を選択し、「次へ」をクリックします。
4. ロケーションページで、テンプレートを保存したいフォルダを選択し、「次へ」をクリックし、「閉じる」をクリックしてください。
5. コンテンツツリーで新しいテンプレートを選択し、 ビルダー タブをクリックします。
6. 以下のテンプレートフィールドを追加します:
   • URL(単行テキスト)
   • 幅(整数)
   • 高さ(整数)
7. 各テンプレートフィールドの「データ」セクションの**「コンテンツ**」タブで「共有」チェックボックスを選択し、「メッセージ」ダイアログで変更を確認します。
8. コンテンツツリーで新しいテンプレートをクリックし、リボンの上で オプション タブをクリックし、その後標準 値をクリックします。
9. リボン上で 「保存 」をクリックしてテンプレートを保存します。

!注フィールドテンプレートの標準値を作成することが重要です。なぜなら、標準値はフォーム要素パネルからフォームキャンバスに追加する際にデフォルトのフィールド値として使われるからです。フィールドテンプレートに標準値がない場合、その要素をフォームにドロップすることはできません。

新しいクラスを作成する

次に、ビューモデルのロジックを作成し、FieldViewModelクラスから派生する新しいクラスを作成します。既存のフォーム要素をカスタマイズし、その機能を拡張してカスタム要素を作成するには、対応する要素クラスから継承する必要があります。例えば、新しいリスト要素を作成したい場合は、ListViewModelクラスから継承することができます。

!注フォーム要素の表示方法は、HTMLを配置し、自分でCSSクラスを挿入することでコントロールできます。

新しいクラスを追加すると:

1. Visual Studioでは、新しいクラスライブラリプロジェクト(例: FormsDemo)を作成します。

2. FieldViewModelクラスを加えます。例えば、VideoViewModelクラスを加えます。

   public class VideoViewModel : FieldViewModel

   !注投稿されたフィールドのモデルはセッション状態に保存されます。保存するにはSerializableマークが必要です。

3. プロパティを加えます。例えば、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); }

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

5. プロジェクトを構築し、FormsDemo.dllをSitecoreウェブサイトのbinフォルダにデプロイします。

Razor Viewファイルを作成する

新しいクラスを作成した後、次のステップはrazor viewファイルを作成し、テンプレートをフォームに埋め込むことです。この例ではビデオ要素です。

Razor Viewファイルを作成するには:

1. 例えば、ビデオ要素については、Video.cshtml razor viewファイルを作成します:

   

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

   

フォーム要素のパネルのセクションを作成します

!注このウォークスルーの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンに対応しています。

フォーム要素のパネルに表示されるセクションを追加できます。例えば、単行テキスト要素には**詳細、**検証、スタイリング、詳細設定のセクションが含まれています。

この例では、ビデオ要素について、ユーザーがフィールド名、URL、幅、高さのプロパティを設定できるようにしたいのです。

フォーム要素ペインにセクションを追加するには:

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

2. 追加をクリックしてから****「新しい項目」をクリックしてください。

3. 「 新しいアイテムを追加 」ダイアログボックスで、Form Parametersテンプレートを検索してクリックし、名前を入力してください。例えば、Video、、そしてOKをクリックします。

   

4. 作成したVideoアイテムを右クリックして「 追加、新しいアイテム」をクリックします。

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

   !注FormSectionテンプレートはSpeakフォームのセクション可視化テンプレートであり、セクションやフィールドエディターのレンダリングパラメータを再利用できます。

6. 新しいアイテムの名前を入力し、「 **OK」**をクリックします。例えば、「 Details 」と入力すると 「詳細 」セクションを追加できます。

   

7. 作成したDetailsアイテムを右クリックして「 追加、新しいアイテム」をクリックします。

   例えば、動画アイテムのFieldName、Width、Height、URLプロパティを設定するには、箱から出したフォーム要素で使われているFieldNameアイテムを再利用できます。

8. Search FormTextBox Parametersをクリックし、名前(例えば幅)を入力してOKをクリックします。

   

   !注Speak 2.0パラメータを選択してください。

9. これらの手順を繰り返して、例えばHeightやURL項目など、関連するすべての項目を作成します。

   

フィールドエディタパラメータの設定

次に、新しく作成した各フィールドエディタのパラメータを設定する必要があります。例えば、ラベルのテキストや位置を設定することができます。

フィールドエディタのパラメータを設定するには:

1. Width項目を開き、フォームのセクションに移動します。以下のフィールドを編集してください:

   • FormLabel – フォーム要素 ペインに表示されるテキストボックスラベルを指定します。

   • IsLabelOnTop – ラベルを入力の上に配置するオプションを選択してください。一貫性のために、すべてのフィールドエディタプロパティでこのチェックボックスを選択することをお勧めします。

   • BindingConfiguration – FormDataプロパティ名と対応するコンポーネントのバインド可能プロパティを一覧にします。左のペインはフィールドモデルプロパティを指定します(プロパティ名はcamelCaseで表示されています)。右ペインはフィールドモデルプロパティを更新するためにどのエディタプロパティを読み取るかを指定します。

     

2. 詳細セクションでは、以下のフィールドエディタを参照してください:

   • ConfigurationItem – Speak Expanderのパラメータを指定します。 DetailsExpander アイテムは以下で再利用できます: sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Sections
   • ControlDefinitions – Form要素 パネルに表示されるフィールドエディタを参照順に指定してください。 Fieldname アイテムは以下で再利用できます: /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Details

3. ControlDefinitionsフィールドで**「Fieldname**」をクリックし、先に作成したWidth、Height、URL項目を選択します。

   !ヒント他の編集者から既に設定したセクションをコピー・修正できます。

4. 例えば、FormSectionテンプレートを使ってセクションアイテムを作成し、名前をStylingしてください。

5. Styling項目を編集するには、データセクションで以下のフィールドを編集してください:

   • ConfigurationItem – スタイリングエクスパンダーへの参照を追加してください: /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Sections/StylingExpander

   • ControlDefinitions – CSSクラスへの参照を追加してください: /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Styling/CssClass