チュートリアル: 登録ページの作成

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

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

このチュートリアルは、フォームの事前入力チュートリアル シリーズの パート1であり、レジスタ ページを作成する方法について説明します。

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

  • Visual Studioプロジェクトを設定する

  • register user submitアクション クラスを作成する

  • ユーザーの登録アクション エディター項目を作成する

  • テキストレンダリングパラメータを追加する

  • 「ユーザーの登録」送信アクションアイテムの作成

  • 登録フォームの作成

  • MVCレイアウトの作成

  • Webページへの登録フォームの追加

メモ

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

Visual Studioプロジェクトを設定する

まず、Visual Studioでサンプル プロジェクトを作成します。

Visual Studioプロジェクトを設定するには:

  1. Visual Studioで、ASP.NET Webプロジェクトを作成し、ValueProviderSampleという名前を付けます。

  2. 次の参照を追加します。

    • Sitecore.ExperienceForms

    • Sitecore.ExperienceForms.Mvc

    • Sitecore.Kernel

    • Sitecore.Analytics

    • Sitecore.Mvc

    • Sitecore.MVC.Analytics

    このプロジェクトは、フォームの事前入力シリーズのすべてのチュートリアルで使用されます。

register user submitアクション クラスを作成する

次に、すべての カスタム送信アクション 実装のフォルダーを作成します。

register user submitアクションクラスを作成するには:

  1. ValueProviderSampleプロジェクトで、SubmitActionsという名前のフォルダーを追加します。

  2. SubmitActionsフォルダに別のフォルダを作成し、RegisterUserという名前を付けます。

  3. RegisterUserDataという名前のクラスを作成し、RegisterUserフォルダに追加します。これは、RegisterUser Submit Actionの実装に使用されるデータ構造クラスです。

     public class RegisterUserData
    	{
    	        public Guid EmailFieldId { get; set; }
    	
    	        public Guid PasswordFieldId { get; set; }
    	
    	        public Guid FullNameFieldId { get; set; }
    	
    	        public string ProfileId { get; set; }
    }
  4. プロジェクトのルートに移動し、Helperという名前のフォルダーを作成します。

  5. 静的FieldHelperクラスを作成し、作成したHelperフォルダに追加します。このヘルパークラスは、フォームフィールドから値を取得するために使用されます。

    public static class FieldHelper
    
        {
    
            public static
    IViewModel GetFieldById(Guid id, IList<IViewModel> fields)
    
            {
    
                return
    fields.FirstOrDefault(f => Guid.Parse(f.ItemId) == id);
    
            }
    
            public static string
    GetValue(object field)
    
            {
    
                return
    field?.GetType().GetProperty("Value")?.GetValue(field, null)?.ToString()
    ?? string.Empty;
    
            }
  6. RegisterUserクラスを作成し、RegisterUserフォルダーに追加します。このクラスをSubmitActionBaseクラスから継承し、抽象メソッドをオーバーライドExecute

    	public class RegisterUser : SubmitActionBase<RegisterUserData>
    	    {
    	        public RegisterUser(ISubmitActionData submitActionData) : base(submitActionData)
    	        {
    	        }
    	
    	        protected override bool Execute(RegisterUserData data, FormSubmitContext formSubmitContext)
    	        {
    	            Assert.ArgumentNotNull(data, nameof(data));
    	            Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));
    	
    	            var fields = GetFormFields(data, formSubmitContext);
    	
    	            Assert.IsNotNull(fields, nameof(fields));
    	
    	            if (EmailOrPasswordFieldsIsNull(fields))
    	            {
    	                return AbortForm(formSubmitContext);
    	            }
    	
    	            var values = fields.GetFieldValues();
    	
    	            if (EmailOrPasswordsIsNull(values))
    	            {
    	                return AbortForm(formSubmitContext);
    	            }
    	
    	            var result = Register(values.Email, values.Password, values.FullName, data.ProfileId);
    	
    	            if (!result)
    	            {
    	                return AbortForm(formSubmitContext);
    	            }
    	
    	            return true;
    	        }
    	
    	        protected virtual bool Register(string email, string password, string name, string profileId)
    	        {
    	            Assert.ArgumentNotNullOrEmpty(email, nameof(email));
    	            Assert.ArgumentNotNullOrEmpty(password, nameof(password));
    	
    	            try
    	            {
    	                var user = User.Create(Context.Domain.GetFullName(email), password);
    	                user.Profile.Email = email;
    	
    	                if (!string.IsNullOrEmpty(profileId))
    	                {
    	                    user.Profile.ProfileItemId = profileId;
    	                }
    	
    	                user.Profile.FullName = name;
    	                user.Profile.Save();
    	            }
    	            catch (Exception ex)
    	            {
    	                Log.SingleError("Register user failed", ex);
    	                return false;
    	            }
    	
    	            return true;
    	        }
    	
    	        private RegisterUserFormFields GetFormFields(RegisterUserData data, FormSubmitContext formSubmitContext)
    	        {
    	            Assert.ArgumentNotNull(data, nameof(data));
    	            Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));
    	
    	            return new RegisterUserFormFields
    	            {
    	                Email = FieldHelper.GetFieldById(data.EmailFieldId, formSubmitContext.Fields),
    	                Password = FieldHelper.GetFieldById(data.PasswordFieldId, formSubmitContext.Fields),
    	                FullName = FieldHelper.GetFieldById(data.FullNameFieldId, formSubmitContext.Fields),
    	            };
    	        }
    	
    	        private bool EmailOrPasswordFieldsIsNull(RegisterUserFormFields field)
    	        {
    	            Assert.ArgumentNotNull(field, nameof(field));
    	            return field.Email == null || field.Password == null;
    	        }
    	
    	        private bool EmailOrPasswordsIsNull(RegisterUserFieldValues values)
    	        {
    	            Assert.ArgumentNotNull(values, nameof(values));
    	            return string.IsNullOrEmpty(values.Email) || string.IsNullOrEmpty(values.Password);
    	        }
    	
    	        private bool AbortForm(FormSubmitContext formSubmitContext)
    	        {
    	            formSubmitContext.Abort();
    	            return false;
    	        }
    	        
    	        internal class RegisterUserFormFields
    	        {
    	            public IViewModel Email { get; set; }
    	            public IViewModel Password { get; set; }
    	            public IViewModel FullName { get; set; }
    	
    	            public RegisterUserFieldValues GetFieldValues()
    	            {
    	                return new RegisterUserFieldValues
    	                {
    	                    Email = FieldHelper.GetValue(Email),
    	                    Password = FieldHelper.GetValue(Password),
    	                    FullName = FieldHelper.GetValue(FullName)
    	                };
    	            }
    	        }
    	
    	        internal class RegisterUserFieldValues
    	        {
    	            public string Email { get; set; }
    	            public string Password { get; set; }
    	            public string FullName { get; set; }
    	        }
    	    }

