Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher
Language:

 

 

 

 

 
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およびモバイルアプリでのポップアップの使用の詳細については、こちらのビデオチュートリアルをご覧ください。

従来のWeb

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

1.Service StudioのツールボックスでLinkウィジェットを検索し、画面の[Actions]プレースホルダにドラッグします。

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

1.リンクの名前とテキストを入力します。この例では、リンク名には「PopupLink」と入力し、リンクテキストには「Show Popup」と入力しています。Methodプロパティが「Navigate」に設定されていることを確認します。

![リンクの名前とテキストの入力](images/popupweb-2-ss.png)

1.ポップアップのための新しい画面を作成します。ウィジェットツリーを選択し、[Source Web Block]ドロップダウンで[Layouts\LayoutPopup]を選択します。

![Webブロックのソースのプロパティ](images/popupweb-3-ss.png)

1.[Center]、[Left]、[Right]の各プレースホルダを画面から削除し、[MainContent]プレースホルダのみを残します。

![Webブロックのソースのプロパティ](images/popupweb-4-ss.png)

1.ポップアップコンテンツを追加します。この例では、テキストを追加しています。

![ポップアップコンテンツ](images/popupweb-5-ss.png)

1.もう一度メイン画面を選択し、[Properties]タブで、リンクのOn ClickのDestinationプロパティを先ほど作成したポップアップ画面に設定します。

![リンク先](images/popupweb-6-ss.png)

1.ツールボックスでPopup Editorウィジェットを検索し、画面のメインコンテンツ領域にドラッグします。

![画面へのPopup Editorのドラッグ](images/popupweb-7-ss.png)

1.[Properties]タブの[LinkOnButtonWidgetId]ドロップダウンで、LinkウィジェットのID(この例では、[PopupLink.Id])を選択します。

![画面へのPopup Editorのドラッグ](images/popupweb-8-ss.png)

また、[**Destination**]ドロップダウンで[**New Screen Action**]を選択して、Popup Editorウィジェットの画面アクションを作成することができます。この例では、[**New Screen Action**]を選択していますが、アクションのフローは空白のままにしています。

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

従来のWebアプリでのポップアップの使用の詳細については、こちらのビデオチュートリアルをご覧ください。