Navigate 関数を使うその他の方法

  • 6 分

ボタンまたはアイコン コントロールの OnSelect プロパティを使用する以外にも、アプリ内のナビゲーションを構成する方法は多数あります。 このユニットでは、フォーム コントロールの OnSuccess プロパティ、タイマー コントロールの OnTimerEnd プロパティ、およびドロップダウン コントロールの OnChange プロパティという 3 つの一般的な手法を紹介します。

OnSuccess で移動する

ユーザー エクスペリエンスを向上させるためには、正常なデータ送信後にフィードバックを提供すると便利です。 Power Apps には、これをサポートするツールが用意されています。 たとえば、アプリに Success Screen を挿入する場合、データが正常に保存された場合のみその画面を表示するようナビゲーションを構成できます。

まず、[新しい画面] ドロップダウンを使用して Success Screen を挿入し、名前を Success Screen に変更します。

新しい画面のテンプレートのスクリーンショット。

次に、フォームを選択し、その OnSuccess プロパティを見つけます。 データが正常に保存された場合のみユーザーが Success Screen に移動するには、次の数式を使用します。

Navigate(‘Success Screen’, ScreenTransition.Fade)

ツリー ビューのフォーム名、フォーム、および OnSuccess プロパティにフォーカスが置かれたフォームのスクリーンショット。

この Navigate 関数は、フォームの送信が成功した後にのみトリガーされます。

その後、ユーザーが前の画面に戻る方法を構成します。 手動での操作を実行しなくても、タイマー コントロールを使用できます。

OnTimerEnd で移動する

タイマー コントロールを使用すると、成功メッセージを短時間表示した後、カタログまたはホーム画面に戻るなどの遷移を自動化できます。

既定では、タイマー コントロールは次のようになっています。

  • 画面に追加すると表示されます。

  • Duration は 60,000 ミリ秒 (60 秒) です。

  • AutoStart は false に設定されています。

次のようにカスタマイズできます。

  1. Success Screen にタイマー コントロールを挿入します。

  2. AutoStart プロパティを true に設定します。

  3. Duration プロパティを 4000 (4 秒) に設定します。

  4. OnTimerEnd プロパティを Navigate('<yourScreenName>') に設定します。

  5. Visible プロパティを false に設定します。

これらの設定を使用すると、画面が読み込まれるときに自動的にタイマーが開始され、4 秒後に別の画面に移動します。

OnChange で移動する

もう 1 つの効果的な移動手法は、ドロップダウン コントロールを使用してアプリにメニューを追加する方法です。 このドロップダウンを 1 つの画面で設定し、一貫性を保つためにアプリ内の他の画面にコピーすることができます。

ドロップダウン コントロールは、データ ソースとしてテーブルを使用します。 Items プロパティでは、次のようにアプリの画面名の一覧を入力できます。

["","Home Screen", "Catalog Screen", "Success Screen"]

この構文は、値が示された 1 列のテーブルを表しています。 以下と等価です。

Table({Value: ""},{Value: "Home Screen"},{Value: "Catalog Screen"}, {Value: "Success Screen"})

角括弧構文は、テーブル データの簡単な入力方法です。

最初の値 "" は空の文字列です。 これをコントロールの Default プロパティとして設定すると、オプションが事前に選択されなくなります。

Items プロパティを構成したら、コントロールの OnChange プロパティを更新して移動を処理します。

ナビゲーション ドロップ ダウンのスクリーンショット。

ヒント

必ず、OnSelect ではなく、OnChange プロパティを更新してください。 OnSelect プロパティはコントロールがクリックされたときにトリガーされますが、OnChange は選択された値が変更されたときに使用されます。

推奨される方法として、選択した値を評価して移動するため、Switch 関数を Self 参照と共に使用できます。 または、If ステートメントを使用することもできます。 どちらも条件付きロジック構造です。

たとえば、Contoso Coffee Machines アプリでは、ドロップダウン コントロールの OnChange プロパティに次の数式を使用できます。

Switch(Self.SelectedText.Value,
    "Catalog",Navigate('Catalog Screen',ScreenTransition.Cover),
    "Admin",Navigate('Admin Screen',ScreenTransition.Cover)
);
Reset(Self)

Switch ステートメントのスクリーンショット。

このフォーミュラは、Self.SelectedText.Value—ドロップダウンで選択された項目を評価します。 値が "Catalog" の場合、アプリは Catalog Screen に移動します。 値が "Admin" の場合、Admin Screen に移動します。

Switch 関数は、単一の入力に基づいて複数の結果が考えられる場合に最適です。

最後の行 Reset(Self) は、ドロップダウンをデフォルト値 ("") にリセットし、選択を削除します。

まだ十分に慣れていない場合でも、心配しないでください。 このプロセスについては、次のユニットの演習で再度確認します。