ユーザーの登録アクション エディター項目を作成する

Register User送信アクションアイテムを作成する前に、フォームフィールドをRegisterUserDataにマッピングするためのSPEAKコントロールエディタを作成する必要があります。

手記

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

「ユーザー登録アクションエディタ」アイテムを作成するには:

  1. Visual Studioプロジェクトで、フォルダーを作成し、Scriptsという名前を付けます。

  2. JavaScriptファイルを作成し、RegisterUser.jsという名前を付けます。このファイルは、Register User Action Editorアイテムに使用されます。

    Select the file in Visual Studio
  3. 次のスクリプトをファイルにコピーします。

    (function (speak) {
    
        var parentApp = window.parent.Sitecore.Speak.app.findApplication('EditActionSubAppRenderer'),
    
            designBoardApp = window.parent.Sitecore.Speak.app.findComponent('FormDesignBoard');
    
        var getFields = function () {
    
            var fields = designBoardApp.getFieldsData();
    
            return _.reduce(fields,
    
                function (memo, item) {
    
                    if (item && item.model && item.model.hasOwnProperty("value")) {
    
                        memo.push({
    
                            itemId: item.itemId,
    
                            name: item.model.name
    
                        });
    
                    }
    
                    return memo;
    
                },
    
                [
    
                    {
    
                        itemId: '',
    
                        name: ''
    
                    }
    
                ],
    
                this);
    
        };
    
        speak.pageCode(["underscore"],
    
            function (_) {
    
                return {
    
                    initialized: function () {
    
                        this.on({
    
                            "loaded": this.loadDone
    
                        },
    
                            this);
    
                        this.Fields = getFields();
    
                        this.MapRegisterUserForm.children.forEach(function (control) {
    
                            if (control.deps && control.deps.indexOf("bclSelection") !== -1) {
    
                                control.IsSelectionRequired = false;
    
                            }
    
                        });
    
                        this.ItemTreeView.on("change:SelectedItem", this.changedSelectedItemId, this);
    
                        if (parentApp) {
    
                            parentApp.loadDone(this, this.HeaderTitle.Text, this.HeaderSubtitle.Text);
    
                            parentApp.setSelectability(this, true);
    
                        }
    
                    },
    
                    changedSelectedItemId: function () {
    
                        parentApp.setSelectability(this, true, this.ItemTreeView.SelectedItemId);
    
                    },
    
                    setDynamicData: function (propKey) {
    
                        var componentName = this.MapRegisterUserForm.bindingConfigObject[propKey].split(".")[0];
    
                        var component = this.MapRegisterUserForm[componentName];
    
                        var items = this.Fields.slice(0);
    
                        if (this.Parameters[propKey] &&
    
                            !_.findWhere(items, { itemId: this.Parameters[propKey] })) {
    
                            var currentField = {
    
                                itemId: this.Parameters[propKey],
    
                                name: this.Parameters[propKey] +
    
                                    " - " +
    
                                    (this.ValueNotInListText.Text || "value not in the selection list")
    
                            };
    
                            items.splice(1, 0, currentField);
    
                            component.DynamicData = items;
    
                            $(component.el).find('option').eq(1).css("font-style", "italic");
    
                        } else {
    
                            component.DynamicData = items;
    
                        }
    
                    },
    
                    loadDone: function (parameters) {
    
                        this.Parameters = parameters || {};
    
                        _.keys(this.MapRegisterUserForm.bindingConfigObject).forEach(this.setDynamicData.bind(this));
    
                        this.MapRegisterUserForm.BindingTarget = this.Parameters;
    
                        this.ItemTreeView.SelectedItemId = this.Parameters.profileId;
    
                    },
    
                    getData: function () {
    
                        var formData = this.MapRegisterUserForm.getFormData(),
    
                            keys = _.keys(formData);
    
                        keys.forEach(function (propKey) {
    
                            if (formData[propKey] == null || formData[propKey].length === 0) {
    
                                if (this.Parameters.hasOwnProperty(propKey)) {
    
                                    delete this.Parameters[propKey];
    
                                }
    
                            } else {
    
                                this.Parameters[propKey] = formData[propKey];
    
                            }
    
                        }.bind(this));
    
                        this.Parameters.profileId = this.ItemTreeView.SelectedItemId;
    
                        return this.Parameters;
    
                    }
    
                };
    
            });
    
    })(Sitecore.Speak);
  4. Visual StudioでSitecore Explorerを開き、Sitecoreインスタンスへの接続を確立します。Sitecore Rocks Folder Syncを使用して、RegisterUser.jsファイルをWebサイトのsitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsフォルダーにデプロイします。

    Path to Actions folder.
  5. Register User Action Editor Sitecoreアイテムを作成するには、Sitecore Explorerでコア データベースを展開し、sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsに移動します。

  6. Actionsを右クリックし、Addをクリックして、New itemをクリックします。

  7. Add New Itemダイアログボックスで、「Speak-BasePage」を検索してクリックし、名前に「RegisterUser」を入力して、「OK」をクリックします。

    Select item
  8. 作成したRegisterUserアイテムを右クリックしてTasksをクリックし、Design Layoutをクリックします。

  9. 追加したアイテムのDesign Layoutタブで、LayoutフィールドをSpeak-FlexLayoutに更新します。

  10. 左上隅のAdd Renderingをクリックし、PageCodeレンダリングを挿入します。

    Insert PageCode rendering
  11. PageCodeレンダリングのプロパティウィンドウを開きます。PageCodeScriptFileName値をRegisterUser.jsファイルのファイル場所に更新します。例えば:

    /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/RegisterUser.js .

  12. SpeakCoreVersion値をSPEAK 2-xに更新します。

    Specify SPEAK version
  13. 次に、Design Layoutウィンドウでこれらのレンダリングに進みます。

    Renderings in the Design Layout window

