ポップアップを作成して使用する
この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。
ポップアップを使用すると、ユーザーに対して情報を表示したり情報の入力を求めたりすることができます。ポップアップを適切に使用すると、ユーザーが同じページ上にとどまることができるため、ユーザーエクスペリエンスが向上します。
リアクティブWebおよびモバイル
リアクティブWebおよびモバイルアプリでポップアップを作成して使用するには、以下の手順を実行します。
-
Service Studioのツールボックスで
Popupを検索します。Popupウィジェットが表示されます。
-
Popupウィジェットを画面のメインコンテンツ領域にドラッグします。
-
（要素ツリー内にある）画面名を右クリックし、［Add Local Variable］を選択して、Booleanデータ型の変数を画面に追加します。この例では、変数に「
ShowPopup」という名前を付けます。
-
Popupウィジェットを選択し、［Properties］タブで、Show Popupプロパティの新しい変数を入力します。これで、変数の値に応じてポップアップを切り替えます。
-
ポップアップにコンテンツを追加します。
この例では、テキストと［Close Popup］ボタンを追加しています。さらに、［Actions］画面領域に［Show Popup］ボタンを追加しています。
-
［Close Popup］ボタンを選択し、［On Click］ドロップダウンで［New Client Action］を選択します。
-
クライアントアクションにAssignをドラッグし、ShowPopup変数を［False］に設定します。
［Close Popup］ボタンをクリックするとShowPopup変数が［False］に設定され、ポップアップが閉じます。
-
［Open Popup］ボタンで手順6および7を繰り返します。ただし、変数の値を［True］に設定します。［Open Popup］ボタンをクリックするとShowPopup変数が［True］に設定され、ポップアップが開きます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
リアクティブWebおよびモバイルアプリでのポップアップの使用の詳細については、こちらのビデオチュートリアルをご覧ください。
従来のWeb
従来のWebアプリでポップアップを作成して使用するには、以下の手順を実行します。
-
Service StudioのツールボックスでLinkウィジェットを検索し、画面の［Actions］プレースホルダにドラッグします。
-
リンクの名前とテキストを入力します。この例では、リンク名には「
PopupLink」と入力し、リンクテキストには「Show Popup」と入力しています。Methodプロパティが「Navigate」に設定されていることを確認します。
-
ポップアップのための新しい画面を作成します。ウィジェットツリーを選択し、［Source Web Block］ドロップダウンで［Layouts\LayoutPopup］を選択します。
-
［Center］、［Left］、［Right］の各プレースホルダを画面から削除し、［MainContent］プレースホルダのみを残します。
-
ポップアップコンテンツを追加します。この例では、テキストを追加しています。
-
もう一度メイン画面を選択し、［Properties］タブで、リンクのOn ClickのDestinationプロパティを先ほど作成したポップアップ画面に設定します。
-
ツールボックスでPopup Editorウィジェットを検索し、画面のメインコンテンツ領域にドラッグします。
-
［Properties］タブの［LinkOnButtonWidgetId］ドロップダウンで、LinkウィジェットのID（この例では、[PopupLink.Id]）を選択します。
また、［Destination］ドロップダウンで［New Screen Action］を選択して、Popup Editorウィジェットの画面アクションを作成することができます。この例では、［New Screen Action］を選択していますが、アクションのフローは空白のままにしています。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
従来のWebアプリでのポップアップの使用の詳細については、こちらのビデオチュートリアルをご覧ください。