ウォークスルー

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

このウォークスルーでは評価要素の例を使用しています。ローカルインストールで手順を実行するには、ソースファイルをダウンロードして準備する必要があります。

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/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().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. /// 
   /// <seealso cref="Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel" /> 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に移動して モデルタイプ フィールドに入力してください

   .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.DisplayTextFor(t => Model.Title)

   <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)

       {

      

       }@foreach (var item in Model.Items)

       {

      

           @item.Text

      

       }

   @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クラスのバインディングを追加したため、ここで削除しなければなりません。