テキストレンダリングパラメータを追加する

テキストレンダリングパラメータを追加するには:

  1. 作成したRegisterUser Action Editorアイテムに移動し、PageSettingsアイテムを追加します。

  2. PageSettingsアイテムに移動し、テキスト パラメータ レンダリングを検索してクリックし、AddをクリックしてHeaderTitleHeaderSubtitleValueNotInListTextの3つのアイテムを追加します。

    手記

    を使用する必要があります。sitecore/client/Business Component Library/version2 

  3. 3つの項目のそれぞれについて、次のフィールドをクリックして編集します。

    • IsVisible–オフ

    • テキストを編集します。

      HeaderTitle - フォームフィールドをユーザー登録データにマッピングします。

      HeaderSubtitle - フォーム内のフィールドをユーザープロファイルの詳細にマッピングします。

      ValueNotInListText - 選択リストにない値。

  4. PageSettingsアイテムに移動し、フォルダを追加して、MapRegisterUserFormという名前を付けます。

  5. FormDropList Parameters」を検索してクリックし、「Add」をクリックして以下を追加します。

    • 電子メール

    • パスワード

    • フルネーム

  6. 次の表に従って、これらのアイテムのフィールド値を更新します。

    FormDropList Parameter

    ValueFieldName

    DisplayFieldName

    FormLabel

    BindingConfiguration

    Email

    アイテムID

    名前

    電子メール

    emailFieldId/SelectedValue

    Password

    アイテムID

    名前

    パスワード

    passwordFieldId/SelectedValue

    FullName

    アイテムID

    名前

    フルネーム

    fullNameFieldId/SelectedValue

  7. Sitecore Explorerで、PageSettingsアイテムに移動し、ItemTreeView Parametersアイテムを追加してItemTreeViewという名前を付けます。

  8. ItemTreeViewアイテムのStaticDataフィールド値を更新するには、Browseをクリックします。

  9. /sitecore/system/Setttings/Security/Profilesに移動し、Profilesフォルダをクリックして、OKをクリックします。

  10. Databaseフィールドの値をcoreに設定します。

  11. 最後に、Page-Stylesheet-File項目を追加し、Stylesheetという名前を付けます。Stylesheetフィールドの値を次のように更新/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css

    Add stylesheet

