Skip to main content

 

 

 

 
Language:
 
Service Studioバージョン :
 
 
OutSystems

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

ポップアップを使用すると、ユーザーに対して情報を表示したり情報の入力を求めたりすることができます。ポップアップを適切に使用すると、ユーザーが同じページ上にとどまることができるため、ユーザーエクスペリエンスが向上します。

リアクティブWebおよびモバイル

リアクティブWebおよびモバイルアプリでポップアップを作成して使用するには、以下の手順を実行します。

  1. Service StudioのツールボックスでPopupを検索します。

    Popupウィジェットが表示されます。

    Popupウィジェット

  2. Popupウィジェットを画面のメインコンテンツ領域にドラッグします。

    画面へのウィジェットのドラッグ

  3. (要素ツリー内にある)画面名を右クリックし、[Add Local Variable]を選択して、Booleanデータ型の変数を画面に追加します。この例では、変数に「ShowPopup」という名前を付けます。

    新しいローカル変数の追加

    Boolean型への変数の設定

  4. Popupウィジェットを選択し、[Properties]タブで、Show Popupプロパティの新しい変数を入力します。これで、変数の値に応じてポップアップを切り替えます。

    Boolean型への変数の設定

  5. ポップアップにコンテンツを追加します。

    この例では、テキストと[Close Popup]ボタンを追加しています。さらに、[Actions]画面領域に[Show Popup]ボタンを追加しています。

    ポップアップへのコンテンツの追加

  6. Close Popup]ボタンを選択し、[On Click]ドロップダウンで[New Client Action]を選択します。

    新しいクライアントアクションの作成

  7. クライアントアクションにAssignをドラッグし、ShowPopup変数を[False]に設定します。

    クライアントアクションへのAssignの追加

    Close Popup]ボタンをクリックするとShowPopup変数が[False]に設定され、ポップアップが閉じます。

  8. [Open Popup]ボタンで手順6および7を繰り返します。ただし、変数の値を[True]に設定します。[Open Popup]ボタンをクリックするとShowPopup変数が[True]に設定され、ポップアップが開きます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

リアクティブWebおよびモバイルアプリでのポップアップの使用の詳細については、こちらのビデオチュートリアルをご覧ください。