Skip to main content

 

 

OutSystemsオンラインヘルプ
10
アプリケーションの開発
UIを設計する
入力
ポップアップを作成して使用する
入力

 

 
Language:
English|日本語
 
 
 
OutSystems

ポップアップを作成して使用する

  1. Last updated
  2. Save as PDF

ポップアップはエンドユーザーに入力を要求したり、情報を表示したりするために頻繁に使用されます。データを入力している間も、コンテキストは保たれたままであるため、エンドユーザーに優れたエクスペリエンスを提供します。

モバイルアプリでポップアップを使用するには、以下の手順を実行します。

  1. Popupウィジェットを画面にドラッグします。
  2. ポップアップの表示を制御するために、ブーリアン型の変数を画面に追加します（これを使用してポップアップの表示/非表示を切り替えます）。
  3. Show Popupプロパティに変数を設定します。これで、変数の値に応じて効果的にポップアップを切り替えます。
  4. Trueを変数に割り当て、ポップアップを表示する画面にロジックを実装します。
  5. ポップアップコンテンツを実装します。

Webアプリでポップアップを使用するには、以下の手順を実行します。

  1. ポップアップを開く画面ウィジェットをリンクまたはボタンに含め、リンクまたはボタンに名前を付けます。
  2. ポップアップのための新しい画面を作成します。画面レイアウトをLayoutsOther\Layout_Popupに設定します。
  3. 前の画面に戻り、リンクのDestinationをポップアップ画面にします。
  4. 検索バーを使用してPopup_Editorを検索し、画面にドラッグします。
  5. リンクまたはボタンのIdランタイムプロパティで、Popup_EditorのLinkOrButtonWidgetプロパティを設定します。
  6. Popup_EditorのOnNotifyにあるDestinationプロパティで［(New Screen Action)］を選択します。ロジックは実行しないため、アクションフローを空にしておきます。
  7. ポップアップを実装します。閉じるには、Popup_Editor_Closeアクションを使用します。

モバイルアプリの例

場所の検索、レビュー、評価ができるGoOutアプリケーションで、レビューに乱暴な表現が含まれていると判断された際にレビューレポートを送信するかどうかを確認するポップアップをエンドユーザーに表示します。

  1. レビューの詳細を表示するReviewInfoブロックを開きます。

  2. 一度クリックしたアイコンの横にポップアップウィジェットをドラッグします。

  3. ローカル変数を画面に追加し、 ShowConfirmReportという名前を付けます。データ型をBooleanに設定します。

  4. ポップアップのShow Popupプロパティを新しい変数に設定します。ポップアップは、変数の値に応じて表示されます。

  5. 画面で、ポップアップを表示するためにReportOnClickクライアントアクションを追加します（ShowConfirmReportはTrue）。

  6. このアクションを、レビューを報告するアイコンのOnClickイベントに設定します。

  7. ポップアップコンテンツを以下の画像のように作成します。

  8. オプションの1つをクリックした後にポップアップを非表示にするには、ReportOnClickアクションで変数ShowConfirmReportをFalseに設定するロジックを実装します。

Webアプリの例

場所の検索、レビュー、評価ができるGoOutWebアプリケーションは、各レビューに関連付けられた画像を保持できます。これらの画像はサムネイルとして、レビューコメントとReviewInfoと呼ばれるブロックでの評価とともに表示されます。場所とレビューのコンテキストを保ったまま、画像を元のサイズで表示できるようにします。

  1. ReviewInfoブロックを開きます。

  2. リンクに画像のサムネイルを含めます。リンクにImageLinkという名前を付けます。

  3. ［Popup_PhotoPreview］画面を作成し、画面レイアウトをLayoutsOther\Layout_Popupに設定します。この画面は、ポップアップコンテンツを表示します。

  4. 画像を取得して表示するために、PhotoId入力データパラメータを追加します。

  5. ReviewInfoブロックに戻ります。リンクのDestinationを「Popup_PhotoPreview」に設定し、ポップアップに表示される画像のIDで入力パラメータを定義します。

  6. 検索バーを使用してPopup_Editorブロックを検索し、画面の画像の横にドラッグします。

  7. Popup_EditorのLinkOrButtonWidgetプロパティをImageLink.Idに設定します。

  8. Popup_EditorのOnNotifyにあるDestinationプロパティで［(New Screen Action)］を選択します。ポップアップでのエンドユーザーとのインタラクションに対してロジックを実行しないため、作成したアクションのフローは空にしておきます。