チュートリアル: 登録ページの作成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このチュートリアルは、フォームの事前入力チュートリアル シリーズの パート1であり、レジスタ ページを作成する方法について説明します。
このチュートリアルでは、次の方法について説明します。
-
Visual Studioプロジェクトを設定する
-
register user submitアクション クラスを作成する
-
ユーザーの登録アクション エディター項目を作成する
-
テキストレンダリングパラメータを追加する
-
「ユーザーの登録」送信アクションアイテムの作成
-
登録フォームの作成
-
MVCレイアウトの作成
-
Webページへの登録フォームの追加
このチュートリアルの例に従うには、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインは、Visual Studio 2019以前と互換性があります。
Visual Studioプロジェクトを設定する
Visual Studioプロジェクトを設定する
まず、Visual Studioでサンプル プロジェクトを作成します。
Visual Studioプロジェクトを設定するには:
-
Visual Studioで、ASP.NET Webプロジェクトを作成し、ValueProviderSampleという名前を付けます。
-
次の参照を追加します。
-
Sitecore.ExperienceForms
-
Sitecore.ExperienceForms.Mvc
-
Sitecore.Kernel
-
Sitecore.Analytics
-
Sitecore.Mvc
-
Sitecore.MVC.Analytics
このプロジェクトは、フォームの事前入力シリーズのすべてのチュートリアルで使用されます。
-
register user submitアクション クラスを作成する
register user submitアクション クラスを作成する
次に、すべての カスタム送信アクション 実装のフォルダーを作成します。
register user submitアクションクラスを作成するには:
-
ValueProviderSampleプロジェクトで、SubmitActionsという名前のフォルダーを追加します。
-
SubmitActionsフォルダに別のフォルダを作成し、RegisterUserという名前を付けます。
-
RegisterUserDataという名前のクラスを作成し、RegisterUserフォルダに追加します。これは、RegisterUser Submit Actionの実装に使用されるデータ構造クラスです。
-
プロジェクトのルートに移動し、Helperという名前のフォルダーを作成します。
-
静的FieldHelperクラスを作成し、作成したHelperフォルダに追加します。このヘルパークラスは、フォームフィールドから値を取得するために使用されます。
-
RegisterUserクラスを作成し、RegisterUserフォルダーに追加します。このクラスをSubmitActionBaseクラスから継承し、抽象メソッドをオーバーライドExecute。
ユーザーの登録アクション エディター項目を作成する
ユーザーの登録アクション エディター項目を作成する
Register User送信アクションアイテムを作成する前に、フォームフィールドをRegisterUserDataにマッピングするためのSPEAKコントロールエディタを作成する必要があります。
このチュートリアルの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインは、Visual Studio 2019以前と互換性があります。
「ユーザー登録アクションエディタ」アイテムを作成するには:
-
Visual Studioプロジェクトで、フォルダーを作成し、Scriptsという名前を付けます。
-
JavaScriptファイルを作成し、RegisterUser.jsという名前を付けます。このファイルは、Register User Action Editorアイテムに使用されます。

-
次のスクリプトをファイルにコピーします。
-
Visual StudioでSitecore Explorerを開き、Sitecoreインスタンスへの接続を確立します。Sitecore Rocks Folder Syncを使用して、RegisterUser.jsファイルをWebサイトのsitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsフォルダーにデプロイします。

-
Register User Action Editor Sitecoreアイテムを作成するには、Sitecore Explorerでコア データベースを展開し、sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsに移動します。
-
Actionsを右クリックし、Addをクリックして、New itemをクリックします。
-
Add New Itemダイアログボックスで、「Speak-BasePage」を検索してクリックし、名前に「RegisterUser」を入力して、「OK」をクリックします。
-
作成したRegisterUserアイテムを右クリックしてTasksをクリックし、Design Layoutをクリックします。
-
追加したアイテムのDesign Layoutタブで、LayoutフィールドをSpeak-FlexLayoutに更新します。
-
左上隅のAdd Renderingをクリックし、PageCodeレンダリングを挿入します。
-
PageCodeレンダリングのプロパティウィンドウを開きます。PageCodeScriptFileName値をRegisterUser.jsファイルのファイル場所に更新します。例えば:
/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/RegisterUser.js .
-
SpeakCoreVersion値をSPEAK 2-xに更新します。

