---
title: "ウォークスルー:プロパティエディターでカスタム評価要素を作成する方法"
slug: "walkthrough--creating-a-custom-rating-element-with-property-editor"
abstract: "既存のプラグインを実装し、追加のプロパティを設定しましょう。"
---
# ウォークスルー:プロパティエディターでカスタム評価要素を作成する方法
Sitecoreフォームには、フォームにドラッグ&ドロップできるデフォルトのフォーム要素が含まれています。このウォークスルーでは、[既存のプラグインjQuery Bar Rating](http://antenna.io/demo/jquery-bar-rating/examples/)を使ってカスタム評価コントロール要素を実装する方法と、追加プロパティの設定方法を説明しています。このウォークスルーに従うと、設定オプション付きの評価要素が完成しました:
このウォークスルーでは、以下の方法を説明します:
- [ソースファイルのダウンロードと準備](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809310464 "Download and prepare the source files")
- [フィールドタイプの項目を作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809343112 "Create the field type item")
- [新しいフィールドテンプレートを作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809327839 "Create a new field template")
- [新しいクラスを作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809357641 "Create a new class")
- [Razor Viewファイルを作成します](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809409441 "Create the razor view file")
- [プロパティエディターを作成する](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/walkthrough--creating-a-custom-rating-element-with-property-editor.html#UUID-c54e3f46-2f36-15b6-f341-df00f33e3068_N1528809387793 "Create the property editor")
## ソースファイルのダウンロードと準備
このウォークスルーでは評価要素の例を使用しています。ローカルインストールで手順を実行するには、ソースファイルをダウンロードして準備する必要があります。
jQuery Bar評価を扱うには:
1. http://antenna.io/demo/jquery-bar-rating/examples/ へナビゲート*[](http://antenna.io/demo/jquery-bar-rating/examples/)*
2. サイトでは、ページ下までスクロールし、ダウンロードリンクをクリックしてください。
3. ファイルをダウンロードして解凍してください。
4. 以下のファイルをコピーしてください:
- jquery.barrating.min.js
- jquery.barrating.min.js.map
5. Sitecore modules/Web/ExperienceForms/scripts/barratingに移動してファイルを貼り付けます。
6. ダウンロードした*jquery-bar-rating-master/themes*フォルダにアクセスし、テーマをコピーしてください。
7. *barrating*フォルダ内に*themes*フォルダを作成し、*barrating/themes*フォルダを貼り付けます:
8. コンテンツエディターで、*/sitecore/templates/Systems/Forms/Form*に移動して **\_Standard値** 項目を選択してください。
9. **設定**セクションのスクリプト欄で、追加**してください**|barrating/jquery.barrating
10. フォームスクリプトやスタイルを読み込むには、外部のファイルレイアウトに設定する必要があります。したがって、@Html.RenderFormStyles() 文と @Html.RenderFormScripts() 文を外側レイアウトに追加してください。
@using Sitecore.Mvc
@using
Sitecore.ExperienceForms.Mvc.Html
@using
Sitecore.Mvc.Analytics.Extensions
@{
Layout = null;
}
@Html.Sitecore().Field("title", new {
DisableWebEdit = true })
@Html.Sitecore().VisitorIdentification()
@Html.RenderFormStyles()
@Html.RenderFormScripts()
@RenderBody()
## フィールドタイプの項目を作成する
Sitecoreのアイテムは各フォーム要素を定義します。フォーム要素のペインにカスタム要素を表示するには、新しいアイテムを作成する必要があります。新しいアイテムを作成したり、既存のアイテムを複製したりできます。jQueryバー評価プラグインはselectフィールドを使用しているため、リスト要素をベースにするのが便利です。
ドロップダウンリスト要素と同様に、jQuery Bar Ratingプラグインは選択フィールドを使用します:
既存の項目を複製してフィールドタイプアイテムを作成する方法:
1. */sitecore/system/Settings/Forms/Field Types/Lists*フォルダに移動し、ドロップダウンリストの項目を右クリックして「**複製**」をクリックします。
2. アイテム名と表示名を「評価」に変更してください。
3. **外観**セクションでは、以下のフィールドを編集してください:
- **アイコン** – フォーム要素ペインに表示されるアイコンを選択します。例えば、 *OfficeWhite/32x32/star.png*。
- **BackgroundColor** – フォーム要素パネルに表示されるアイコンの背景色を選択します。例えば、 *Grass*。
- **ソートオーダー** – 評価要素をフォーム要素パネル **のリストセクションの** 最後に表示させるには、ソート順を *1200*に設定してください。
> !注フィールドが期待通りに表示されない場合は、リボンの「ビュー」タブで「標準フィールド」チェックボックスを選択してください。これにより、開いたすべてのアイテムに標準テンプレートのすべてのフィールドが表示されます。
## 新しいフィールドテンプレートを作成する
Sitecoreテンプレートはフォーム要素を定義します。この例では、追加のプロパティを設定するには、Rating要素の新しいフィールドテンプレートを作成し、それらのプロパティを定義する必要があります。
テンプレートを追加するには:
1. コンテンツエディター Sitecoreで*sitecore/Templates*に移動して新しいフォルダを作成します。例えば、*Fields*フォルダです。
2. 新しいフォルダをクリックしてから **「新しいテンプレート**」をクリックします。
3. 名前を入力し*Rating*、**ドロップダウンリスト** をベーステンプレートとして選択し、**次へ**をクリックします。
4. 新しいテンプレートをクリックし、**ビルダー** タブで「 *Options*」というセクションを追加します。例えば、評価要素の設定を追加するには、以下のチェックボックスを追加してください:
- ショーの価値観
- 番組 選定評価
- 裏面
- ホバーステート
5. テンプレートを保存してください。
6. **コンテンツタブの外観****セクションで、アイコン***フィールドの値をOffice/32x32/star.pngに設定します*
7. リボンのオプションタブで**「****標準値**」をクリックします。
8. *Options*セクションで「**選択済み評価**」と**「ホバー状態**の表示」チェックボックスを選択します。つまり、これらのプロパティはデフォルトでチェックされます。
9. フィールド **タイプ** フィールドでフィールドタイプを*Rating*に変更します。
10. 「 **フィールドアイテムを作成** 」セクションで作成した評価項目にアクセスし、フィールドテンプレートの値を*Rating*に設定します。
## 新しいクラスを作成する
今では、FieldViewModelクラスから派生した新しいクラスを作成することでViewモデルのロジックを作成できます。フォーム要素の表示方法をHTMLの配置や独自のCSSクラスの挿入で制御できます。
新しいクラスを追加すると:
1. Visual Studioで新しいクラスライブラリプロジェクトを作成します。例えば、*Sitecore。ExperienceForms.サンプル*。
2. Sitecore.ExperienceForms.Mvcの組み立てを参照してください。
3. RatingViewModelクラスを加えましょう。
4. 継承DropDownListViewModelとクラスのマーク*Serializable*。
///
/// Defines the rating view model.
///
///
Serializable
public class RatingViewModel : DropDownListViewModel
{
}
5. *Models*フォルダで新しいFieldNamesクラスを作成し、設定したい各プロパティごとに定数を定義します。
public static class FieldNames
{
public const string ShowValues = "Show
Values";
public const string ShowSelectedRating =
"Show Selected Rating";
public const string Reverse =
"Reverse";
public const string HoverState =
"Hover State";
}
6. 評価テンプレート内の各フィールドに対して、RatingViewModelクラスでプロパティを作成します。
///
/// Gets or sets a value
indicating whether the rating texts will be displayed on the bars.
///
public bool ShowValues { get;
set; }
///
/// Gets or sets a value
indicating whether the selected rating text will be displayed next to the
control.
///
public bool ShowSelectedRating
{ get; set; }
///
/// Gets or sets a value
indicating whether the ratings will be reversed.
///
public bool Reverse { get;
set; }
///
/// Gets or sets a value
indicating whether the control changes state on hover.
///
public bool HoverState { get;
set; }
7. フィールド値を読みたい場合は、RatingViewModel クラスでInitItemPropertiesをオーバーライドします。
///
/// Initializes the model properties from the .
///
/// The item.
protected override void InitItemProperties(Item item)
{
Assert.ArgumentNotNull(item, nameof(item));
base.InitItemProperties(item);
ShowValues = MainUtil.GetBool(item.FieldsFieldNames.ShowValues?.Value, false);
ShowSelectedRating = MainUtil.GetBool(item.FieldsFieldNames.ShowSelectedRating?.Value, false);
Reverse = MainUtil.GetBool(item.FieldsFieldNames.Reverse?.Value, false);
HoverState = MainUtil.GetBool(item.FieldsFieldNames.HoverState?.Value, false);
}
8. 場の値を保存するには、UpdateItemFieldsを上書きしてください。
///
/// Updates the fields using the model properties.
///
/// The item.
protected override void UpdateItemFields(Item item)
{
Assert.ArgumentNotNull(item, nameof(item));
base.UpdateItemFields(item);
item.FieldsFieldNames.ShowValues?.SetValue(ShowValues ? "1" : string.Empty, true);
item.FieldsFieldNames.ShowSelectedRating?.SetValue(ShowSelectedRating ? "1" : string.Empty, true);
item.FieldsFieldNames.Reverse?.SetValue(Reverse ? "1" : string.Empty, true);
item.FieldsFieldNames.HoverState?.SetValue(HoverState ? "1" : string.Empty, true);
9. To reference the new Rating view model in the Rating field type, navigate to
9. 新しい評価ビューモデルをレーティングフィールドタイプで参照するには、*/sitecore/system/Settings/Forms/Field Types/Lists/Rating*に移動して **モデルタイプ** フィールドに入力してください:Sitecore.ExperienceForms.Samples.Models.RatingViewModel,Sitecore.ExperienceForms.Samples
## Razor Viewファイルを作成します
次のステップは、Razor Viewファイルを作成することです:
1. *Website/Views/FormBuilder/FieldTemplates/Samples*に移動して、新しいカミソリファイル「Rating.cshtml」を作成します。
2. コードを追加してください。例えば、評価要素について:
@using
Sitecore.ExperienceForms.Mvc.Html
@model Sitecore.ExperienceForms.Samples.Models.RatingViewModel
@if
(!string.IsNullOrEmpty(Model.CssClass))
{
var themePath = "/sitecore
modules/Web/ExperienceForms/css/barrating/themes/" + Model.CssClass +
".css";
var allowEmpty =
Model.ShowEmptyItem.ToString().ToLowerInvariant();
var deselectable = (Model.ShowEmptyItem
&& !Model.Required).ToString().ToLowerInvariant();
}
@Html.ValidationMessageFor(m
=> Model.Value)
3. 新しい評価フィールドをレイザービューファイルに指すには、*/sitecore/system/Settings/Forms/Field Types/Lists/Rating*に移動し、**ビューパス** フィールドでレイザービューファイルの場所を追加してください。この例では、*FieldTemplates/Samples/Rating*
## プロパティエディターを作成する
今では、フォーム要素のパネルに表示されるセクションを追加できます。この例の単行テキスト要素には、**詳細、検証、スタイリング、****詳細**設定のセクションが含まれています。
> !注このウォークスルーの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンに対応しています。
この例では、Rating要素をドロップダウンリスト要素に基づいて作成し、すでに存在するプロパティエディターを複製します。
フォーム要素ペインにセクションを追加するには:
1. Sitecore Rocksでコアデータベースを展開し、*/sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/DropDownList*
2. アイテムを複製し、名前を*Rating*に変更します。
> !注ドロップダウンリスト要素には、プロパティエディターのList Itemsエクスパンダーでコントロールを定義する子項目が含まれています。複製後、Rating/ListItemsはControlsDefinitionsフィールドの値にあるDropDownList/ListItemsを参照します。コントロールラベルをカスタマイズしたり、ドロップダウンリストデザイナーからレーティングデザイナーを切り離すには、ControlsDefinitionフィールドの値を重複した子アイテムのIDで更新できます。
3. スタイリング項目を右クリックし、「 **追加** 」をクリックして「 **新しいアイテム**」をクリックします。
4. 「新しいアイテムを追加」ダイアログボックスで、フォームパラメータテンプレートを検索して選択してください。
5. 「追加」を3回クリックして、アイテム名を入力してください: **ShowValues、ShowSelectedRating、HoverState、Reverse**。
6. **スタイリング**セクションで**ShowValues**項目をダブルクリックし、以下のフィールドを編集してください:
- **ラベル** – チェックボックスを入力 ラベル 値表示
- **IsLabelOnTop** – スタイリングの一貫性を確保するために選択。
- **BindingConfiguration** – enter *showValues*
> !注オプションでヘルプテキストの情報を入力することもできます。
7. 他の3つのチェックボックスパラメータ項目の値はそれに応じて設定します。
8. 次に、**ControlDefinitions**フィールドに作成されたアイテムのIDを含める必要があります。 */sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/Rating/Styling*に移動し、以前に作成したアイテムを追加します
9. 最後に、新しいプロパティエディターを評価欄項目で参照してください。/sitecore/system/設定/フォーム/フィールドタイプ/リスト/評価項目に移動し、プロパティエディターの欄で評価プロパティエディターを選択します。
評価要素は現在、フォーム要素のパネルで利用可能になりました:
評価要素をフォームキャンバスにドラッグすると、新しいスタイリングオプションが利用可能になります:
## オプション:テーマ用にもう一つのプロパティエディターを追加する
先に追加したバー評価プラグインのテーマは、CSSクラスフィールドでクラスを入力すると利用可能です。テーマをドロップダウンボックスから表示したい場合は、評価プロパティエディターに別のコントロールを追加できます。タスクの概要を簡単に説明します:
1. *ListItem*テンプレートを使い、10のテーマごとに10個のアイテムを追加します。
2. アイテムを編集し、*Value*欄に評価テーマ名を入力してください。
3. *FormSection*スタイルの調整:
- *FormDropList*パラメータテンプレートを使って子項目テーマを追加してください
- *StaticData* - *RatingThemes*フォルダーのIDを入力
- *ValueFieldName* - 価値
- *FormLabel* - テーマ
- *IsLabelOnTop* - 選ばれ
- *BindingConfiguration* - cssClassプロパティ
4. *ControlDefinitions*フィールドで新しいテーマを参照してください。Styling FormSectionにCSSクラスのバインディングを追加したため、ここで削除しなければなりません。
