--- title: "カスタムフォーム要素カテゴリを作成する" slug: "create-a-custom-form-element-category" abstract: "カスタム要素用のカスタムセクションを作成しましょう。" --- # カスタムフォーム要素カテゴリを作成する Sitecoreフォームには、フォーム作成時に使えるデフォルトのフォーム要素が付属しています。使いたい要素を簡単に見つけられるように、すべての要素はBasic、Lists、Structure、Securityなどのカテゴリに整理されています。 ![Form elements sections.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-elements-pane.PNG) これらの要素カテゴリを折りたたんだり展開したりできるので、利用可能なすべての要素を長々とスクロールする必要がなくなります。 [カスタムフォーム要素を作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-form-element.html "Walkthrough: Creating a custom form element")場合は、カスタムセクションも作成したいかもしれません。 ![Custom form elements section example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-custom-expander.PNG) **フォーム要素**のペインでカスタムセクションを作成するには: 1. [Sitecore Rocks](https://marketplace.visualstudio.com/items?itemName=JakobChristensen.SitecoreRocks)でコアデータベースを展開し、/sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/に行き、**右クリックでデザイン**、**タスク**をクリックし、次に**デザイン**レイアウトをクリックしてください。 2. **デザインレイアウト**ウィンドウで「**レンダリングを追加**」をクリックし、「**レンダリングを選択する**」ダイアログボックスで「エクスパンダーレンダリング」を見つけて**「追加**」をクリックします。 ![Design.layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-DesignLayout.PNG) ![Select Renderings dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-expander.png) 3. エクスパンダーレンダリングのプロパティウィンドウを開いて、IDを変更します。例えば、IDをExpanderCustomSectionに変更します。 4. カスタムセクションに他のセクションと同じスタイリングを与えるには、**Appearance**セクションで**VisualStyle**をContextPaneに設定してください。 ![Properties window of the Expander rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-custom-expander-styling.png) 5. **デザインレイアウト**ウィンドウで「**レンダリングを追加**」をクリックし、「**レンダリングを選択する**」ダイアログボックスでDraggableElementListレンダリングを見つけて**「追加**」をクリックします。 6. DraggableElementListレンダリングのプロパティウィンドウを開き、IDを変更します。例えば、IDをDraggableCustomに変更し、Placeholderを に更新します。ExpanderCustomSection.Body ![Renderings and Placeholders window](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-custom-expander-renderings.png) 7. DraggableElementList-Parametersテンプレートからカスタムアイテムを作成します。/sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design/に移動し、右クリックPageSettingsを押し、DraggableElementList-Parametersテンプレートに基づくアイテムを追加します。 アイテム名はDraggableElementListレンダリングのIDと同じでなければなりません。この例では: DraggableCustom。 8. DraggableElementListパラメータを編集してください。Databaseフィールドの値をmasterに設定し、StaticDataをmasterデータベースの/sitecore/system/Settings/Forms/Field Typesアイテムの下にあるカスタムフォルダのIDに設定します。DisplayFieldNameを$displayNameに更新してください。 > !注まだカスタムフィールドがない場合は、*Field Types*ノードの下にある既存のフォルダ(例えば*Basic*フォルダ({B5350D9A-CEEE-4D15-B9FF-797CEACCCDC7})をテスト目的で使用できます。 9. *Expander Parameter*テンプレートからカスタムアイテムを作成します。右クリックPage Settings *Expander Parameter*テンプレートに基づくアイテムを追加します。アイテム名がエクスパンダーのレンダリングと同じであることを確認し、この例ではExpanderCustomSection。 ![InfoTabControl structure tree](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-expander-custom.PNG) 10. エクスパンダーパラメータを編集してください。カスタムセクションに名前を付けるには、**HeaderText**フィールドを埋めて「 **IsVisible**」チェックボックスを選択してください。 これらの手順を実行すると、**フォーム要素** のパネルでカスタムセクションが表示されます。 ![Form elements pane](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-custom-expander.PNG)