ウォークスルー

Visual Studioプロジェクトをセットアップします

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

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

1. Visual Studioでは、ASP.NETウェブプロジェクトを作成し、ValueProviderSampleと名付けます。

2. 以下の参考文献を加えます。

   • Sitecore.ExperienceForms
   • Sitecore.ExperienceForms.Mvc
   • Sitecore.Kernel
   • Sitecore.Analytics
   • Sitecore.Mvc
   • Sitecore.MVC.Analytics

   このプロジェクトは プリフィルフォームシリーズのすべてのウォークスルーに使用されます。

レジスタユーザー提出アクションクラスを作成します

次に、すべてのカスタムサブミッション アクション実装用のフォルダを作成します。

レジスタユーザー submit action classを作成するには:

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 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 { 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 Submitアクションアイテムを作成する前に、フォームフィールドをRegisterUserDataにマッピングするためのSPEAKコントロールエディターを作成しなければなりません。

!注このウォークスルーの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンに対応しています。

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

1. Visual Studioプロジェクトでフォルダを作成し、Scriptsと名付けてください。

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

   

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

   ", 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.bindingConfigObjectpropKey.split(".")0;

   var component = this.MapRegisterUserFormcomponentName;

   var items = this.Fields.slice(0);

   if (this.ParameterspropKey &&

   !_.findWhere(items, { itemId: this.ParameterspropKey })) {

   var currentField = {

   itemId: this.ParameterspropKey,

   name: this.ParameterspropKey +

   " - " +

   (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 (formDatapropKey == null || formDatapropKey.length === 0) {

   if (this.Parameters.hasOwnProperty(propKey)) {

   delete this.ParameterspropKey;

   }

   } else {

   this.ParameterspropKey = formDatapropKey;

   }

   }.bind(this));

   this.Parameters.profileId = this.ItemTreeView.SelectedItemId;

   return this.Parameters;

   }

   };

   });

   })(Sitecore.Speak);

4. Visual StudioでSitecoreエクスプローラーを開き、Sitecoreインスタンスへの接続を確立します。Sitecore Rocks Folder Syncを使って、RegisterUser.jsファイルを次のフォルダにあなたのウェブサイトにデプロイしてください: sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions。

   

5. ユーザー アクションエディタSitecore登録を作成するには、Sitecoreエクスプローラーでコアデータベースを展開し、sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsに移動します。

6. アクションを 右クリックし、追加をクリックしてから 「新しいアイテム」をクリックします。

7. 「新しいアイテムを追加」ダイアログボックスで「Speak-BasePage」を検索し、「RegisterUser」と名前を入力し、「**OK」**をクリックします。

   

8. 作成したRegisterUserアイテムを右クリックして「 タスク」をクリックし、「 デザインレイアウト」をクリックしてください。

9. 追加したアイテムの デザインレイアウトタブで、レイアウト フィールドをSpeak-FlexLayoutに更新してください。

10. 左上で「 レンダリングを追加」をクリックし、PageCodeレンダリングを挿入します。

    

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

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

12. SpeakCoreVersion値をSPEAK 2-xに更新してください。

    

13. その後、デザインレイアウト ウィンドウでこれらのレンダリングに進みます。

    

テキストレンダリングパラメータを追加してください

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

1. 作成したRegisterUser Action Editorアイテムに移動し、PageSettingsアイテムを追加してください。

2. PageSettingsアイテムに移動し、「テキストパラメータレンダリング」を検索してクリックし、「追加」をクリックすると、HeaderTitle、HeaderSubtitle、ValueNotInListTextの3つのアイテムが追加されます。

   !注あなたはsitecore/client/Business Component Library/version2

3. 3つの項目それぞれをクリックして、以下のフィールドを編集してください:

   • IsVisible – 選択解除

   • 本文を編集:

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

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

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

4. PageSettingsアイテムに移動し、フォルダを追加し、名前をMapRegisterUserFormにしてください。

5. Search FormDropList Parametersをクリックし、追加をクリックして追加します:

   • メール
   • パスワード
   • フルネーム

6. これらの項目のフィールド値は以下の表に従って更新してください:

   FormDropList パラメータ

   ValueFieldName

   ディスプレイフィールドネーム

   フォームラベル

   BindingConfiguration

   メール

   itemId

   名称

   メール

   emailFieldId/SelectedValue

   パスワード

   itemId

   名称

   パスワード

   passwordFieldId/SelectedValue

   フルネーム

   itemId

   名称

   フルネーム

   fullNameFieldId/SelectedValue

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

8. ItemTreeViewアイテムのStaticDataフィールド値を「Browse」をクリックして更新してください。

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

   

10. データベースフィールドの値をコアに設定してください。

11. 最後に、Page-Stylesheet-Fileアイテムを追加し、Stylesheetと名付けます。スタイルシートフィールドの値を/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.cssに更新します。

    

レンダリングリストは以下のようになります:

登録ユーザー提出アクションアイテムを作成してください

登録ユーザーを作成するには、アクションアイテムを送信してください:

1. コンテンツエディターでsitecore/System/Settings/Forms/Submit Actionsへ行ってください。

