--- title: "ウォークスルー:カスタムフォーム要素の作成" slug: "walkthrough--creating-a-custom-form-element" abstract: "カスタムフォーム要素の構築方法。" --- # ウォークスルー:カスタムフォーム要素の作成 Sitecoreフォームにはデフォルトのフォーム要素があり、フォームにドラッグできます。カスタムフォーム要素を作成するには、以下を作成します: - 新しいフィールドテンプレート。 - FieldViewModelクラス(整数フィールドや複数行テキストフィールドなどの[単純なフィールドタイプ](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/the-simple-field-types.html "The simple field types")の場合)から派生する新しいクラス、またはドロップダウンリストのような[リストフィールドタイプ](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/the-simple-field-types.html "The simple field types")に対してListViewModelクラスから派生する新しいクラスです。 - レイザービューファイル。 - razor viewファイルを使ってレンダリングを行うフィールドタイプのアイテムです。 また、要素に [カスタム検証を追加](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-custom-validation.html "Walkthrough: Creating custom validation") することもできます。 このウォークスルーでは、動画用のカスタムフォーム要素を作成する手順を説明します。以下の方法を説明しています: - フィールドテンプレートを作成する - 新しいクラスを作成する - Razor Viewファイルを作成する - フォーム要素のパネルのセクションを作成します - フィールドエディタパラメータの設定 - フィールドタイプの項目を作成する - オペレーター用のカスタムフィールドタイプを有効にする ## フィールドテンプレートを作成する 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ファイルを作成します: ![Video.cshtml razor view file.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-razor_view_file.png) 2. 先に作成した新しいクラスライブラリプロジェクトにrazor viewファイルを追加します。Sitecoreフォームのデフォルトのrazor viewファイルは以下のフォルダに保存されWebsite/Views/FormBuilder/FieldTemplates。例えば、Video.cshtmlファイルを*FormsDemo*フォルダに追加して保存します。 ![Views/FormBuilder/FieldTemplates.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Add_razor_to_class_library_project.png) ## フォーム要素のパネルのセクションを作成します > !注このウォークスルーの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンに対応しています。 フォーム要素のパネルに表示されるセクションを追加できます。例えば、単行テキスト要素には**詳細、****検証**、**スタイリング**、**詳細設定**のセクションが含まれています。 ![Single-line text form element.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-create-sections-forms-element-panel.png) この例では、ビデオ要素について、ユーザーがフィールド名、URL、幅、高さのプロパティを設定できるようにしたいのです。 フォーム要素ペインにセクションを追加するには: 1. Sitecore Rocksでコアデータベースを展開し、すべてのフィールドプロパティエディタのレイアウトパラメータが入っている*Settings*フォルダを右クリックします: /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings 2. 追加**をクリックしてから****「新しい項目**」をクリックしてください。 3. 「 **新しいアイテムを追加** 」ダイアログボックスで、*Form Parameters*テンプレートを検索してクリックし、名前を入力してください。例えば、*Video*、、そして**OK**をクリックします。 ![Add new item using Form parameters template](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Add-new-item.png) 4. 作成した*Video*アイテムを右クリックして「 **追加**、**新しいアイテム**」をクリックします。 5. カスタム要素の新しいセクションを追加するには、*FormSection*テンプレートを検索してクリックしてください。 > !注*FormSection*テンプレートはSpeakフォームのセクション可視化テンプレートであり、セクションやフィールドエディターのレンダリングパラメータを再利用できます。 6. 新しいアイテムの名前を入力し、「 **OK」**をクリックします。例えば、「 *Details* 」と入力すると **「詳細** 」セクションを追加できます。 ![Add new item for Details section](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Add-new-item-Formsection-template.png) 7. 作成した*Details*アイテムを右クリックして「 **追加**、**新しいアイテム**」をクリックします。 例えば、動画アイテムのFieldName、Width、Height、URLプロパティを設定するには、箱から出したフォーム要素で使われている*FieldName*アイテムを再利用できます。 8. **Search FormTextBox Parameters**をクリックし、名前(例えば幅)を入力して**OK**をクリックします。 ![FormTextBox parameters](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS_Add-new-item-FormTextBox-parameters.png) > !注Speak 2.0パラメータを選択してください。 9. これらの手順を繰り返して、例えばHeightやURL項目など、関連するすべての項目を作成します。 ![Elements in the Video item shown in the list view.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Add-the-sections-Height-URL-Width.png) ## フィールドエディタパラメータの設定 次に、新しく作成した各フィールドエディタのパラメータを設定する必要があります。例えば、ラベルのテキストや位置を設定することができます。 フィールドエディタのパラメータを設定するには: 1. *Width*項目を開き、**フォーム**のセクションに移動します。以下のフィールドを編集してください: - **FormLabel** – **フォーム要素** ペインに表示されるテキストボックスラベルを指定します。 - **IsLabelOnTop** – ラベルを入力の上に配置するオプションを選択してください。一貫性のために、すべてのフィールドエディタプロパティでこのチェックボックスを選択することをお勧めします。 - **BindingConfiguration** – FormDataプロパティ名と対応するコンポーネントのバインド可能プロパティを一覧にします。左のペインはフィールドモデルプロパティを指定します(プロパティ名はcamelCaseで表示されています)。右ペインはフィールドモデルプロパティを更新するためにどのエディタプロパティを読み取るかを指定します。 ![Binding configuration](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Form-BindingConfiguration.png) 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 ![Control definition](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Data-ControlDefinitions.png) ### フィールドタイプの項目を作成する フィールドエディターのパラメータを設定した後は、例えばカスタムフィールドタイプを作成して、フォームに動画を追加できます。 フィールドタイプ項目を作成するには: 1. フォルダ /sitecore/system/Settings/Forms/Field Types/Basic行って新しいアイテムを追加します。 2. /System/Forms/Field Typeテンプレートを基にアイテムを作成し、名前を入力して**挿入**をクリックします。例えば、*Video*。 3. **設定**セクションのフィールドを編集: - **View Path** – Razor Viewファイルに向かうパスを指定します。例えば、FormsDemo/Video。 - **モデルタイプ** – クラス名を参照するモデルタイプを指定します。例えば、FormsDemo.VideoViewModel,FormsDemo。 - **プロパティエディター** – 先に作成したアイテムを指します。例えば、*Video*アイテムのプロパティエディターを選択します。 ![Set allowed validations](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Settings-Property-Editor.png) 4. **外観**セクションでは、以下のフィールドを編集してください: - **アイコン** – **フォーム要素** のペインに表示されるアイコンを選択します。例えば、OfficeWhite/32x32/videotape.png. > \_Standard Values*のアイコンフィールド値を非白のOfficeテーマOffice/32x32/videotape.pngに対応するアイコンに設定してください* - **BackgroundColor** – **フォーム要素** パネルに表示されるアイコンの背景色を選択します。例えば、*Sky*。 5. **フィールドテンプレート**フィールドで、以前作成したフィールドテンプレートを指定します。例えば、sitecore/Templates/FormsDemo/Fields/Video。新しいフォームを作成すると、フォーム**要素**ペインでカスタムビデオ要素が利用可能になります: ![Video element in Form elements pane](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-Forms-elements-pane-new-video-element.png) ### オペレーター用のカスタムフィールドタイプを有効にする 新しいフィールドタイプに [条件付き論理を適用](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/use-conditional-logic-for-your-forms.html "Use conditional logic for your forms") したい場合は、まず該当する演算子で条件付けを有効にする必要があります。そうしないと、フィールドタイプの条件を編集すると演算子のリストが空になります。 カスタムフィールドタイプを登録するには: 1. マスターデータベースで、 /sitecore/system/Settings/Forms/Meta Data/Conditions/Operators ルートを開きます。 2. ツリーで更新したいオペレーターを選択します。 3. **「許可フィールドタイプ**」セクションで新しいフィールドを追加します。