Skip to main content

 

 

 

 
Language:
 
Service Studioバージョン :
 
 
OutSystems

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

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

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

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

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

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

![Popupウィジェット](images/popup-1-ss.png)

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

![画面へのウィジェットのドラッグ](images/popup-2-ss.png)

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

![新しいローカル変数の追加](images/popup-3-ss.png)

![Boolean型への変数の設定](images/popup-4-ss.png)

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

![Boolean型への変数の設定](images/popup-5-ss.png)

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

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

![ポップアップへのコンテンツの追加](images/popup-6-ss.png)

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

![新しいクライアントアクションの作成](images/popup-8-ss.png)

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

![クライアントアクションへのAssignの追加](images/popup-7-ss.png)

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

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

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

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

注記

Popupウィジェットに関するその他の注記を以下に示します。

ポップアップに移動するリンクの確認メッセージの表示

確認メッセージが設定されたLinkウィジェットの移動先がRichWidgets\Popup_Uploadになっている場合は、アプリに確認メッセージが表示されません。メッセージを表示するには、最初に非表示のLinkに移動し、そこからRichWidgets\Popup_Uploadに移動します。

1.Linkウィジェットを追加し、Confirmation Messageプロパティにメッセージを入力します。

1.LinkのDestinationRichWidgets\Widget_Clickを使用するサーバーアクションに設定し、2つ目のLinkウィジェットのidを選択します。

1.2つ目のLinkのVisibilityプロパティを[False]に設定し、Destinationを「RichWidgets\Popup_Upload」に設定します。

  • Was this article helpful?