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

  • 6 分

アプリ内でナビゲーションを設定する方法は、ボタンやアイコン コントロールの OnSelect プロパティを単に使用する以外にも多く存在します。 このユニットでは、3 つの一般的な手法を紹介します: Form コントロールの OnSuccess プロパティ、Timer コントロールの OnTimerEnd プロパティ、Dropdown コントロールの OnChange プロパティ。

OnSuccess で移動する

デザイナーにとって、ユーザー エクスペリエンスを考慮することは、データに変更を加えたユーザーに何らかのフィードバックを提供することです。 Power Apps はこのフィードバックを行うツールを提供します。 アプリに Success Screen を挿入する場合は、Power Apps のレコードでデータが正しく更新されたことを確認してから、ユーザーに画面を表示する必要があります。 それには以下の手順を行ってください。

まず、新しい画面 > テンプレートから Success Screen を探します。 次に、それをアプリに追加します。

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

次に、フォームを検索して OnSuccess プロパティに移動します。 Power Apps でデータが正しく書き込まれた場合にのみ Success Screen を表示することが重要です。 それには、OnSuccess プロパティに Navigate 関数を追加し、Success Screen の名前を次のように指定します。

Navigate(‘Success Screen’, ScreenTransition.Fade)

そして、ユーザーが別の画面に戻れるようにしたいでしょう。 (ボタンやアイコンを作成する以外の方法で) 良い方法は、Timer コントロールを追加することです。

OnTimerEnd で移動する

ユーザーがアプリ内を移動するために、Timer コントロールを使用できます。 一定の時間が経過すると、Navigate 関数によって指定された画面に移動します。 次の例では Timer コントロールを使用し、ユーザーに成功メッセージを数秒間表示した後に Catalog Screen に戻るよう設定します。

Timer コントロールをアプリに追加して表示します。期間は 60,000 ミリ秒 (60秒) にセットされています。 AutoStart プロパティはオフになっているため、トリガーを作成して開始する必要があります。 既定のモードをいくつか変更することで、タイマーを希望どおりに動作させることができます。 次のユニットでもこれらの調整を演習しますが、おおよそ次の手順で行います。

  1. Timer コントロールを挿入します。

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

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

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

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

AutoStart が true に設定されているため、プレビュー/再生モードで Timerコントロールが起動し、ユーザーに画面が表示されます。 4 秒後に Navigate 関数が起動し、ユーザーに別の画面が表示されます。

OnChange で移動する

メニュー、つまり Dropdown コントロールをアプリに追加する方法でも、画面を移動できます。 ドロップダウンで機能を 1 つの画面に追加し、それをアプリの他の画面にコピーするという方法です。

Dropdown コントロールは、データのテーブル (データ タイプ: Table) を使用します。 そのため、Items プロパティで、必要なデータのテーブルを何でも追加できます。 2 つの画面だけを移動する場合は、Dropdown コントロールの Items プロパティにテーブルを次のように指定します。

["","Catalog", "Admin"]

角括弧はデータのテーブルを示します。コードはこの例のように指定してもとまったく同じです。

Table({Value: ""},{Value: "Catalog"},{Value: "Admin"})

角括弧を使用する方が簡単に入力できます。

空のテキスト文字列 ("") をテーブルの最初の値として追加しました。 それを Default プロパティとして割り当てます。

Items プロパティを定義し、Dropdown コントロールの OnChange プロパティを変更してください。

ヒント

Dropdown コントロールで変更するプロパティを間違えないよう注意してください。 OnSelect プロパティの更新では間違いが起こりがちです。 OnSelect プロパティは、コントロールを変更するときではなく、コントロールを選択するときに開始することに注意してください。 今回のような例では、OnChange プロパティを更新してください。

Dropdown コントロールで OnChange プロパティを更新する場合は、Switch 関数を使用し、Self 関数を使用してコントロールを参照すると非常に簡単です。 ただし、If 関数も使用できます。 Switch と If のどちらを使用しても、条件を評価してアクションを実行できます。

Contoso コーヒー メーカー アプリの例では、Dropdown コントロールに OnChange プロパティとして次のコードがあります。

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

Switch ステートメントは値を評価してから、いずれかの結果が条件に一致する場合にアクションを実行します。 前の例では、Self.SelectedText.Value が Dropdown コントロールで値として選択されています。 この値が Catalog であれば、Switch 関数によって Catalog Screen への移動が実行されます。 この値が Admin であれば、Switch 関数によって Admin Screen への移動が実行されます。

Switch は、一致した値に依存する単一の条件のみを実行します。 そのため、単一の値に基づいて考えられるアクションが多数ある場合に理想的です。

最後に、Reset 関数を使用して、Dropdown コントロールを Default の値である "" (空の文字列) にリセットしています。

これらの情報すべてをよく理解できなくても心配ありません。 次のユニットの演習でもう一度説明します。