2. 右クリックで 「アクションを送信」をクリックし、「 挿入」をクリックし、「テンプレートから挿入」をクリックします。

3. /System/Forms/Submit Actionテンプレートをクリックし、アイテム名欄で名前Register Userを入力し、「挿入」をクリックします。

   

4. 作成したアイテムにアクセスし、設定 セクションのModel Typeフィールドで値をRegisterUserクラスタイプ名に設定します

   .SubmitActions.RegisterUser.RegisterUser

5. エラーメッセージ欄に「Register user failed!」というエラーメッセージを入力してください。

6. エディターフィールドで、作成したエディタをクリックしてください

   。
   

7. アイテムを保存してください。

登録フォームを作成する

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

1. フォームダッシュボードで 「作成」をクリックします。

2. 以下のフィールドでフォームを作成します:

   種類

   レーベル

   フィールド名

   CSSクラス

   単行テキスト

   フルネーム

   フルネーム

   フォームコントロール

   メール

   メール

   メール

   フォームコントロール

   パスワード確認

   パスワード

   パスワード確認

   フォームコントロール

   送信ボタン

   登録

   送信ボタン

   BTN BTN-デフォルト

3. オプションで、フォームフィールドをグループ化するためのセクションを追加することもできます:

   フィールド名

   フォームフィールド/セクション

   CSSクラス

   ユーザーデータセクション

   メールセクション、パスワードセクション

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

   メールセクション

   氏名、メールアドレス

   フォーム群

   パスワードセクション

   (パスワード確認)

   フォーム群

   サブミットセクション

   送信ボタン

   形態群 col-md-12

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

   

4. フォームに「送信」ボタンを追加するには、「 フォーム要素 」ペインの 構造 セクションで「 送信」ボタン 要素をフォームにドラッグします。

5. 「 アクションを送信 」をクリックし、「 ユーザー登録」をクリックします。

   

6. Mapフォームの欄からユーザー登録データへのダイアログボックスで、対応するフォームフィールドを選択します。

7. ツリービューを展開し、「ユーザーノード」をクリックして**「OK」**をクリックします。

   

8. フォームを保存し、名前を「 Register Form」と名付けてください。

MVCレイアウトを作成する

フォームをウェブページに追加する前に、まずMVCレイアウトを作成しなければなりません。

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

1. ウェブサイトのViewsフォルダ内にフォルダを作成し、ValueProviderと名付けてください。

   

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

   

3. Value Providerフォルダを右クリックして「挿入」とレイアウトMVCをクリックします。

4. レイアウト名MVC Layoutと名付け、先に作成したValue Providerフォルダに入れてください。

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

6. モデルを使わずに空のビューを作成してくださいMVC Layout.cshtml。ビューの名前は、コンテンツエディターで作成したMVCレイアウトの名前と同じでなければなりません。

   @using Sitecore.Mvc

   @{

   Layout = "~/Views/Mvc OuterLayout.cshtml";

   }

   @Html.Sitecore().Placeholder("main")

7. _LoginPartial.cshtmlという名前の別の空のビューを作成し、以下のコードをコピーします。

   @using Sitecore.Mvc @if (Request.IsAuthenticated) { var fullname = "Hello " + Sitecore.Context.User.Profile.FullName + "!";

   • @fullname
   • @Html.Sitecore().Placeholder("logout")
   }a else {
   • Login
   • Register

   }

8. 同じフォルダ内に「 Mvc OuterLayout.cshtml 」という名前のファイルを作成し、以下のコードをコピーします。

   @using Sitecore.Mvc

   @using Sitecore.ExperienceForms.Mvc.Html

   @using Sitecore.Mvc.Analytics.Extensions

   @{

   Layout = null;

   }

   @Html.Sitecore().VisitorIdentification()

   @Html.RenderFormStyles()

   @Html.RenderFormScripts()

   @RenderBody()

   あなたのViewsフォルダーはこんな感じです:

   

9. すべてのViewsをViews/ValueProviderフォルダにRock Folder Syncを使って展開Sitecore

ウェブページに登録フォームを追加してください

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

1. /sitecore/Contentに移動し、ホームを右クリックして「挿入」をクリックし、「サンプルアイテム」をクリックします。

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

3. プレゼンテーションタブで「詳細」をクリックします。レイアウト詳細ダイアログボックスで、デフォルトのレイアウトをクリックして変更してください。

4. デバイスエディターのダイアログボックスのドロップダウンリストからLayouts/MVC Layoutをクリックします。

5. コントロールタブですべてのレンダリングを削除し、「追加」をクリックします。

6. Renderings/System/Formsに行き、Mvcフォームをクリックします。レンダリングを選択するダイアログボックスの「プレイスホルダーに追加」欄で「main」を入力し、「Select」をクリックします。

7. コントロールタブでMVCフォームコントロールをクリックし、編集をクリックします。データソースフィールドで「ブラウズ」をクリックし、ページに追加したいフォームを選択します。この例では、「フォーム登録」をクリックします。

8. 前のステップで、フォーム、レイアウト、項目と子どもたちを公開してください。

   !注アイテムのワークフロー状態が「 Approved 」状態であることを確認しましょう。

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

   

次のウォークスルーでログイン・ログアウトページの作成方法を学びましょう。