Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

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のルックアンドフィールを変更できます。

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

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

プロパティ

プロパティ 説明
Position(PositionExtended Identifier型): オプション 画面上のModalの位置を設定します。

  • 空白 - Modalが画面の中央に配置されます(Entities.PositionExtended.Center)。これがデフォルトです。
  • Entities.PositionExtended.TopLeft - Modalが画面の左上に配置されます。
HasOverlay(Boolean型): オプション Trueの場合、Modalの背後のオーバーレイが有効になります。これがデフォルトです。Falseの場合、オーバーレイは表示されません。
EnterAnimation(EnterAnimation Identifier型): オプション 画面でアニメーションが開始するときの場所を定義します。

  • 空白 - アニメーションが小さいサイズから描画のサイズへと変化します(Entities.EnterAnimation.EnterScale)。これがデフォルトです。
  • Entities.EnterAnimation.EnterBottom - アニメーションが画面の下から開始します。
LeaveAnimation(LeaveAnimation Identifier型): オプション 画面でアニメーションが終了するときの場所を定義します。

  • 空白 - アニメーションが描画のサイズから小さいサイズへと変化します。(Entities.LeaveAnimation.EnterScale)。これがデフォルトです。
  • Entities.LeaveAnimation.EnterBottom - アニメーションが画面の下から終了します。
ExtendedClass(Text型): オプション Modal UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるModal UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるModal UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?