レンダリングリストは次のように表示されます。

What the rendering looks like

ユーザー登録送信アクションアイテムの作成

ユーザー登録送信アクションアイテムを作成するには:

  1. コンテンツ エディタで、sitecore/System/Settings/Forms/Submit Actionsに移動します。

  2. Submit Actionsを右クリックし、Insertをクリックして、Insert from templateをクリックします。

  3. /System/Forms/Submit Actionテンプレートをクリックし、Item Nameフィールドに名前Register Userを入力してInsertをクリックします。

    Insert submit action
  4. 作成したアイテムに移動し、SettingsセクションのModel Typeフィールドで、値をRegisterUserクラスの種類名に設定します。ValueProviderSample.SubmitActions.RegisterUser.RegisterUser

  5. Error Messageフィールドに、次のエラーメッセージを入力します。Register user failed!

  6. Editorフィールドで、作成したエディタRegisterUserをクリックします。

    Insert editor
  7. アイテムを保存します。

登録フォームを作成する

フォームを作成するには:

  1. Formsダッシュボードで、「 Create」をクリックします。

  2. 次のフィールドを含むフォームを作成します。

    種類

    ラベル

    フィールド名

    CSSクラス

    1行テキスト

    フルネーム

    フルネーム

    フォームコントロール

    電子メール

    電子メール

    電子メール

    フォームコントロール

    パスワードの確認

    パスワード

    パスワードの確認

    フォームコントロール

    送信ボタン

    登録する

    送信ボタン

    btn btn-デフォルト

  3. 必要に応じて、フォームフィールドをグループ化するセクションをいくつか追加します。

    フィールド名

    フォームフィールド(複数可)/セクション

    CSSクラス

    UserDataSection (ユーザーデータセクション)

    EmailSection、PasswordSection

    フォームグループCOL-MD-6

    メールセクション

    氏名、メールアドレス

    フォームグループ

    パスワードセクション

    (パスワードの確認)

    フォームグループ

    Submitセクション

    送信ボタン

    フォームグループCOL-MD-12

    フォームは次のようになります。

    View of the form
  4. フォームに 送信 ボタンを追加するには、Form elementsペインのStructureセクションで、Submit button要素をフォームにドラッグします。

  5. Submit actions 」をクリックし、「 Register User」をクリックします。

    Add Submit action
  6. Map form fields to user registration dataダイアログボックスで、対応するフォームフィールドを選択します。

  7. ツリー ビューを展開し、UserノードをクリックしてOKをクリックします。

    Map form fieds to registration data
  8. フォームを保存し、Register Formという名前を付けます。

