Sitecore Formsのチュートリアル

Sitecoreエクスペリエンスマネージャー
Sitecoreフォーム
Sitecore Formsのチュートリアル
チュートリアル: プロパティエディターを使用したカスタム評価要素の作成

チュートリアル: プロパティエディターを使用したカスタム評価要素の作成

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore Formsには、フォームにドラッグアンドドロップできるデフォルトのフォーム要素が含まれています。このチュートリアルでは、jQuery Bar Ratingという既存のプラグインを使用してカスタム評価制御要素を実装する方法と、追加のプロパティを設定する方法について説明します。このチュートリアルに従うと、設定オプションを持つ評価要素が作成されます。

Styling section of the Form elements pane

このチュートリアルでは、次の方法について説明します。

ソースファイルをダウンロードして準備する

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

jQueryバーの評価を操作するには:

に移動します http://antenna.io/demo/jquery-bar-rating/examples/
サイトで、ページの一番下までスクロールし、ダウンロードリンクをクリックします。
ファイルをダウンロードして解凍します。
次のファイルをコピーします。
- jquery.barrating.min.js
- jquery.barrating.min.js.map
Sitecore modules/Web/ExperienceForms/scripts/barratingに移動し、ファイルを貼り付けます。
ダウンロードしたjquery-bar-rating-master/themesフォルダーに移動し、テーマをコピーします。
barratingフォルダーにthemesフォルダーを作成し、barrating/themesフォルダーを貼り付けます。
コンテンツエディターで、/sitecore/templates/Systems/Forms/Formに移動し、_Standard valuesアイテムを選択します。
Settings セクションのScripts フィールドに、|barrating/jquery.barrating

フォームスクリプトとスタイルをロードするには、それらが外部ファイルレイアウトにある必要があります。したがって、@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バー評価プラグインは選択フィールドを使用するため、リスト要素をベースとして使用すると便利です。

ドロップダウンリスト要素と同様に、jQuery Bar Ratingプラグインは選択フィールドを使用します。

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

/sitecore/system/Settings/Forms/Field Types/Listsフォルダーに移動し、ドロップダウンリスト項目を右クリックして、Duplicateをクリックします。
アイテムと表示名の名前を「Rating」に変更します。
Appearanceセクションで、次のフィールドを編集します。
- Icon – フォーム要素ペインに表示されるアイコンを選択します。たとえば、OfficeWhite/32x32/star.png.
- BackgroundColor – フォーム要素ペインに表示されるアイコンの背景色を選択します。たとえば、Grass.
- Sortorder – フォーム要素ペインのListセクションで評価要素の最後に表示するには、並べ替え順序を1200に設定します。
メモ

フィールドが期待どおりに表示されない場合は、リボンのViewタブで、Standard Fieldsチェックボックスをオンにします。これにより、開いたすべてのアイテムの標準テンプレートのすべてのフィールドが表示されます。

新しいフィールドテンプレートの作成

Sitecoreテンプレートはフォーム要素を定義します。この例では、追加のプロパティを設定するには、Rating要素の新しいフィールドテンプレートを作成して、それらのプロパティを定義する必要があります。

テンプレートを追加するには:

Sitecoreコンテンツエディターで、sitecore/Templatesに移動し、新しいフォルダーを作成します。たとえば、Fields フォルダーなどです。
新しいフォルダをクリックし、New Templateをクリックします。
名前Ratingを入力し、Dropdown Listを基本テンプレートとして選択して、「 Next」をクリックします。
新しいテンプレートをクリックし、BuilderタブでOptionsというセクションを追加します。たとえば、評価要素の設定を追加するには、次のチェックボックスを追加します。
- 値を表示
- 選択した評価を表示
- 逆
- ホバー状態
テンプレートを保存します。
コンテンツタブのAppearanceセクションで、Iconフィールドの値をOffice/32x32/star.png
リボンのOptionsタブで、Standard valuesをクリックします。
Optionsセクションで、Show Selected RatingチェックボックスとHover Stateチェックボックスをオンにします。これは、これらのプロパティがデフォルトでチェックされることを意味します。
Field Typeフィールドで、フィールドタイプをRatingに変更します。
Create the field項目セクションで作成した評価項目に移動し、フィールドテンプレートの値をRatingに設定します。

