ポップアップとダイアログ

ポップアップとダイアログは、情報を表示し、ユーザーにレスポンスを促すために使用します。次の場合に役立ちます。

  • ユーザー リクエスト(レコードの削除など)を確認する。
  • 重要なタスク(新しい広告枠オーダーの作成など)にフォーカスする。
  • ユーザーが確認する必要がある重要な情報を表示する。
  • ユーザーがアクションを完了した後にトランザクションが進行中であることを表示する。

App Maker は 2 種類のダイアログ ボックスをサポートしています。

  • ポップアップ - さまざまな通知シナリオに対応する事前構成済みのダイアログ ボックス。ポップアップはマテリアル デザイン基準に準拠しています。
  • カスタム ダイアログ ボックス - アプリのユーザーに通知するために作成するページまたはページ フラグメント。カスタム ダイアログ ボックスを設定するには作業がさらに必要ですが、アプリが異なる(マテリアル デザイン以外の)デザインを使用している場合には便利です。

App Maker の組み込みポップアップを使用する

ポップアップは、モーダルや非モーダルのインタラクションと通知をアプリにすばやく追加する、優れた方法です。

ページやページ フラグメントの追加と同様に、ポップアップを追加します。

  1. [Pages] の上にポインタを置き、追加アイコン(add)をクリックしてから [Popup] をクリックします。
  2. ポップアップ ダイアログのテキストを編集します。
  3. プロパティ エディタを使用して、ポップアップの機能を制御する onClick やその他のプロパティを構成します。

空のポップアップ

カスタム ポップアップの空白のキャンバスとして使用します。生成されたコンテンツが含まれないため、ダイアログを作成するにはウィジェットを追加する必要があります。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップとウィジェットの外観とイベントを構成します。

画面上を左からスライドしてアプリの移動先を表示するメニューを追加するために使用します。ナビゲーション メニューは、作成時に存在しているページにのみリンクします。ページを後でアプリに追加した場合は、手動でメニューに追加する必要があります。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップの外観とイベントを構成します。メニューに表示されているテキストを編集することも、ページをドラッグして順番を並べ替えることもできます。

確認ダイアログ

呼び出したアクションを本当に続行するかどうかをユーザーに確認するために使用します。このダイアログは多くの場合、そのアクションに関連する警告や重要な情報とペアになっています。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップの外観とイベントを構成します。

さらにこのポップアップでは次の作業が必要です。

  • タイトルを編集する。確認ダイアログのタイトルは、リクエストされたアクションを反映した、意味のあるものとします。
  • テキスト フィールドを編集して、ユーザーがアクションを完了した場合にどうなるかを説明する。
  • ボタンのテキストを変更して、onClick イベントを割り当てる。

通知ダイアログ

このポップアップは、クリティカルでないイベントやアクションをユーザーに通知するために使用します。ユーザー入力はありません。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップの外観とイベントを構成します。デフォルトでは、[Got it!] ボタンでダイアログが閉じます。

さらにこのポップアップでは次の作業が必要です。

  • タイトルを編集する。ダイアログのタイトルは、それに続く説明を反映した、意味のあるものとします。
  • テキスト フィールドを編集して、アプリの動作を説明する。

このポップアップは、アプリがタスクを完了するまでユーザーの待機を求めるために使用します。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップの外観とイベントを構成します。

スナックバー

このポップアップは、画面下部のメッセージを通じて操作に関する簡単なフィードバックを提供するために使用します。操作に関連する 1 行のテキストが含まれます。

このポップアップをカスタマイズする

プロパティ エディタで、ポップアップの外観とイベントを構成します。

さらにこのポップアップでは次の作業が必要です。

  • テキスト フィールドを編集する。アクションに関連する 1 行のテキストとします。
  • 必要に応じて、ボタンのテキストを Dismiss からより適切なアクションに変更し、その onClick イベントを更新する。

カスタム ダイアログ ボックスを作成する

ダイアログ ボックスとして、任意のページやページ フラグメントを使用できます。

  1. ボタンをページにドラッグしてから、[onClick] プロパティをクリックします。
  2. [Open Dialog] プリセット アクションを選択します。
  3. ダイアログとして開くページやページ フラグメントを選択します。

あるいは、クライアント側のスクリプトでコードを記述して、MyDialog という名前のページをダイアログとして表示することもできます。

app.showDialog(app.pages.MyDialog);
    

ダイアログを閉じる

アプリユーザーがボタンをクリックしたときに開いているダイアログを閉じるには、次のようにします。

  1. ボタン ウィジェットを選択してから、[onClick] プロパティをクリックします。
  2. [Close Dialog] アクションを選択します。

あるいは、クライアント側のスクリプトでコードを記述することもできます。

app.closeDialog();
    

CSS プロパティ

アプリケーションの Dialog プロパティをカスタマイズするには、次の CSS クラスを使用します。

  • .app-Dialog: ダイアログのトップレベル要素に適用されます。
  • .app-DialogGlass: ダイアログが開いているときに残りの UI を覆う glass 要素に適用されます。
  • .app-DialogBody: ダイアログのコンテンツに適用されます。

ダイアログ サイズ

ダイアログのサイズは、ページまたはページ フラグメントのサイズによって決まります。

ダイアログの寸法を変更するには、ページやページ フラグメントをクリックしてから、プロパティ エディタで寸法を編集します。