MVCレイアウトの作成

フォームをWebページに追加する前に、MVCレイアウトを作成する必要があります。

MVCレイアウトを作成するには:

  1. WebサイトのViewsフォルダーにフォルダーを作成し、ValueProviderという名前を付けます。

    ValueProvider folder
  2. コンテンツ エディタでLayout/Layoutsに移動し、レイアウト フォルダを挿入してValue Providerという名前を付けます。

    Value Provider layout folder
  3. Value Providerフォルダを右クリックし、InsertおよびMVC Layoutをクリックします。

  4. レイアウトにMVC Layoutという名前を付け、前に作成したValue Providerフォルダーに配置します。

  5. Visual Studioプロジェクトに移動し、Viewsという名前のフォルダーを作成します。

  6. MVC Layout.cshtmlという名前のモデルを含まない空のビューを作成します。ビューの名前は、コンテンツ エディターで作成したMVCレイアウトの名前と同じである必要があります。

    @using Sitecore.Mvc
    
    @{
    
    Layout = "~/Views/Mvc OuterLayout.cshtml";
    
    }
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
    
    <div class="container">
    
    <div class="navbar-header">
    
    <a class="navbar-brand" href="#">@Html.Sitecore().Field("title")</a>
    
    </div>
    
    @RenderPage("~/Views/_LoginPartial.cshtml")
    
    </div>
    
    </nav>
    
    <div class="container">
    
    <div class="row">
    
    @Html.Sitecore().Placeholder("main")
    
    </div>
    
    </div>
    
    
  7. _LoginPartial.cshtmlという名前の空のビューをもう1つ作成し、次のコードをコピーします。

    	@using Sitecore.Mvc
    	@if (Request.IsAuthenticated)
    	{
    	    var fullname = "Hello " + Sitecore.Context.User.Profile.FullName + "!";
    	    <ul class="nav navbar-nav navbar-right">
    	        <li>
    	            <a href="UserProfile">@fullname</a>
    	        </li>
    	        <li style="padding-top: 8px;">
    	            @Html.Sitecore().Placeholder("logout")
    	        </li>
    	    </ul>
    	}a
    	else
    	{
    	
    	<ul class="nav navbar-nav navbar-right">
    	    <li>
    	        <a href="Login">Login</a>
    	    </li>
    	    <li>
    	        <a href="Register">Register</a>
    	    </li>
    	</ul>
    	
    	}
    
  8. 同じフォルダにMvc OuterLayout.cshtmlという名前のファイルを作成し、次のコードをファイルにコピーします。

    @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()
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    
    @Html.RenderFormStyles()
    
    @Html.RenderFormScripts()
    
    </head>
    
    <body style="padding-top: 70px;">
    
    @RenderBody()
    
    </body>
    
    </html>

    Viewsフォルダは次のようになります。

    The Views folder
  9. Sitecore Rock Folder Syncを使用して、すべてのビューをWebサイトのViews/ValueProviderフォルダーにデプロイします。

Webページへの登録フォームの追加

登録フォームをWebページに追加するには:

  1. /sitecore/Contentに移動し、Homeを右クリックし、InsertSample itemの順にクリックします。

  2. Registerと入力し、OKをクリックします。

  3. Presentationタブで、「Details」をクリックします。Layout Detailsダイアログボックスで、デフォルトのレイアウトをクリックして変更します。

  4. Device Editorダイアログボックスで、ドロップダウンリストからLayouts/MVC Layoutをクリックします。

  5. Controlsタブで、すべてのレンダリングを削除し、Addをクリックします。

  6. Renderings/System/Formsに移動し、Mvc Formをクリックします。Select a RenderingダイアログボックスのAdd to Placeholderフィールドに「main」と入力し、Selectをクリックします。

  7. Controlsタブで、MVC formコントロールをクリックし、Editをクリックします。Data SourceフィールドでBrowseをクリックし、ページに追加するフォームを選択します。この例では、Register Formをクリックします。

  8. 前の手順で、フォーム、レイアウト、およびアイテムをそれらの子と共に公開します。

    手記

    アイテムのワークフロー状態がApproved状態であることを確認します。

  9. 登録ページをブラウザに読み込み、ユーザーを登録します。

    The Register form

次のチュートリアルに進み、ログインおよびログアウトページの作成方法を学習します。

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