-
次に、Design Layoutウィンドウでこれらのレンダリングに進みます。

テキストレンダリングパラメータを追加する
テキストレンダリングパラメータを追加する
テキストレンダリングパラメータを追加するには:
-
作成したRegisterUser Action Editorアイテムに移動し、PageSettingsアイテムを追加します。
-
PageSettingsアイテムに移動し、テキスト パラメータ レンダリングを検索してクリックし、AddをクリックしてHeaderTitle、HeaderSubtitle、ValueNotInListTextの3つのアイテムを追加します。
手記を使用する必要があります。sitecore/client/Business Component Library/version2
-
3つの項目のそれぞれについて、次のフィールドをクリックして編集します。
-
IsVisible–オフ
-
テキストを編集します。
HeaderTitle - フォームフィールドをユーザー登録データにマッピングします。
HeaderSubtitle - フォーム内のフィールドをユーザープロファイルの詳細にマッピングします。
ValueNotInListText - 選択リストにない値。
-
-
PageSettingsアイテムに移動し、フォルダを追加して、MapRegisterUserFormという名前を付けます。
-
「 FormDropList Parameters」を検索してクリックし、「Add」をクリックして以下を追加します。
-
電子メール
-
パスワード
-
フルネーム
-
-
次の表に従って、これらのアイテムのフィールド値を更新します。
FormDropList Parameter
ValueFieldName
DisplayFieldName
FormLabel
BindingConfiguration
Email
アイテムID
名前
電子メール
emailFieldId/SelectedValue
Password
アイテムID
名前
パスワード
passwordFieldId/SelectedValue
FullName
アイテムID
名前
フルネーム
fullNameFieldId/SelectedValue
-
Sitecore Explorerで、PageSettingsアイテムに移動し、ItemTreeView Parametersアイテムを追加してItemTreeViewという名前を付けます。
-
ItemTreeViewアイテムのStaticDataフィールド値を更新するには、Browseをクリックします。
-
/sitecore/system/Setttings/Security/Profilesに移動し、Profilesフォルダをクリックして、OKをクリックします。
-
Databaseフィールドの値をcoreに設定します。
-
最後に、Page-Stylesheet-File項目を追加し、Stylesheetという名前を付けます。Stylesheetフィールドの値を次のように更新/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css
レンダリングリストは次のように表示されます。
ユーザー登録送信アクションアイテムの作成
ユーザー登録送信アクションアイテムの作成
ユーザー登録送信アクションアイテムを作成するには:
-
コンテンツ エディタで、sitecore/System/Settings/Forms/Submit Actionsに移動します。
-
Submit Actionsを右クリックし、Insertをクリックして、Insert from templateをクリックします。
-
/System/Forms/Submit Actionテンプレートをクリックし、Item Nameフィールドに名前Register Userを入力してInsertをクリックします。
-
作成したアイテムに移動し、SettingsセクションのModel Typeフィールドで、値をRegisterUserクラスの種類名に設定します。ValueProviderSample.SubmitActions.RegisterUser.RegisterUser
-
Error Messageフィールドに、次のエラーメッセージを入力します。Register user failed!
-
Editorフィールドで、作成したエディタRegisterUserをクリックします。

