1. Sitecore Formsのチュートリアル

チュートリアル: カスタム評価要素の作成

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

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

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

このチュートリアルでは、jQuery Bar Ratingという既存のプラグインを使用して評価制御要素を実装する方法について説明し、内容について説明します。

  • ファイルをダウンロードして準備します

  • フィールド タイプ アイテムの作成

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

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

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

  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フォルダを作成して、2つのファイルに貼り付けます。

  6. sitecore modules/Web/ExperienceForms/cssに移動し、barratingフォルダとテーマフォルダを作成してから、bars-1to10.cssファイルに貼り付けます。

    Bar rating .css file shown in the tree view
    メモ

    異なるテーマを使用するには、それらをcssフォルダに追加する必要があります。

  7. コンテンツ エディターで /sitecore/Templates/Systems/Forms/Formに移動し、ContentタブのAdvancedセクションのStandard valuesフィールドで、_Standard valuesアイテム (sitecore/Templates/System/Form/_Standard Values) を選択します。

  8. コンテンツ ツリーで、_Standard値 アイテムを選択した状態で、ContentタブのSettingsセクションのScriptsフィールドに |barrating/jquery.barrating.min.jsを追加します。

    Scripts field on the Content tab

  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バー評価プラグインは選択フィールドを使用するため、リスト要素をベースとして使用すると便利です。

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

  1. /sitecore/System/Settings/Forms/Field Types/Listsフォルダに移動し、Dropdown listアイテムを右クリックして、Duplicateをクリックします。

  2. アイテムの名前と表示名を「 Ratingに変更します。

  3. Appearanceセクションで、次のフィールドを編集します。

    • Icon – フォーム要素 ペインに表示されるアイコンを選択します。たとえば、OfficeWhite/32x32/star.png.

      手記

      コンテンツ エディターに表示されるアイコンを設定するには、Standard fieldsチェックボックスが選択されていることを確認します。

    • BackgroundColor – フォーム要素 ペインに表示されるアイコンの背景色を選択します。たとえば、Grass.

    • Sortorder – 「フォーム要素」パネルの「リスト」セクションで評価要素を最後に表示するには、ソート順を「 1200」に設定します。

      手記

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

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

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

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

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

    @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. 新しい評価フィールドをRazorビュー ファイルにポイントするには、/sitecore/System/Settings/Forms/Field Types/Lists/Ratingに移動し、View PathフィールドにRazorビュー ファイルの場所 (この例ではFieldTemplates/Samples/Rating) を追加します。

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

    Lists in the Form elements pane
この記事を改善するための提案がある場合は、 お知らせください!