---
title: "ウォークスルー:カスタム評価要素の作成"
slug: "walkthrough--creating-a-custom-rating-element"
abstract: "「評価」という新しいフォーム要素の作成方法。"
---
# ウォークスルー:カスタム評価要素の作成

Sitecore Formsには、フォームにドラッグできるデフォルトのフォーム要素が含まれています。カスタムフォーム要素を作成するには、新しいフィールドテンプレート、FieldViewModelクラスから派生した新しいクラス、Razor Viewファイル、そしてそのファイルを使ってレンダリングを行うフィールドタイプアイテムを作成する必要があります。要素に追加設定が必要な場合は、プロパティエディターを追加することもできます。

このウォークスルーでは、[jQuery Bar Rating](http://antenna.io/demo/jquery-bar-rating/examples/)という既存のプラグインを使って評価コントロール要素を実装する方法を説明し、以下をカバーします:

-   ファイルのダウンロードと準備
-   フィールドタイプの項目を作成する
-   Razor Viewファイルを作成します

## ファイルのダウンロードと準備

jQuery Bar評価を扱うには:

1.  行って 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に移動して*、バレーティング*フォルダを作成し、2つのファイルを貼り付けます。
    
6.  sitecore modules/Web/ExperienceForms/cssに移動して*、バレーティング*フォルダとテーマフォルダを作成し、*bars-1to10.css*ファイルを貼り付けます。
    
    ![Bar rating .css file shown in the tree view](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-barrating.png)
    
    > !注異なるテーマを使うには、それらをcssフォルダに追加する必要があります。
    
7.  コンテンツエディターで /sitecore/Templates/Systems/Forms/Formに移動し、**コンテンツ** タブの **「アドバンス** 」セクションの **標準値** フィールドで **\_Standard値** 項目(sitecore/Templates/System/Form/\_Standard Values)を選択します。
    
8.  コンテンツツリーで、\_Standard値項目を選択し、**コンテンツ** タブの **設定** セクションの **スクリプト** フィールドで |barrating/jquery.barrating.min.jsを追加します。
    
    ![Scripts field on the Content tab](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/CustomRatingElementScriptField.png)
    
9.  フォームスクリプトやスタイルを読み込むには、外部のファイルレイアウトに設定する必要があります。したがって、 @Html.RenderFormStyles() 文と @Html.RenderFormScripts() 文を外側レイアウトに追加してください。
    
    @using Sitecore.Mvc
    @using Sitecore.ExperienceForms.Mvc.Html
    @using Sitecore.Mvc.Analytics.Extensions
    
    @{
     Layout = null;
    }
    
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
     @Html.Sitecore().VisitorIdentification()
     @Html.RenderFormStyles()
     @Html.RenderFormScripts()
    </head>
    <body>
     @RenderBody()
    </body>
    </html>

## フィールドタイプの項目を作成する

Sitecoreのアイテムは各フォーム要素を定義します。フォーム要素のペインにカスタム要素を表示するには、新しいアイテムを作成する必要があります。新しいアイテムを作成したり、既存のアイテムを複製したりできます。

jQueryバー評価プラグインはselectフィールドを使用しているため、リスト要素をベースに使うのが便利です。

既存の項目を複製してフィールドタイプアイテムを作成する方法:

1.  フォルダ /sitecore/System/Settings/Forms/Field Types/Lists 行き、 **ドロップダウンリスト** の項目を右クリックして **「複製」**をクリックします。
2.  アイテム名と表示名を *Rating*に変更してください。
3.  **外観**セクションでは、以下のフィールドを編集してください:
    -   **アイコン** – フォーム要素ペインに表示されるアイコンを選択します。例えば、*OfficeWhite/32x32/star.png*。
        
        > !注コンテンツエディターに表示されるアイコンを設定するには、標準フィールドのチェックボックスが選択されていることを確認してください。
        
    -   **BackgroundColor** – フォーム要素パネルに表示されるアイコンの背景色を選択します。例えば、*Grass*。
        
    -   **ソートオーダー** – 評価要素をフォーム要素パネルのリストセクションの最後に表示させるには、ソート順を*1200*に設定してください。
        
        > !注期待通りのフィールドが見つからない場合は、リボンの「ビュー」タブで「標準フィールド」チェックボックスを選択してください。これにより、開いたすべてのアイテムに標準テンプレートのすべてのフィールドが表示されます。
        

## Razor Viewファイルを作成します

次のステップは、Razor Viewファイルを作成することです:

1.  Website/Views/FormBuilder/FieldTemplates/Samplesに移動して、新しいカミソリファイル「Rating.cshtml」を作成します。
    
2.  コードを追加してください。例えば、評価要素について:
    
    @using Sitecore.ExperienceForms.Mvc.Html
    @model Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel
    
    !-- reference the bar rating css theme file --
    <link rel="stylesheet" href="/sitecore modules/Web/ExperienceForms/css/barrating/themes/bars-1to10.css"/>
    
    !-- initialize the bar rating plugin --
    <script type="text/javascript">
     $(function()
     {
     var $el = $("#@Html.IdFor(m => Model.Value)");
     if (typeof $el.barrating === "function")
     {$el.barrating({
     theme: "bars-1to10",
     showValues: false,
     showSelectedRating: true,
     reverse: false,
     deselectable: @((Model.ShowEmptyItem && !Model.Required).ToString().ToLowerInvariant()),
     allowEmpty: @Model.ShowEmptyItem.ToString().ToLowerInvariant(),
     hoverState: true
     });
     }
     });
    </script>
    
    !-- the element definition for the rating --
    <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
    <select id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name"> @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)
     @if (Model.ShowEmptyItem)
     {
     <option label=""></option>
     }@foreach (var item in Model.Items)
     {
     <option value="@item.Value" selected="@item.Selected">@item.Text</option>
     }
    </select>
    @Html.ValidationMessageFor(m => Model.Value)
    
3.  新しい評価フィールドをレイザービューファイルに指すには、/sitecore/System/Settings/Forms/Field Types/Lists/Ratingに移動し、**View Path**フィールドにレイザービューファイルの場所を追加します。この例ではFieldTemplates/Samples/Rating。
    
    評価要素はフォーム要素のパネルで利用可能になりました。
    
    ![Lists in the Form elements pane](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-rating-element.png)