新しいクラスを作成する

これで、FieldViewModelクラスから派生する新しいクラスを作成することで、Viewモデルのロジックを作成できます。フォーム要素の表示方法を制御するには、HTMLを配置し、独自のCSSクラスを挿入します。

新しいクラスを追加するには:

Visual Studioで、新しいクラスライブラリプロジェクトを作成します。たとえば、Sitecore.ExperienceForms.Samples.
Sitecore.ExperienceForms.Mvcアセンブリを参照します。
RatingViewModelクラスを追加します。

DropDownListViewModelを継承し、クラスをSerializableとしてマークします。

/// <summary>
/// Defines the rating view model.
/// </summary>
/// <seealso cref="Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel" />
[Serializable]
public class RatingViewModel : DropDownListViewModel
{
 
}

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";

}

評価テンプレートの各フィールドに対して、RatingViewModelクラスにプロパティを作成します。

/// <summary>

/// Gets or sets a value
indicating whether the rating texts will be displayed on the bars.

/// </summary>

public bool ShowValues { get;
set; }

 

/// <summary>

/// Gets or sets a value
indicating whether the selected rating text will be displayed next to the
control.

/// </summary>

public bool ShowSelectedRating
{ get; set; }

 

/// <summary>

/// Gets or sets a value
indicating whether the ratings will be reversed.

/// </summary>

public bool Reverse { get;
set; }

 

/// <summary>

/// Gets or sets a value
indicating whether the control changes state on hover.

/// </summary>

public bool HoverState { get;
set; }

フィールド値を読み取るには、RatingViewModel クラスのInitItemPropertiesをオーバーライドします。

/// <summary>
/// Initializes the model properties from the <paramref name="item" />.
/// </summary>
/// <param name="item">The item.</param>
protected override void InitItemProperties(Item item)
{
    Assert.ArgumentNotNull(item, nameof(item));
    base.InitItemProperties(item);
 
    ShowValues = MainUtil.GetBool(item.Fields[FieldNames.ShowValues]?.Value, false);
    ShowSelectedRating = MainUtil.GetBool(item.Fields[FieldNames.ShowSelectedRating]?.Value, false);
    Reverse = MainUtil.GetBool(item.Fields[FieldNames.Reverse]?.Value, false);
    HoverState = MainUtil.GetBool(item.Fields[FieldNames.HoverState]?.Value, false);
}

フィールド値を保存するには、UpdateItemFieldsを上書きします。

/// <summary>
/// Updates the <paramref name="item" /> fields using the model properties.
/// </summary>
/// <param name="item">The item.</param>
protected override void UpdateItemFields(Item item)
{
    Assert.ArgumentNotNull(item, nameof(item));
    base.UpdateItemFields(item);
 
    item.Fields[FieldNames.ShowValues]?.SetValue(ShowValues ? "1" : string.Empty, true);
    item.Fields[FieldNames.ShowSelectedRating]?.SetValue(ShowSelectedRating ? "1" : string.Empty, true);
    item.Fields[FieldNames.Reverse]?.SetValue(Reverse ? "1" : string.Empty, true);
    item.Fields[FieldNames.HoverState]?.SetValue(HoverState ? "1" : string.Empty, true);
9.	To reference the new Rating view model in the Rating field type, navigate to

評価フィールドタイプで新しい評価ビューモデルを参照するには、/sitecore/system/Settings/Forms/Field Types/Lists/Rating に移動し、Model Typeフィールドに次のように入力します。Sitecore.ExperienceForms.Samples.Models.RatingViewModel,Sitecore.ExperienceForms.Samples

Razorビューファイルを作成する

次の手順では、Razorビューファイルを作成します。

Website/Views/FormBuilder/FieldTemplates/Samplesに移動し、Rating.cshtmlという新しいかみそりファイルを作成します。

コードを追加します。たとえば、rating要素の場合は次のようになります。

@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();

    <link rel="stylesheet"
href="@themePath"/>

    <script type="text/javascript">

        $(function() {

            var $el = $("#@Html.IdFor(m
=> Model.Value)");

            if (typeof $el.barrating ===
"function") {

                $el.barrating({

                    theme:
"@Model.CssClass",

                    showValues:
@Model.ShowValues.ToString().ToLowerInvariant(),

                    showSelectedRating:
@Model.ShowSelectedRating.ToString().ToLowerInvariant(),

                    reverse:
@Model.Reverse.ToString().ToLowerInvariant(),

                    hoverState:
@Model.HoverState.ToString().ToLowerInvariant(),

                    deselectable:
@deselectable,

                    allowEmpty: @allowEmpty

                });

            }

        });

    </script>

}

 

 

 

 

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

