演習 - アプリのナビゲーションの練習

30 分

このラーニングモジュールも終わりに近づいていいます。演習ですべてをまとめてみましょう。

次の例では、Contoso コーヒーメーカーアプリに引き続き画面遷移機能を追加します。別のマルチスクリーンアプリを使用してもかまいません。次の手順は、このラーニングパスで使用しているアプリと一致しています。

メモ

数式を入力する場合は、コピーして貼り付けを操作するよりも、式 (fx) に入力することをお勧めします。 Power Apps では、一重引用符と二重引用符の意味は同じではありません。

Power Apps のホームページにログインしてから、Contoso コーヒーメーカー アプリを編集モードで開きます。
ホーム画面で、カタログの表示ボタンを選択します。 OnSelect 式で、Navigate('Catalog Screen') を次のように変更します。

Navigate('Catalog Screen',ScreenTransition.Cover)
引き続きホーム画面で、Admin Screen ボタンを選択します。 OnSelect 式で、Navigate('Admin Screen') を次のように変更します。

Navigate('Admin Screen',ScreenTransition.Fade)
アプリをプレビューモードにします。アプリをプレビューモードに変更し、ホーム画面からボタンを選択してそれぞれの画面に移動します。次に、戻るボタンを使用してホーム画面に戻り、画面遷移がどのように行われ、どう感じるかをテストします。
戻るボタンに遷移効果を追加してみましょう。アプリを編集モードに戻し、Admin Screen に移動します。
戻る矢印のアイコン (または戻るボタンとして使用しているアイコンやボタン) を選択し、OnSelect の式を Back() から次のように変更します。

Back(ScreenTransition.UnCoverRight)
ホーム画面に戻り、アプリをプレビューモードにします。 Admin Screen ボタンを選択してから、戻るボタンを選択します。遷移効果の違いに気づきましたか?
編集モードに戻ります。 新しい画面>テンプレート>成功の順に選択して、Success screenを追加します。
画面の名前を Success Screen に変更します。
Catalog Screen に移動し、Form コントロールを選択します。 ツリービュー パネルでこれを選択してください。
フォームの OnSuccess プロパティに次のコードを入力します。

Navigate(‘Success Screen’,ScreenTransition.Fade)
フォームに OnSuccess を追加したので、ツリービュー パネルの Success Screen に移動します。
Success Screen で Timer コントロールを挿入します。
Timer コントロールのプロパティを次のように調整します。
- AutoStart: true
- Duration: 4000
- OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)
- Visible: false
Success Screen のタイマー機能をテストするには、Catalog Screen に戻り、アプリをプレビュー/再生モードにします。フォーム上の任意の項目を選択し、項目を変更します。
フォームの下部にある変更の保存ボタンを選択します。正しく実行されると、Success Screen が 4 秒間表示されてから、Catalog Screen に戻ります。そこでさらに変更を加えることができます。
プレビュー/再生モードを閉じて、ツリービュー パネルからホーム画面に戻ります。次に、ドロップダウンナビゲーションメニューを作成します。
ホーム画面に Dropdown コントロールを挿入し、長方形のヘッダーの左上隅の下に配置します。
Text label コントロールを挿入し、Text プロパティを Screen Navigation に更新します。それを Dropdown コントロールのすぐ上に配置してください。
Dropdown コントロールを選択します。 Default プロパティを次のように更新します。

""
引き続き、Dropdown コントロールで、Items プロパティを次のように更新します。

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

Dropdown コントロールの OnChange プロパティに次の式を入力します。

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

アプリをプレビュー/再生モードに戻し、他の画面に移動するために DropDown コントロールの OnChange 機能をテストします。
Catalog Screen にホーム アイコンを追加しましょう。アプリを編集モードに戻して、Catalog Screen を選択します。
Catalog Screen の右上にある戻るアイコンコントロールを選択し、Ctrl+Cを使用するか、右クリックしてコピーを選択してコピーします。
戻るアイコンを貼り付けて (Ctrl + V)、長方形のヘッダーの左上に再配置します。
貼り付けた戻るアイコンを選択した状態で、コマンドバーのアイコン ボタンを使用して、アイコンをホーム アイコンに変更します。
OnSelect プロパティを次のように変更します。

Navigate('Home Screen', ScreenTransition.CoverRight)

これで、データへの変更を正常に保存して、ホームに戻ることができます。
Catalog Screen で、プレビューモードでアプリを配置します。ホームアイコンコントロールを選択すると、必ずホーム画面が表示されます。

いくつかのナビゲーション機能がアプリに正常に追加されました。

Navigate 関数および Back 関数の画面遷移。
フォームの OnSuccess プロパティを使用して移動する先の Success Screen。
OnTimerEnd プロパティを使用して Catalog Screen に戻る Timer コントロール。
OnChange プロパティを使用して他の画面に移動する Dropdown コントロール。
ユーザーがホーム画面に戻るためのホーム アイコン。

では、知識チェックを行いましょう。

演習 - アプリのナビゲーションの練習

フィードバック