Modal

Modal UIパターンを使用すると、エンドユーザーの操作を中断してアクションを要求することができます。エンドユーザーの注意を重要な情報に向けるために実装します。現在のプロセスを続行するために、エンドユーザーに重要な情報を入力するように要求する場合に最適です。

Modal UIパターンの使用方法

この例では、ユーザーが問い合わせを入力できるフォームがアプリにすでに含まれています。ユーザーがメッセージを送信すると、Modalウィジェットを使用した確認メッセージが表示されます。

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

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

![](<images/modal-5-ss.png>)

1.ツールボックスからModalウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、［Properties］タブでウィジェットの名前を入力します。この例では、「Confirmation」と入力しています。

![](<images/modal-6-ss.png?width=800>)

デフォルトで、Modalウィジェットには［Title］、［Icon］、［Content］、［Footer］の各プレースホルダが含まれています。

1.プレースホルダにコンテンツを追加します。この例では、［Title］プレースホルダと［Content］プレースホルダにテキストを追加し、［Footer］プレースホルダに2つのボタン（［Yes］および［No］）を追加しています。

![](<images/modal-7-ss.png?width=800>)

1.この例では、Modalウィジェットを開くため、［Yes］ボタンのMethodプロパティとDestinationプロパティを設定する必要があります。これを行うには、［Yes］ボタンを選択し、［Properties］タブの［Method］ドロップダウンで［Ajax Submit］を選択して、［Destination］で［New Screen Action］を選択します。

![](<images/modal-8-ss.png?width=800>)

1.画面アクションの名前を入力します。この例では、「ConfirmSend」と入力しています。

![](<images/modal-11-ss.png>)

1.［Logic］タブを選択し、OutSystemsUIWeb > Modalに移動して、ToggleModalを画面アクションにドラッグします。

![](<images/modal-9-ss.png?width=800>)

1.［Properties］タブの［WidgetId］ドロップダウンで、ModalウィジェットのIDを選択します。この例では、［Confirmation.Id］を選択しています。

![](<images/modal-10-ss.png>)

1.この例では、Modalを閉じるため、［No］ボタンのMethodプロパティとDestinationプロパティを設定する必要があります。これを行うには、画面名をダブルクリックし、［No］ボタンを選択し、［Properties］タブの［Method］ドロップダウンで［Ajax Submit］を選択して、［Destination］で先ほど作成した画面アクションを選択します。この場合は、ConfirmSendです。

![](<images/modal-12-ss.png>)

1.［Properties］タブで（オプションの）プロパティを設定し、Modalのルックアンドフィールを変更できます。

![](<images/modal-4-ss.png>)

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

この例の結果は以下のようになります。