Modal

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

Modal UIパターンの使用方法

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

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

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

   

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

   

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

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

   

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

   

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

   

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

   

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

   

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

   

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

   

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

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