ウォークスルー
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore Formsには、フォームにドラッグできるデフォルトのフォーム要素が含まれています。カスタムフォーム要素を作成するには、新しいフィールドテンプレート、FieldViewModelクラスから派生した新しいクラス、Razor Viewファイル、そしてそのファイルを使ってレンダリングを行うフィールドタイプアイテムを作成する必要があります。要素に追加設定が必要な場合は、プロパティエディターを追加することもできます。
このウォークスルーでは、jQuery Bar Ratingという既存のプラグインを使って評価コントロール要素を実装する方法を説明し、以下をカバーします:
- ファイルのダウンロードと準備
- フィールドタイプの項目を作成する
- Razor Viewファイルを作成します
ファイルのダウンロードと準備
jQuery Bar評価を扱うには:
-
サイトでは、ページ下までスクロールし、ダウンロードリンクをクリックしてください。
-
ファイルをダウンロードして解凍してください。
-
以下のファイルをコピーしてください:
- jquery.barrating.min.js
- jquery.barrating.min.js.map
-
sitecore modules/Web/ExperienceForms/scriptsに移動して*、バレーティング*フォルダを作成し、2つのファイルを貼り付けます。
-
sitecore modules/Web/ExperienceForms/cssに移動して*、バレーティング*フォルダとテーマフォルダを作成し、bars-1to10.cssファイルを貼り付けます。
!注異なるテーマを使うには、それらをcssフォルダに追加する必要があります。
-
コンテンツエディターで /sitecore/Templates/Systems/Forms/Formに移動し、コンテンツ タブの 「アドバンス 」セクションの 標準値 フィールドで _Standard値 項目(sitecore/Templates/System/Form/_Standard Values)を選択します。
-
コンテンツツリーで、_Standard値項目を選択し、コンテンツ タブの 設定 セクションの スクリプト フィールドで |barrating/jquery.barrating.min.jsを追加します。
-
フォームスクリプトやスタイルを読み込むには、外部のファイルレイアウトに設定する必要があります。したがって、 @Html.RenderFormStyles() 文と @Html.RenderFormScripts() 文を外側レイアウトに追加してください。
@using Sitecore.Mvc @using Sitecore.ExperienceForms.Mvc.Html @using Sitecore.Mvc.Analytics.Extensions
@{ Layout = null; }
@Html.Sitecore().VisitorIdentification() @Html.RenderFormStyles() @Html.RenderFormScripts() @RenderBody()
フィールドタイプの項目を作成する
Sitecoreのアイテムは各フォーム要素を定義します。フォーム要素のペインにカスタム要素を表示するには、新しいアイテムを作成する必要があります。新しいアイテムを作成したり、既存のアイテムを複製したりできます。
jQueryバー評価プラグインはselectフィールドを使用しているため、リスト要素をベースに使うのが便利です。
既存の項目を複製してフィールドタイプアイテムを作成する方法:
- フォルダ /sitecore/System/Settings/Forms/Field Types/Lists 行き、 ドロップダウンリスト の項目を右クリックして **「複製」**をクリックします。
- アイテム名と表示名を Ratingに変更してください。
- 外観セクションでは、以下のフィールドを編集してください:
-
アイコン – フォーム要素ペインに表示されるアイコンを選択します。例えば、OfficeWhite/32x32/star.png。
!注コンテンツエディターに表示されるアイコンを設定するには、標準フィールドのチェックボックスが選択されていることを確認してください。
-
BackgroundColor – フォーム要素パネルに表示されるアイコンの背景色を選択します。例えば、Grass。
-
ソートオーダー – 評価要素をフォーム要素パネルのリストセクションの最後に表示させるには、ソート順を1200に設定してください。
!注期待通りのフィールドが見つからない場合は、リボンの「ビュー」タブで「標準フィールド」チェックボックスを選択してください。これにより、開いたすべてのアイテムに標準テンプレートのすべてのフィールドが表示されます。
-
Razor Viewファイルを作成します
次のステップは、Razor Viewファイルを作成することです:
-
Website/Views/FormBuilder/FieldTemplates/Samplesに移動して、新しいカミソリファイル「Rating.cshtml」を作成します。
-
コードを追加してください。例えば、評価要素について:
@using Sitecore.ExperienceForms.Mvc.Html @model Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel
!-- reference the bar rating css theme file --
!-- initialize the bar rating plugin --
!-- the element definition for the rating -- @Html.ValidationMessageFor(m => Model.Value)
-
新しい評価フィールドをレイザービューファイルに指すには、/sitecore/System/Settings/Forms/Field Types/Lists/Ratingに移動し、View Pathフィールドにレイザービューファイルの場所を追加します。この例ではFieldTemplates/Samples/Rating。
評価要素はフォーム要素のパネルで利用可能になりました。