-
アイテムを保存します。
登録フォームを作成する
登録フォームを作成する
フォームを作成するには:
-
Formsダッシュボードで、「 Create」をクリックします。
-
次のフィールドを含むフォームを作成します。
種類
ラベル
フィールド名
CSSクラス
1行テキスト
フルネーム
フルネーム
フォームコントロール
電子メール
電子メール
電子メール
フォームコントロール
パスワードの確認
パスワード
パスワードの確認
フォームコントロール
送信ボタン
登録する
送信ボタン
btn btn-デフォルト
-
必要に応じて、フォームフィールドをグループ化するセクションをいくつか追加します。
フィールド名
フォームフィールド(複数可)/セクション
CSSクラス
UserDataSection (ユーザーデータセクション)
EmailSection、PasswordSection
フォームグループCOL-MD-6
メールセクション
氏名、メールアドレス
フォームグループ
パスワードセクション
(パスワードの確認)
フォームグループ
Submitセクション
送信ボタン
フォームグループCOL-MD-12
フォームは次のようになります。
-
フォームに 送信 ボタンを追加するには、Form elementsペインのStructureセクションで、Submit button要素をフォームにドラッグします。
-
「 Submit actions 」をクリックし、「 Register User」をクリックします。
-
Map form fields to user registration dataダイアログボックスで、対応するフォームフィールドを選択します。
-
ツリー ビューを展開し、UserノードをクリックしてOKをクリックします。
-
フォームを保存し、Register Formという名前を付けます。
MVCレイアウトの作成
MVCレイアウトの作成
フォームをWebページに追加する前に、MVCレイアウトを作成する必要があります。
MVCレイアウトを作成するには:
-
WebサイトのViewsフォルダーにフォルダーを作成し、ValueProviderという名前を付けます。

-
コンテンツ エディタでLayout/Layoutsに移動し、レイアウト フォルダを挿入してValue Providerという名前を付けます。
-
Value Providerフォルダを右クリックし、InsertおよびMVC Layoutをクリックします。
-
レイアウトにMVC Layoutという名前を付け、前に作成したValue Providerフォルダーに配置します。
-
Visual Studioプロジェクトに移動し、Viewsという名前のフォルダーを作成します。
-
MVC Layout.cshtmlという名前のモデルを含まない空のビューを作成します。ビューの名前は、コンテンツ エディターで作成したMVCレイアウトの名前と同じである必要があります。
-
_LoginPartial.cshtmlという名前の空のビューをもう1つ作成し、次のコードをコピーします。
-
同じフォルダにMvc OuterLayout.cshtmlという名前のファイルを作成し、次のコードをファイルにコピーします。
Viewsフォルダは次のようになります。
-
Sitecore Rock Folder Syncを使用して、すべてのビューをWebサイトのViews/ValueProviderフォルダーにデプロイします。
Webページへの登録フォームの追加
Webページへの登録フォームの追加
登録フォームをWebページに追加するには:
-
/sitecore/Contentに移動し、Homeを右クリックし、Insert、Sample itemの順にクリックします。
-
Registerと入力し、OKをクリックします。
-
Presentationタブで、「Details」をクリックします。Layout Detailsダイアログボックスで、デフォルトのレイアウトをクリックして変更します。
-
Device Editorダイアログボックスで、ドロップダウンリストからLayouts/MVC Layoutをクリックします。
-
Controlsタブで、すべてのレンダリングを削除し、Addをクリックします。
-
Renderings/System/Formsに移動し、Mvc Formをクリックします。Select a RenderingダイアログボックスのAdd to Placeholderフィールドに「main」と入力し、Selectをクリックします。
-
Controlsタブで、MVC formコントロールをクリックし、Editをクリックします。Data SourceフィールドでBrowseをクリックし、ページに追加するフォームを選択します。この例では、Register Formをクリックします。
-
前の手順で、フォーム、レイアウト、およびアイテムをそれらの子と共に公開します。
手記アイテムのワークフロー状態がApproved状態であることを確認します。
-
登録ページをブラウザに読み込み、ユーザーを登録します。
次のチュートリアルに進み、ログインおよびログアウトページの作成方法を学習します。









