カスタムフォーム要素の作成方法

Sitecore Formsでフォーム要素の作成方法を紹介します。今回はhtmlテキストを入力できるフォーム要素を作成します。

1.フィールドテンプレートの作成

/sitecore/templates/System/Forms/Fields配下にHTMLTextテンプレートを作成
/sitecore/templates/System/Forms/Fieldsを右クリック、テンプレート名「HTMLText」、ベーステンプレートを「Templates/System/Forms/Fields/Field」を選択
保存するフォルダーにsitecore/templates/System/Forms/Fieldsを選択
「Field Elements」フィールドセクション、「HTML Text」フィールド、RichTextタイプを選択
リボンのOptionsタブ内のStandard valuesをクリックして、Standard valuesを作成

2.クラスの作成

HTMLTextModel.cs

            using System;
            using Sitecore.Data.Items;
            using Sitecore.ExperienceForms.Mvc.Models.Fields;
            using Sitecore;

            namespace samplesite.Common.Feature.Custom.CustomForms
            {
                [Serializable]
                public class HTMLTextModel : FieldViewModel
                {
                    public string HTMLText { get; set; }

                    protected override void InitItemProperties(Item item)
                    {
                        base.InitItemProperties(item);

                        HTMLText = StringUtil.GetString(item.Fields[Constants.HTMLTextConstant.HTMLText]);
                    }

                    protected override void UpdateItemFields(Item item)
                    {
                        base.UpdateItemFields(item);

                        item.Fields[Constants.HTMLTextConstant.HTMLText]?.SetValue(HTMLText, true);
                    }
                }
            }

HTMLTextConstant.cs

            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web;

            namespace samplesite.Common.Feature.Custom.CustomForms
            {
                public partial class Constants
                {
                    public class HTMLTextConstant
                    {
                        public const string HTMLText = "HTML Text";
                    }
                }

            }

HTMLTextView.cshtml

            @model samplesite.Common.Feature.Custom.CustomForms.HTMLTextModel

            @Html.Raw(Model.HTMLText)

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

coreDBに切り替えて「/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings」配下に新規アイテムを作成、新規で作成できない場合は既存のものを高度な複製をする。今回はTextを高度な複製して作成
/sitecore/system/Settings/Forms/Field Types/Basicに新しいアイテムを追加
SettingsセクションのView Path、Model Type、Property Editorフィールドを作成したクラス、アイテムに設定する
- View Path：CustomFields/HTMLTextView
- Model Type ：samplesite.Common.Feature.Custom.CustomForms.HTMLTextModel,samplesite.Common.Feature.Custom
- Property Editor：プロパティエディター設定/Custom/HTMLText