新しい評価フィールドをRazorビューファイルにポイントするには、/sitecore/system/Settings/Forms/Field Types/Lists/Ratingに移動し、View PathフィールドにRazorビューファイルの場所を追加します (この例では、次のようにします)。 FieldTemplates/Samples/Rating

プロパティエディタを作成する

これで、フォーム要素ウィンドウに表示されるセクションを追加できます。この例では、1行のテキスト要素には、Details, Validation, Styling, とAdvanced の設定のセクションが含まれています。

手記

このチュートリアルの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインは、Visual Studio 2019以前と互換性があります。

この例では、Rating要素をDropdownリスト要素に基づいており、Dropdownリスト要素に既に存在するプロパティエディターを複製します。

フォーム要素ペインにセクションを追加するには:

Sitecore Rocksで、コアデータベースを展開し、次の場所に移動します。 /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/DropDownList
アイテムを複製し、名前をRatingに変更します。

手記

ドロップダウンリスト要素には、プロパティエディタのリスト項目展開のコントロールを定義する子項目が含まれています。複製後、Rating/ListItemsはControlsDefinitionsフィールド値のDropDownList/ListItemsを参照します。コントロールラベルをカスタマイズしたり、評価デザイナーをドロップダウンリストデザイナーから切断したりするには、重複した子項目のIDを使用してControlsDefinitionフィールド値を更新できます。
「Styling」アイテムを右クリックし、「 Add 」をクリックして、「 New Item」をクリックします。
新しい項目の追加ダイアログボックスで、フォームパラメーターテンプレートを検索して選択します。
「追加」を3回クリックし、アイテム名を入力します: ShowValues, ShowSelectedRating, HoverState, Reverse。
Styling セクションで、ShowValues アイテムをダブルクリックし、次のフィールドを編集します。
- Label – チェックボックスのラベル「Show values」を入力します。
- IsLabelOnTop – スタイリングの一貫性を確保するために選択します。
- BindingConfiguration –入る showValues
手記

オプションで、ヘルプテキスト情報を入力できます。
他の3つのチェックボックスパラメータ項目の値を適宜設定します。
次に、作成したアイテムのIDをControlDefinitions フィールドに含める必要があります。以前に作成したアイテムを /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings/Rating/Stylingに移動して追加します
最後に、新しいプロパティエディターを評価フィールド項目で参照する必要があります。/sitecore/system/Settings/Forms/Field Types/Lists/Rating itemに移動し、Property Editor フィールドで Rating プロパティエディターを選択します。

評価要素がフォーム要素ウィンドウで使用できるようになりました。

Rating要素をフォームキャンバスにドラッグすると、新しいスタイル設定オプションが使用可能になります。

オプション: テーマに別のプロパティエディターを追加する

以前に追加したバー評価プラグインのテーマは、CSSクラスフィールドにクラスを入力した後で使用できます。ドロップダウンボックスからテーマを使用できるようにする場合は、評価プロパティエディターに別のコントロールを追加できます。タスクの概要は次のとおりです。

ListItemテンプレートを使用して、10個のテーマに10個のアイテムを追加します。
項目を編集し、Value フィールドに評価テーマ名を入力します。
FormSection スタイルを調整します。
- FormDropList Parametersテンプレートを使用して子アイテムThemeを追加します
- StaticData - RatingThemes フォルダのIDを入力します
- ValueFieldName -価値
- FormLabel -テーマ
- IsLabelOnTop -入選
- BindingConfiguration - cssClassプロパティ
ControlDefinitions フィールドで、新しいテーマを参照します。CSSクラスバインディングをStyling FormSectionに追加したため、ここで削除する必要があります。